在 Axios 中将数据传递给服务

Question

我想在我的标题中设置

_boundry

首先，我发送表单数据：

//component.js

const form = new FormData();

form.append('email', '[email protected]')
form.append('password', '12121212')

dispatch(FetchLogin.action(form))

第二，我准备api调用；

//loginService.js

import api from '@/Services'

export default async form => {
  const response = await api.post('user/login/', form)
  return response.data
}

第三，我调用api；

//Services/index.js

import axios from 'axios'
import { Config } from '@/Config'

const instance =  axios.create({
  baseURL: Config.API_URL,
  headers: {
    'Content-Type': `multipart/form-data; boundary=${form._boundary}`, //Cannot access form here
  }, 
  timeout: 3000,
})

instance.interceptors.response.use(
  response => response,
  ({ message, response: { data, status } }) => {
    return handleError({ message, data, status })
  },
)

export default instance

我想访问

form

中的数据到

axios

instance

以便能够在

form._boundry

中使用

headers

。

如何将

form

数据从

loginService.js

传递到

Services/index.js

？

Answer 1

这个问题似乎经常出现，但我似乎找不到规范的答案，所以这里...

当从浏览器执行 AJAX 请求时（通过

fetch

或

XMLHttpRequest

），运行时知道如何处理某些请求主体格式，并将自动设置适当的

Content-type

header

• 如果请求主体是

  FormData

  实例，则

  Content-type

  将设置为

  multipart/form-data

  并且还将包括来自数据实例的适当的 mime 边界标记。

  所有这些示例都将使用适当的

  mime 边界标记将数据发布为 

  multipart/form-data

  const body = new FormData();
  
  // attach files and other fields
  body.append("file", fileInput.files[0]);
  body.append("foo", "foo");
  body.append("bar", "bar");
  
  // fetch
  fetch(url, { method: "POST", body });
  
  // XMLHttpRequest
  const xhr = new XMLHttpRequest();
  xhr.open("POST", url);
  xhr.send(body);
  
  // Axios
  axios.post(url, body);
  

• 如果请求体是一个

  URLSearchParams

  实例，

  Content-type

  将被设置为

  application/x-www-form-urlencoded

  所有这些示例都会将数据发布为

  application/x-www-form-urlencoded

  const body = new URLSearchParams({ foo: "foo", bar: "bar" });
  // serialises to "foo=foo&bar=bar"
  
  // fetch
  fetch(url, { method: "POST", body });
  
  // XMLHttpRequest
  const xhr = new XMLHttpRequest();
  xhr.open("POST", url);
  xhr.send(body);
  
  // Axios
  axios.post(url, body);
  

如果您打算以特定格式发送字符串数据，例如

content-type

、

text/xml

等，您只需要手动设置

application/json

，因为运行时无法从数据中推断类型。

const body = JSON.stringify({ foo: "foo", bar: "bar" });

// fetch
fetch(url, {
  method: "POST",
  headers: {
    "content-type": "application/json",
  },
  body
});

// XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("content-type", "application/json");
xhr.send(body);

---

关于 Axios

Axios 会自动将传递给

data

参数的 JavaScript 数据结构字符串化，并将

Content-type

标头设置为

application/json

因此在处理 JSON API 时只需要最少的配置

// no extra headers, no JSON.stringify()
axios.post(url, { foo: "foo", bar: "bar" })

在引擎盖下，Axios 使用

XMLHttpRequest

所以

FormData

和

URLSearchParams

的规范也适用。

Axios v0.27.1 已损坏

此特定版本的 Axios 无法使用

FormData

发出正确的请求。不要使用它！

Axios v1.0.0+ 已损坏

这接近于我自己的观点，但是 v1.0.0 之后的每个 Axios 版本都以某种方式从根本上被破坏了。我根本不能推荐任何人出于任何原因使用它。

更好的选择是：

• Fetch API（在 Node v18+ 中也可用）
• get 用于 Node.js
• ky 用于浏览器

NodeJS

从后端使用 Axios 时，它不会从

Content-type

实例推断出

FormData

标头。您可以使用请求拦截器解决此问题。

axios.interceptors.request.use(config => {
  if (config.data instanceof FormData) {
    Object.assign(config.headers, config.data.getHeaders());
  }
  return config;
}, null, { synchronous: true });

或者在发出请求时简单地合并到标题中

axios.post(url, body, {
  headers: {
    "X-Any-Other-Headers": "value",
    ...body.getHeaders(),
  },
});

见https://github.com/axios/axios#form-data

---

关于 jQuery $.ajax()

jQuery 的

$.ajax()

方法（以及像

$.post()

这样的便捷方法）默认将请求主体有效负载发送为

application/x-www-form-urlencoded

。 JavaScript 数据结构将使用 jQuery.param() 自动序列化，除非被告知不要这样做。如果想让浏览器根据body格式自动设置

Content-type

header，还需要在options中配置

const body = new FormData()
body.append("foo", "foo")
body.append("bar", "bar")

$.ajax({
  url,
  method: "POST",
  data: body,
  contentType: false, // let the browser figure it out
  processData: false  // don't attempt to serialise data
})