http-axios请求分析 – 夜猫子🐱

原文件(表格)下载：

请求方法 | 参数类型分析：

请求方法	URL	请求参数类型	请求体	请求体内容	content-type	request	$_GET	$_REQUEST	$_POST	$_FILES	备注
get	http://localhost:8085/devApi/test			0	0	0	0	0
post	http://localhost:8086/devApi/test			0	0	0	0	0
delete	http://localhost:8087/devApi/test			0	0	0	0	0
put	http://localhost:8088/devApi/test			0	0	0	0	0
patch	http://localhost:8089/devApi/test			0	0	0	0	0
head	http://localhost:8090/devApi/test
options	http://localhost:8091/devApi/test
connect			请求失败
trace			请求失败

get	http://localhost:8080/devApi/test?a=1&b=2	params	Query String Parameters	a=1&b=2&abc=3		1	1	1	0	0	params请求
post	http://localhost:8080/devApi/test?a=1&b=2	params	Query String Parameters	a=1&b=2&abc=3		1	1	1	0	0
delete	http://localhost:8080/devApi/test?a=1&b=2	params	Query String Parameters	a=1&b=2&abc=3		1	1	1	0	0
put	http://localhost:8080/devApi/test?a=1&b=2	params	Query String Parameters	a=1&b=2&abc=3		1	1	1	0	0
patch	http://localhost:8080/devApi/test?a=1&b=2	params	Query String Parameters	a=1&b=2&abc=3		1	1	1	0	0
head	http://localhost:8080/devApi/test?a=1&b=2	params	Query String Parameters	a=1&b=2&abc=3
options	http://localhost:8080/devApi/test?a=1&b=2	params	Query String Parameters	a=1&b=2&abc=3

get	http://localhost:8080/devApi/test	data			application/json;charset=utf-8	0	0	0	0	0	get不能带上data，data默认以json方式请求
post	http://localhost:8080/devApi/test	data	Request Payload	{“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8	1	0	0	0	0
delete	http://localhost:8081/devApi/test	data	Request Payload	{“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8	1	0	0	0	0
put	http://localhost:8082/devApi/test	data	Request Payload	{“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8	1	0	0	0	0
patch	http://localhost:8083/devApi/test	data	Request Payload	{“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8	1	0	0	0	0
head	http://localhost:8084/devApi/test	data			application/json;charset=utf-8						head与get相似且不返回内容
options	http://localhost:8085/devApi/test	data	Request Payload	{“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8						options与post相似且不返回内容

get	http://localhost:8080/devApi/test?a=1&b=2	params	Query String Parameters	a=1&b=2&abc=3	application/json;charset=utf-8	1	1	1	0	0
post	http://localhost:8080/devApi/test?a=1&b=2	params、data	Query String Parameters、Request Payload	a=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8	{a: “1”, b: “2”, abc: 4, aa: 11, bb: 22}	{a: “1”, b: “2”, abc: “3”}	{a: “1”, b: “2”, abc: “3”}	0	0	data优先级比params高
delete	http://localhost:8080/devApi/test?a=1&b=2	params、data	Query String Parameters、Request Payload	a=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8	{a: “1”, b: “2”, abc: 4, aa: 11, bb: 22}	{a: “1”, b: “2”, abc: “3”}	{a: “1”, b: “2”, abc: “3”}	0	0
put	http://localhost:8080/devApi/test?a=1&b=2	params、data	Query String Parameters、Request Payload	a=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8	{a: “1”, b: “2”, abc: 4, aa: 11, bb: 22}	{a: “1”, b: “2”, abc: “3”}	{a: “1”, b: “2”, abc: “3”}	0	0
patch	http://localhost:8080/devApi/test?a=1&b=2	params、data	Query String Parameters、Request Payload	a=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8	{a: “1”, b: “2”, abc: 4, aa: 11, bb: 22}	{a: “1”, b: “2”, abc: “3”}	{a: “1”, b: “2”, abc: “3”}	0	0
head	http://localhost:8080/devApi/test?a=1&b=2	params	Query String Parameters	a=1&b=2&abc=3	application/json;charset=utf-8
options	http://localhost:8080/devApi/test?a=1&b=2	params、data	Query String Parameters、Request Payload	a=1&b=2&abc=3 和 {“aa”:11,”bb”:22,”ab”:4}	application/json;charset=utf-8



		params为URL上的参数；data为请求体内的参数

