reactjs - 使用拦截器时无法使用 axios 发送表单数据

Question

我正在使用 React 和 axios 从 API 获取数据。一切都工作正常，直到由于某种原因，我需要拦截响应，在这种情况下，我的表单数据不再发送。

对于所有经典案例，我正在做这样的事情:

const formData = new FormData();
formData.append('param1', 'value1');
formData.append('param2', 'value2');
formData.append('param3', 'value3');

axios({
    //...
    data: formData
})

所以我可以在请求调用中看到:

为了使用拦截器，我尝试不更改上面的配置，如下所示:

const instance = axios.create({
    //...
    data: formData
});
instance.interceptors.response.use((response) => {
    //...
}, (error) => {
    //...
});
instance.request();

但表单数据未在请求 header 中发送:

我的第二次尝试是使用 qs解析和字符串化库，但我得到了相同的结果

const instance = axios.create({
    //...
    data: qs.stringify({
        param1: 'value1',
        param2: 'value2',
        param3: 'value3'
    })
});
instance.interceptors.response.use((response) => {
    //handle success
}, (error) => {
    //handle error
});
instance.request();

我的第三次尝试是在发送请求之前通过修改配置(添加 formData)来添加请求拦截器，但我从未访问回调函数(console.log() 下面的行)，所以我得到了相同的结果:

axios.interceptors.request.use(function (config) {
    console.log(config);
    // Do something before request is sent
}, function (error) {
    // Do something with request error
});

我创建了this live running example模拟我上面的 3 次尝试。

有关此问题的任何反馈或帮助吗？

Answer 1

关注点分离。

• 创建一个用于 axios 实例创建的小函数并将其导出。仅创建一次实例。
• 创建一个用于配置拦截器的函数。
• 将它们移至单独的文件/帮助程序中。
• 调用拦截器。
• 最后在您的组件中，导入充电的 axios 实例并使用它。

另请注意，您在创建 axios 实例时添加表单数据。在请求拦截器中添加表单数据。

像这样:

instance.interceptors.request.use(config => {
    config.data = formData;
    return config;
  });

代码的工作副本位于此处:

https://codesandbox.io/s/axios-interceptor-isssue-bdd4h?file=/src/axiosInstance.js

代码片段:

import axios from "axios";

const baseUrl = "https://jsonplaceholder.typicode.com/";
const formData = new FormData();
formData.append("param1", "value1");
formData.append("param2", "value2");
formData.append("param3", "value3");
const headers = { "Content-Type": "multipart/form-data" };
const method = "post";

export const instance = axios.create({
  baseURL: baseUrl,
  method,
  headers
});

const interceptors = () => {
  instance.interceptors.request.use(config => {
    config.data = formData;
    return config;
  });

  instance.interceptors.response.use(
    response => {
      // do what ever you want with your response
      return response;
    },
    error => {
      //handle error
      console.log("error:", error);
    }
  );
};
interceptors();//call the interceptors function