GET请求
GET请求没有请求体，参数包含在URL中。
查询字符串
查询字符串（Query String）：在URL中使用?符号将参数附加到URL末尾，多个参数之间使用&符号分隔。
GET /api/users?id=890418&name=Jessica HTTP/1.1
RESTful风格
RESTful风格的URL参数：将参数直接作为URL的一部分，一般用于表示资源的唯一标识符或路径参数
GET /api/users/890418 HTTP/1.1
数组
参数传入数组：使用相同的参数名，但允许多个值的情况
方式1：
GET http://localhost:8080/api/users?roleIds=1&roleIds=2 HTTP/1.1
方式2：
GET http://localhost:8080/users?roleIds=1,2 HTTP/1.1
方式3：
GET http://localhost:8080/users?roleIds[]=1&roleIds[]=2 HTTP/1.1
方式4：
GET http://localhost:8080/api/users?roleIds[0]=1&roleIds[1]=2 HTTP/1.1
后端get接口设计接受数组型查询参数时，只接受重复的query格式，如 arr=[1,2,3]，那么在query里的参数格式需要是a=1&a=2&a=3，前端get请求直接传数组会默认处理为a[]=1&a[]=2&a[]=3，后端无法识别。
可以借助qs库，对axios请求封装paramsSerializer(params处理函数)，是一个负责 params 序列化的函数。
import qs from 'qs'
qs.stringify({ a: ["b", "c", "d"] }); // a[0]=b&a[1]=c&a[2]=d
qs.stringify({ a: ["b", "c", "d"] }, { indices: false }); // a=b&a=c&a=d
// qs 还可以通过arrayFormat 选项进行格式化输出
qs.stringify({ a: ["b", "c"] }, { arrayFormat: "indices" }) // a[0]=b&a[1]=c
qs.stringify({ a: ["b", "c"] }, { arrayFormat: "brackets" }) // a[]=b&a[]=c
qs.stringify({ a: ["b", "c"] }, { arrayFormat: "repeat" }) // a=b&a=c
qs.stringify({ a: ["b", "c"] }, { arrayFormat: "comma" }) // a=b,c
import axios from 'axios'
axios.get({
url: '/user',
method: 'get',
baseURL: 'https://localhost:8080/api/',
// `paramsSerializer` 是一个负责 `params` 序列化的函数
paramsSerializer: paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat' })
})
// 请求拦截器，在请求发送前格式化
axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
if (config.method === 'get') {
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' })
}
}
}
需要注意的是，如果请求参数中带有中括号[]，[]在url中属于功能性字符，前端需要使用decodeURIComponent()函数转义，否则会出现400 Bad Request错误。
qs.stringify({ a: [‘b’, ‘c’, ‘d’] }); // a%5B0%5D=b&a%5B1%5D=c&a%5B2%5D=d
decodeURIComponent(qs.stringify({ a: ["b", "c", "d"] }) // a[0]=b&a[1]=c&a[2]=d
对象
将参数封装在一个对象中，然后将该对象作为查询字符串的值传递。
直接传一个对象作为参数是不对的，后端无法识别出来。需要把对象序列化成字符串，然后通过decodeURIComponent()函数转义后加到url中
GET http://localhost:8080/users?param={"accID":"milo","field":"nick_name,email"} HTTP/1.1
const queryparam = {accID:"milo",field:"nick_name,email"}
// 利用JSON.stringify转化为JSON格式，再利用decodeURIComponent()方法转义。
decodeURIComponent(JSON.stringify(queryparam))
POST
JSON 数据格式
在请求的数据体中使用 JSON 格式来传递参数。application/json作为Content-Type的请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。
POST http://localhost:8080/api/users HTTP/1.1
Content-Type: application/json
{
"name": "Jessica",
"bir": 890418
}
表单数据格式
在请求的数据体中使用表单数据格式来传递参数。这是最常见的 POST 提交数据的方式，浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以application/x-www-form-urlencoded方式提交数据。application/x-www-form-urlencoded作为Content-Type的请求头。
POST http://localhost:8080/api/users HTTP/1.1
Content-Type: application/x-www-form-urlencoded
name=hyomin&bir=890530
文件上传格式
在请求的数据体中使用多部分表单数据格式来传递参数，适用于文件上传等场景。使用表单上传文件时，必须让 form 的 enctyped 等于multipart/form-data这个值。application/multipart/form-data作为Content-Type的请求头。
首先会生成一个boundary用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后Content-Type里指明了数据是以mutipart/form-data 来编码，本次请求的 boundary的内容在消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以–boundary 开始，紧接着内容描述信息，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 –boundary– 标示结束。
以下包含了一个文件字段 file：file的内容是图片的二进制数据
POST http://localhost:8080/api/upload HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryABC123
------WebKitFormBoundaryABC123
Content-Disposition: form-data; name="file"; filename="example.jpg"
Content-Type: image/jpeg
[file content(文件的二进制流)]
------WebKitFormBoundaryABC123--
以下包含一个text字段和file字段，text字段的内容是字符串title，file字段的内容是图片的二进制流数据
POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
原文链接：https://juejin.cn/post/7358649535381569576 作者：新星_