请求体 | 内容格式分析：

请求方式

请求参数类型

请求体

请求内容

请求内容解析

参数转化(URL: paramsSerializer，Body: transformRequest)

content-type

request

$_GET

$_REQUEST

$_POST

$_FILES

备注

get

params

Query String Parameters

a=1&arr%5B0%5D=1&arr%5B1%5D=a&obj%5Bq%5D=q&obj%5Bw%5D=w&mix1%5B0%5D%5Ba%5D=1&mix1%5B1%5D%5B0%5D=2&mix1%5B2%5D=3&mix2%5Ba%5D=1&mix2%5Bb%5D%5B0%5D=1&mix2%5Bc%5D%5Ba%5D=1

a: 1
arr[0]: 1
arr[1]: a
obj[q]: q
obj[w]: w
mix1[0][a]: 1
mix1[1][0]: 2
mix1[2]: 3
mix2[a]: 1
mix2[b][0]: 1
mix2[c][a]: 1

data => qs.stringify(data)

正常解析Arr/Obj，num为str

get

params

Query String Parameters

a=1&arr[]=1&arr[]=a&obj=%7B%22q%22:%22q%22,%22w%22:%22w%22%7D&mix1[]=%7B%22a%22:1%7D&mix1[]=[2]&mix1[]=3&mix2=%7B%22a%22:1,%22b%22:[1],%22c%22:%7B%22a%22:1%7D%7D

a: 1
arr[]: 1
arr[]: a
obj: {“q”:”q”,”w”:”w”}
mix1[]: {“a”:1}
mix1[]: [2]
mix1[]: 3
mix2: {“a”:1,”b”:[1],”c”:{“a”:1}}

解析第一层析Arr/Obj后面为JSON

get

params

Query String Parameters

{%22a%22:1,%22arr%22:[1,%22a%22],%22obj%22:{%22q%22:%22q%22,%22w%22:%22w%22},%22mix1%22:[{%22a%22:1},[2],3],%22mix2%22:{%22a%22:1,%22b%22:[1],%22c%22:{%22a%22:1}}}

{“a”:1,”arr”:[1,”a”],”obj”:{“q”:”q”,”w”:”w”},”mix1″:[{“a”:1},[2],3],”mix2″:{“a”:1,”b”:[1],”c”:{“a”:1}}}:

data => JSON.stringify(data)

解析异常

post

data

Request Payload

