axios二次封装响应拦截实际是response.data,没有响应头,有时候需要响应头的数据,但又不像重写拦截器,如何解决?-灵析社区

MaxClick

1.如果是新项目 应该一开始就考虑到这些问题,做好扩展性。 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生成模块实例进行使用 复用一些全局的配置或者处理函数 然后自定义响应拦截即可。不建议修改原有代码

阅读量:1

点赞量:0

问AI