Reactjs 拦截器无法按预期工作

Question

我正在尝试根据 api 请求实现全局级预加载器。我刚刚用样品尝试过。但不起作用。如何在全局范围内实现拦截器？

import axios from 'axios';

export default async (searchTerms) => {
  try {
    const url = `${process.env.SERVICE_URL}/get-jayachan-detais`;
    const params = JSON.stringify({
      orderInfoRequest: {
        searchType: 'MASTER TRX',
        MasterTrxnId: searchTerms.ordnum
      }
    });
    const response = await axios.post(url, params, { withCredentials: true });

    return {
      errors: [],
      response
    };
  } catch (e) {
    return {
      errors: [e]
    };
  }
};

axios.interceptors.request.use(function () {
    console.log('start preloader');
});

axios.interceptors.response.use(function () {
    console.log('stop preloader');
});

Answer 1

返回config请求拦截器中的对象和拦截器中的响应data/err response：

import axios from 'axios';

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    console.log('start preloader');
    return config;
}, function (error) {
    console.error('Error: request interceptor:', error);
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    console.log('stop preloader');
    return response;
}, function (error) {
    console.error('Error: response interceptor:', error);
    return Promise.reject(error);
});

export default async (searchTerms) => {
    try {
        const url = `${process.env.SERVICE_URL}/get-jayachan-details`;
        const params = {
            orderInfoRequest: {
                searchType: 'MASTER TRX',
                MasterTrxnId: searchTerms.ordnum
            }
        };
        const response = await axios.post(url, params, { withCredentials: true });

        return {
            errors: [],
            response: response.data // Return response data
        };
    } catch (e) {
        return {
            errors: [e]
        };
    }
};

此外，假设如果您收到错误响应，它将帮助您很好地排除和调试问题。