{“a2″:1,”arr2″:[1,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}

正常解析的Arr/Obj

默认 application/json;charset=utf-8

正常解析Arr/Obj

post

data

Form Data

a2=1&arr2%5B0%5D=1&arr2%5B1%5D=a&obj2%5Bq%5D=q&obj2%5Bw%5D=w&mix12%5B0%5D%5Ba%5D=1&mix12%5B1%5D%5B0%5D=2&mix12%5B2%5D=3&mix22%5Ba%5D=1&mix22%5Bb%5D%5B0%5D=1&mix22%5Bc%5D%5Ba%5D=1

a2: 1
arr2[0]: 1
arr2[1]: a
obj2[q]: q
obj2[w]: w
mix12[0][a]: 1
mix12[1][0]: 2
mix12[2]: 3
mix22[a]: 1
mix22[b][0]: 1
mix22[c][a]: 1

data => qs.stringify(data)

默认 application/x-www-form-urlencoded

正常解析Arr/Obj，num为str

post

data

Form Data

{“a2″:1,”arr2″:[1,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}

{“a2″:1,”arr2″:[1,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}:

data => JSON.stringify(data)

默认 application/x-www-form-urlencoded

解析异常

post

data

Request Payload

{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}

正常解析的Arr/Obj

data => JSON.stringify(data)

application/json;charset=utf-8

正常解析Arr/Obj

post

data

Request Payload

a2=1&arr2%5B0%5D=1&arr2%5B1%5D=2&arr2%5B2%5D=a&obj2%5Bq%5D=q&obj2%5Bw%5D=w&mix12%5B0%5D%5Ba%5D=1&mix12%5B1%5D%5B0%5D=2&mix12%5B2%5D=3&mix22%5Ba%5D=1&mix22%5Bb%5D%5B0%5D=1&mix22%5Bc%5D%5Ba%5D=1

无法解析

data => qs.stringify(data)

application/json;charset=utf-8

post

data

Form Data

{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}

{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}:

application/x-www-form-urlencoded

解析异常

post

data

Request Payload

{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}

正常解析的Arr/Obj

multipart/form-data

post

data

Request Payload

a2=1&arr2%5B0%5D=1&arr2%5B1%5D=2&arr2%5B2%5D=a&obj2%5Bq%5D=q&obj2%5Bw%5D=w&mix12%5B0%5D%5Ba%5D=1&mix12%5B1%5D%5B0%5D=2&mix12%5B2%5D=3&mix22%5Ba%5D=1&mix22%5Bb%5D%5B0%5D=1&mix22%5Bc%5D%5Ba%5D=1

无法解析

data => qs.stringify(data)

multipart/form-data

post

data

Request Payload

{“a2″:1,”arr2″:[1,”2″,”a”],”obj2″:{“q”:”q”,”w”:”w”},”mix12″:[{“a”:1},[2],3],”mix22″:{“a”:1,”b”:[1],”c”:{“a”:1}}}

正常解析的Arr/Obj

data => JSON.stringify(data)

multipart/form-data

post

form

Form Data

——WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”file”; filename=”QQ截图20210126215039.png”
Content-Type: image/png

——WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”text”

a
—-C21–WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”num”

1
——WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”obj”

[object Object]
——WebKitFormBoundaryXHfVashxAsB3Ur7O
Content-Disposition: form-data; name=”arr”

1,a,1,2
——WebKitFormBoundaryXHfVashxAsB3Ur7O–E19

file: (binary)
text: a
num: 1
obj: [object Object]
arr: 1,a,1,2

不转化只能默认 multipart/form-data; boundary=—-WebKitFormBoundaryXHfVashxAsB3Ur7O

展开解析数组，不解析对象，num为str，有文件不存在‘file’的键，无文件则为file:’null’

展开解析数组，不解析对象，有文件不存在‘file’的键，无文件则为file:’null’

文件列表对象

post

form

Form Data

{}

{}:

data => qs.stringify(data)

默认 application/x-www-form-urlencoded

解析异常

post

form

Form Data

{}

{}:

data => JSON.stringify(data)

默认 application/x-www-form-urlencoded

解析异常

post

form

data => qs.stringify(data)

application/json

post

form

Request Payload

{}

data => JSON.stringify(data)

application/json

post

formObj

Form Data

——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”a2″

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”arr2[0]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”arr2[1]”

2
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”arr2[2]”

a
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”obj2[q]”

q
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”obj2[w]”

w
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix12[0][a]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix12[1][0]”

2
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix12[2]”

3
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix22[a]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix22[b][0]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”mix22[c][a]”

1
——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”files[]”; filename=”QQ截图20210127214015.png”
Content-Type: image/png

——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”files[]”; filename=”QQ截图20210127214015.png”
Content-Type: image/png

——WebKitFormBoundaryZ92KqK0WZgqO9PzU
Content-Disposition: form-data; name=”file”; filename=”QQ截图20210127214015.png”
Content-Type: image/png

——WebKitFormBoundaryZ92KqK0WZgqO9PzU–

a2: 1
arr2[0]: 1
arr2[1]: 2
arr2[2]: a
obj2[q]: q
obj2[w]: w
mix12[0][a]: 1
mix12[1][0]: 2
mix12[2]: 3
mix22[a]: 1
mix22[b][0]: 1
mix22[c][a]: 1
files[]: (binary)
files[]: (binary)
file: (binary)

data => {
            let formData = new FormData;
            qs.stringify(data,{encode:false,skipNulls:true}).split(‘&’).forEach(item=>{
              let arr = item.split(‘=’)
              formData.append(arr[0],arr[1])
            })
            //遍历data对象
            for (let k in data){
              //处理单文件
              if (data[k] instanceof File){
                formData.append(k,data[k])
              }else if (Array.isArray(data[k]) && data[k].length>0 &&(data[k][0] instanceof File)){
                //处理多文件
                data[k].forEach(item=>{
                  formData.append(k+'[]’,item)
                })
              }
            }
            return formData
          }

默认 multipart/form-data; boundary=—-WebKitFormBoundaryZ92KqK0WZgqO9PzU

正常解析Arr/Obj，num为str

文件列表对象

发表评论 取消回复

发表评论取消回复