请求提交数据方式

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字段的内容是字符串titlefile字段的内容是图片的二进制流数据

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 作者:新星_

(0)
上一篇 2024年4月17日 上午11:14
下一篇 2024年4月17日 下午4:05

相关推荐

发表回复

登录后才能评论