axios 發(fā)送請求時 params 和 data 的區(qū)別

• params 中的參數(shù)是通過地址欄傳參，一般用于get請求
• data 是添加到請求體（body）中的， 一般用于post請求
• get請求只能傳query參數(shù)，query參數(shù)都是拼在請求地址上的
• post可以傳body和query兩種形式的參數(shù)

一般情況下post請求方式的Parameter Type是body，在一些極少情況下，post請求的參數(shù)體可能會存在body及query共存的情況，所以這其實涉及到post請求的三大部分：header、body、query（簡單來說：header：請求頭、body：多參數(shù)請求體、query：單參數(shù)請求體）。

后端的接口在不注解的情況下默認(rèn)是query，所以get請求用query，因為一般傳遞單個參數(shù)，而post請求多用body，因為一般傳遞多個參數(shù)。

請求參數(shù)方式類型

1. Query String Parameters

參數(shù)是直接拼接在URL上的。即?后的字符串則為其請求參數(shù)，并以&作為分隔符。

1.1 get請求

// 分頁列表
export const getProjectList = (data: object) => {
	return request({
		url: `/api/picture/point/pageList`,
		method: 'get',
		params: data
	})		
} 

1.2 post請求

// 刪除
export const deletePictureRecord = (data: object) => {
	return request({
		url: `/api/pictureRecord/delete`,
		method: 'post',
		params: data
	})		
} 

2. Form Data

Form Data傳參格式，顧名思義就是常見的 Form表單。

// 新增
export const addPictureRecord = (data: object) => {
	return request({
		url: `/api/pictureRecord/add`,
		method: 'post',
		data: data
	})		
} 

qs 是一個npm倉庫所管理的包，可通過 npm install qs 命令進(jìn)行安裝；在使用時在文件中引入：import qs from 'qs' 然后直接使用。

• qs.stringify() 將對象序列化成URL的形式，以&進(jìn)行拼接。
• qs.parse() 將URL解析成對象的形式。

此處注意Content-Type，當(dāng)發(fā)起一次POST請求時，若未指定Content-Type，則默認(rèn)Content-Type為 application/x-www-form-urlencoded。即參數(shù)會以Form Data的形式進(jìn)行傳遞，不會顯式出現(xiàn)在請求url中。

import qs from 'qs'

// 刪除
export const deleteTaxDept = (data: object) => {
	return request({
		url: `/api/taxbill/taxDepartment/deleteByIds`,
		method: 'post',
		data: qs.stringify(data)
	})		
} 

3. Request Payload

Request Payload是Vue默認(rèn)的請求參數(shù)方式，也就是一個json串，后臺在接收的時候可以使用String來接受這個json然后在轉(zhuǎn)成Map。

這種傳參方式不會顯式出現(xiàn)在URL中。這里需要注意的是Content-Type和Form Data的不一樣。

// 新增
export const addProject = (data: object) => {
	return request({
		url: `/api/pointsProject/add`,
		method: 'post',
		data: data
	})		
} 

4. 其他

// 啟用/禁用
export const statusChange = (data: any) => {
	return request({
		url: `integral/api/pointsProject/${data.projectId}/${data.enable}`,
		method: 'put'
	})		
} 

參考文章：axios中post的body與query傳參區(qū)別及使用總結(jié)文章來源地址http://www.zghlxwxcb.cn/news/detail-621558.html

到了這里，關(guān)于axios中g(shù)et、post請求傳參區(qū)別及使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！