快捷導(dǎo)航

axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別淺析

更新時(shí)間：2023年04月07日 10:27:29 作者：學(xué)學(xué)學(xué)無止境

最近在做自己項(xiàng)目中,做一個(gè)非常簡(jiǎn)單的新增用戶場(chǎng)景,但是使用原生axios發(fā)送post請(qǐng)求的時(shí)候,還是踩了不少坑的,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下

一、前言：

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

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

二、Axios post

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

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

params參數(shù)如下：

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

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

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

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

三、代碼舉例說明

get請(qǐng)求

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

post請(qǐng)求

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

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

您可能感興趣的文章: