【axios】的浅度分析 - ToB企服应用市场:ToB评测及商务社交产业平台

class InterceptorManager {
constructor() {
this.handlers = []; // 存储拦截器的数组
}
use(fulfilled, rejected) {
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected
});
return this.handlers.length - 1; // 返回拦截器的ID
}
eject(id) {
if (this.handlers[id]) {
this.handlers[id] = null; // 移除拦截器
}
}
forEach(fn) {
this.handlers.forEach((h) => {
if (h !== null) {
fn(h);
}
});
}
}

复制代码

axios.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
chain.unshift(interceptor.fulfilled, interceptor.rejected);
});
axios.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
chain.push(interceptor.fulfilled, interceptor.rejected);
});

复制代码

// 假设 Axios 实例有一个 interceptors 对象，其中包含了 request 和 response 两个数组
const instance = {
interceptors: {
request: [],
response: []
}
};
// 请求拦截器的函数定义
function onFulfilled(fulfilled, rejected) {
return function (config) {
return new Promise((resolve, reject) => {
try {
const result = fulfilled(config);
if (result && typeof result.then === 'function') {
result.then(resolvedConfig => {
resolve(resolvedConfig);
}, rejected);
} else {
resolve(result);
}
} catch (error) {
reject(error);
}
};
};
}
// 响应拦截器的函数定义
function onFulfilledResponse(fulfilled, rejected) {
return function (response) {
return new Promise((resolve, reject) => {
try {
const result = fulfilled(response);
if (result && typeof result.then === 'function') {
result.then(resolvedResponse => {
resolve(resolvedResponse);
}, rejected);
} else {
resolve(result);
}
} catch (error) {
reject(error);
}
};
};
}
// 添加请求拦截器
instance.interceptors.request.use = function (fulfilled, rejected) {
this.interceptors.request.push({
fulfilled: onFulfilled(fulfilled, rejected),
rejected: rejected
});
return this;
};
// 添加响应拦截器
instance.interceptors.response.use = function (fulfilled, rejected) {
this.interceptors.response.push({
fulfilled: onFulfilledResponse(fulfilled, rejected),
rejected: rejected
});
return this;
};
// 简化版的请求发送函数，用于展示拦截器如何处理
function dispatchRequest(config) {
return new Promise((resolve, reject) => {
// 遍历并执行请求拦截器
const chain = [Promise.resolve(config)];
instance.interceptors.request.forEach(interceptor => {
chain.unshift(interceptor.fulfilled, interceptor.rejected);
});
// 遍历并执行响应拦截器
chain.push(dispatchRequestToServer); // 假设这个函数是实际发送请求到服务器的函数
while (chain.length) {
const currentInterceptor = chain.shift();
const nextInterceptor = chain.shift();
if (typeof currentInterceptor === 'function') {
currentInterceptor(config).then(chain => {
if (typeof nextInterceptor === 'function') {
nextInterceptor(chain);
} else {
resolve(chain);
}
}).catch(reject);
}
}
});
}
// 假设函数，用于实际发送请求到服务器
function dispatchRequestToServer(config) {
// 这里应该是实际的请求发送逻辑，为了简化，我们直接返回一个模拟的响应
return Promise.resolve({
data: 'Response data'
});
}
// 使用拦截器
instance.interceptors.request.use(
config => {
// 在发送请求之前做些什么
console.log('Request interceptor called', config);
// 可以在这里修改config对象
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
instance.interceptors.response.use(
response => {
// 对响应数据做点什么
console.log('Response interceptor called', response);
// 可以在这里修改响应数据
return response;
},
error => {
// 对响应错误做点什么
return Promise.reject(error);
}
);
// 发送请求
dispatchRequest({ url: 'https://api.example.com/data' })
.then(response => {
console.log('Response received:', response);
})
.catch(error => {
console.error('Error occurred:', error);
});

复制代码