使用拦截器时无法用axios发送表单数据答案

【问题标题】：Cannot send form data with axios when using interceptors使用拦截器时无法用axios发送表单数据
【发布时间】：2020-04-14 22:13:31
【问题描述】：

我正在使用 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();

但是请求头中没有发送表单数据：

我的第二次尝试是使用 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 次尝试。

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

【问题讨论】：

标签： reactjs axios

【解决方案1】：

关注点分离。

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

另请注意，您在 creating axios 实例时添加表单数据。在request interceptor 中添加表单数据。

像这样：

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

您的代码的工作副本在这里：

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

代码 sn-p：

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

【讨论】：