使用axios发送post请求,将JSON数据改为form类型的示例

当我们使用axios发送POST请求时，常见的请求头的Content-Type类型有两种，一种是JSON类型，一种是form数据类型。

当我们使用axios发送POST请求时，常见的请求头的Content-Type类型有两种，一种是JSON类型，一种是form数据类型。

对于form数据类型，我们需要将JSON格式数据转成urlencoded形式，才能够被服务器正确解析。下面是详细攻略:

1. 设置Content-Type为application/x-www-form-urlencoded

使用axios发送post请求时，需要设置请求头Content-Type为application/x-www-form-urlencoded：

import axios from 'axios'

const postData = {
  username: 'user',
  password: 'password'
}

axios({
  method: 'post',
  url: '/api/login',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  data: postData
})
.then(response => {
  console.log(response)
})
.catch(error => {
  console.log(error)
})

2. 将JSON数据转换为Form Data

我们需要将JSON数据转换为Form Data格式，这就需要借助一个名为qs的第三方库。先使用npm或yarn安装qs：

npm install qs --save

然后在使用axios之前，导入qs模块，将JSON格式数据转换为Form Data格式，然后再通过axios发送请求：

import axios from 'axios'
import qs from 'qs'

const postData = {
  username: 'user',
  password: 'password'
}

axios({
  method: 'post',
  url: '/api/login',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(postData)
})
.then(response => {
  console.log(response)
})
.catch(error => {
  console.log(error)
})

在以上过程中，我们利用qs.stringify方法，将postData对象转换成了'name1=value1&name2=value2'形式的字符串，同时设置了Content-Type为application/x-www-form-urlencoded，发送POST请求，并在请求体中携带了postData。