javascript - 将数据传递给 Axios 中的服务

Question

我想在标题中设置 _boundry。

首先，我发送表单数据:

//component.js

const form = new FormData();

form.append('email', 'eray@serviceUser.com')
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

我想访问 axios instance 中的 form 数据，以便能够在 form._boundry 中使用 header 。

如何将 form 数据从 loginService.js 传递到 Services/index.js？

Answer 1

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

当从浏览器执行 AJAX 请求时(通过 fetch 或 XMLHttpRequest)，运行时知道对某些请求主体格式做什么，并将自动设置适当的 内容类型 标题

• 如果请求体是一个FormData实例，Content-type将被设置为multipart/form-data并且还将包括来自数据实例的适当的 MIME 边界标记。

  所有这些示例都会将数据发布为 multipart/form-data 并带有适当的 mime boundary tokens

  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 header 设置为 application/json，这样您只需处理 JSON API 时需要最少的配置

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

在底层，Axios 使用 XMLHttpRequest，因此 FormData 和 URLSearchParams 的规范也适用。

Axios 0.27.1 已损坏

此特定版本的 Axios 无法使用 FormData 发出正确的请求。不要使用它!

节点

当从后端使用 Axios 时，它不会从 FormData 实例中推断出 Content-type header 。您可以使用请求拦截器解决此问题。

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

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

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 - 形式 urlencoded。 JavaScript 数据结构将使用 jQuery.param() 自动序列化。除非告诉不要。如果想让浏览器根据body格式自动设置Content-type头部，还需要在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
})