Axios中POST请求JSON和application/x-www-form-urlencoded详解

什么是POST请求？

POST请求是HTTP协议中的一种请求方式，在请求体中携带需要传输的数据。可能被用于编辑、更新、上传等操作。POST请求方式相对于GET请求方式来说，更加安全和灵活，所以在实际开发中被广泛使用。

axios中POST请求的两种方式

1. JSON方式

JSON 方式发送 POST 请求时，请求体中数据采用 JSON 格式传输。一般不需要添加 Content-Type 请求头，因为 axios 默认会使用此种方式。

代码示例如下：

axios.post('/api', {foo: 'bar'})
    .then(response => {
        console.log(response.data)
    })
    .catch(error => {
        console.log(error)
    })

2. application/x-www-form-urlencoded 方式

application/x-www-form-urlencoded 方式发送 POST 请求时，请求体中数据采用 key-value 的形式传输。为了支持此种方式，需添加 Content-Type 请求头，值为 application/x-www-form-urlencoded。

代码示例如下：

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

示例说明

示例一

场景：通过 POST 请求方式提交表单数据。

假设：有一个注册页面，用户需要填写以下信息：用户名、密码、性别、邮箱。

前端代码示例如下：

<form action="/register" method="post">
    <label>用户名：<input type="text" name="username"></label><br>
    <label>密码：<input type="password" name="password"></label><br>
    <label>性别：<input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女</label><br>
    <label>邮箱：<input type="text" name="email"></label><br>
    <input type="submit" value="注册">
</form>

后台代码示例如下：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))

app.post('/register', (req, res) => {
    console.log(req.body)
    // do something ...
    res.send('OK')
})

app.listen(3000, () => {
    console.log('Server is running at port 3000...')
})

前端采用默认JSON方式发送POST请求，不需要添加 Content-Type 请求头。

代码示例如下：

axios.post('/register', formData)
    .then(response => {
        console.log(response.data)
    })
    .catch(console.error)

示例二

场景：通过 POST 请求方式上传图片。

假设：有一个上传页面，用户需要选择一张图片进行上传。

前端代码示例如下：

<form enctype="multipart/form-data" action="/upload" method="post">
    <label>选择图片:<input type="file" name="image"></label><br>
    <input type="submit" value="上传">
</form>

后台代码示例如下：

const express = require('express')
const multer = require('multer')
const upload = multer({dest:'/tmp/'})

const app = express()

app.post('/upload', upload.single('image'), (req, res, next) => {
    console.log(req.file)
    res.send('OK')
})

app.listen(3000, () => {
    console.log('Server is running at port 3000...')
})

前端采用 application/x-www-form-urlencoded 方式发送 POST 请求，需要添加 Content-Type 请求头。

代码示例如下：

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

以上是使用axios进行POST请求时需要注意的两种方式及使用场景的完整攻略。