首页 > 解决方案 > axios拦截请求回调不起作用

问题描述

我有以下代码

import {AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse} from "axios";
import { request } from "http";

const onRequest = (config: AxiosRequestConfig): AxiosRequestConfig => {
    console.log('in-2')
    console.info(`[request] [${JSON.stringify(config)}]`);
    config = {...config,baseURL :"https://api.test.com",headers: { ...config.headers,...{'Authorization':"token"} } }
    return config;
}
//process.env.REACT_API_URL

const onRequestError = (error: AxiosError): Promise<AxiosError> => {
    console.error(`[request error] [${JSON.stringify(error)}]`);
    return Promise.reject(error);
}

const onResponse = (response: AxiosResponse): AxiosResponse => {
    console.info(`[response] [${JSON.stringify(response)}]`);
    return response;
}

const onResponseError = (error: AxiosError): Promise<AxiosError> => {
    console.error(`[response error] [${JSON.stringify(error)}]`);
    return Promise.reject(error);
}

export function setupInterceptorsTo(axiosInstance: AxiosInstance): AxiosInstance {
    console.log('in',axiosInstance)
    axiosInstance.interceptors.request.use(onRequest,onRequestError  );
    axiosInstance.interceptors.response.use(onResponse, onResponseError);
    return axiosInstance;
}

然后

import {setupInterceptorsTo} from "./Interceptors";
import axios from "axios";
setupInterceptorsTo(axios)
export default  axios.create();

但是 onRequest 回调永远不会执行

我也试过喜欢

import {setupInterceptorsTo} from "./Interceptors";
import axios from "axios";
setupInterceptorsTo(axios)
export default  axios.create({baseURL :"https://api.test.com"});

但是 onRequest 或 onRequestError 回调仍然不起作用,因为我正在提供虚拟 API 调用,这会在控制台上引发错误。

我认为应该在任何请求之前调用 onRequest 以便我们可以修改请求,并且如果出现任何错误,包括 404,则应该调用 onRequestError,

是不是我的想法错了。

请指教。谢谢

标签: javascripthttpsaxiosinterceptor

解决方案


推荐阅读