使用拦截器时无法使用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();

但表单数据未在请求标头中发送：

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

还要注意，您正在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

代码段：

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