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();

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

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

我的第三次尝试是通过在发送请求之前修改配置（add 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
});

我创建了这个实时运行示例来模拟我上面的 3 次尝试。

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

标签： reactjsaxios

Answer 1

关注点分离。

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

另请注意，您在creatingaxios 实例时添加表单数据。在您的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