axios二次封装响应拦截实际是response.data，没有响应头，有时候需要响应头的数据，但又不像重写拦截器，如何解决？-灵析社区
栀子花爷爷响应拦截器的其他校验需要，但有的也需要响应头的一些信息进行一些判断，
MaxClick1.如果是新项目 应该一开始就考虑到这些问题，做好扩展性。
axios.interceptors.response.use(
(response: AxiosResponse) => {
NProgress.done();
requestQueue.removeRequest(response.config.url!);
return response;
},
(error: AxiosError) => {},
);
拦截器中直接返回response
进行二次封装就显得很有规范了
export class CallbackModel{
data?: T;
error?: AxiosErrorModel;
// response.data
static Callback(promise: Promise>,): Promise | CallbackModel> {
return promise
.then>(({ data }) => ({ data }))
.catch((error) => ({ error }))
}
//response
static CallbackWithHeader(promise: Promise>): Promise | CallbackModelWithHeder> {
return promise
.then>((response) => ({ response }))
.catch((error) => ({ error }))
}
};
export class CallbackModelWithHeder extends CallbackModel{
response?: AxiosResponse;
}
export class SmartSheets {
// data
static getBackupListSource(query: {}): Promise | CallbackModel> {
return CallbackModel.Callback(
axios.get(`${window.location.origin}/mock/file.json`, query)
)
}
// response
static getBackupListSourceWithHeader(): Promise | CallbackModelWithHeder> {
return CallbackModel.CallbackWithHeader(
axios.get(`${window.location.origin}/mock/file.json`)
)
}
}
function get() {
// respones.data
SmartSheets.getBackupListSource({}).then(({ data, error }) => {
})
// respones.data
SmartSheets.getBackupListSourceWithHeader().then(({response,error})=>{
// response?.config
// response?.data
})
}
2.如果你的项目已经定型了的话.
这种属于局部模块行为 直接使用 axios.create生成模块实例进行使用 复用一些全局的配置或者处理函数 然后自定义响应拦截即可。不建议修改原有代码