一、前言：

前端發(fā)送請求最常?的是get請求還有post請求，get請求只能傳query參數(shù)，query參數(shù)都是拼在請求地址上的，post可以傳body和query兩種形；我在開發(fā)的時候通常使用的是Axios第三方庫進(jìn)行網(wǎng)絡(luò)請求，所以這里主要是將Axios請求時query與body傳遞參數(shù)的區(qū)別

• data----->body參數(shù)（也就是請求體）
• params----->query參數(shù)（都是拼接在請求地址上）

二、Axios post

當(dāng)content-type為application/x-www-form-urlencoded時

1. axios 中post請求Content-Type默認(rèn)為application/json，我們傳遞參數(shù)的時候，query里面的參數(shù)（簡稱對象，通過“{}”或者“new Object“創(chuàng)建）會被以&的方式憑借到請求地址的后面（get請求也是一樣的）

params參數(shù)如下：

 2.data里面的參數(shù)（簡單的對象，通過“{}”或者“new Object”創(chuàng)建的），會以Form Data的形式存在，但是Form Data里面把我們傳進(jìn)去的整體當(dāng)成了一個key值，沒有value

• 解決Form Data里面把我們傳進(jìn)去的整體當(dāng)成了一個key值，沒有value的方法：導(dǎo)入qs庫（qs庫以及包含在axios中，不需要重新安裝），data里面的參數(shù)使用qs.stringify方法來轉(zhuǎn)換，轉(zhuǎn)換之后后端才能正常的獲取

當(dāng)content-type為application/json時：

post請求當(dāng)Content-Type設(shè)置為application/json;時,query（簡單對象）里面的參數(shù)仍然會被拼接到請求連接后面，但是data（簡單對象）里面的參數(shù)放到Request Payload中

三、代碼舉例說明

get請求

axios({
    method: 'GET',
    url: 'xxxxx',
    params: param,
  })
 
/or  get請求沒有請求體參數(shù)一說
 
axios({
    method: 'GET',
    url: '/xxx?message=' + msg,
  })

post請求

1.body參數(shù)

/* 編輯項(xiàng)?列表 */
export function editProjectList(params) {
  return request({
    url: 'xxxxx....',
    method: 'post',
    data: params// data就是body參數(shù)
  });
}

2.params參數(shù)

/* 增加客戶列表 */
export function addClientList(params) {
  return request({
    url: '....xxxx',
    method: 'post',
    params: params// params就是query參數(shù)
  });
}
 
export function addClientList(params) {
  return request({
    url: '....xxxx',
    method: 'post',
    params: {params}// params就是query參數(shù)
  });
}
 
export function addClientList(params) {
  return request({
    url: '....xxxx',
    method: 'post',
    params: {
        info:'heihei'
    }// params就是query參數(shù)
  });
}
 

四、總結(jié)

• 使用post請求且content-type為application/x-www-form-urlencoded時，通常需要借助qs進(jìn)行數(shù)據(jù)轉(zhuǎn)換，轉(zhuǎn)換后的數(shù)據(jù)發(fā)送給后端，后端才能正確的處理
• params形式傳遞數(shù)據(jù)不管是get還是post請求，參數(shù)最后都是以拼接url的形式出現(xiàn)
• get請求沒有body的傳參方式
• 在跟后端同時對接接口的時候，如果你的請求參數(shù)params與body分不清，通常會出現(xiàn)405的錯誤狀態(tài)碼如：{"code":405,"success":false,"data":{},"msg":"Request method 'GET' not supported"}
• 由于經(jīng)常用的是axios庫，所以發(fā)請求的時候要注意params和data的區(qū)別

到此這篇關(guān)于axios請求中以params或body形式傳遞參數(shù)的區(qū)別的文章就介紹到這了,更多相關(guān)axios請求傳遞參數(shù)的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論