欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年04月07日 10:27:29   作者:學(xué)學(xué)學(xué)無(wú)止境  
最近在做自己項(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兩種形;我在開(kāi)發(fā)的時(shí)候通常使用的是Axios第三方庫(kù)進(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ì)象,通過(guò)“{}”或者“new Object“創(chuàng)建)會(huì)被以&的方式憑借到請(qǐng)求地址的后面(get請(qǐng)求也是一樣的)

params參數(shù)如下:

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

  • 解決Form Data里面把我們傳進(jìn)去的整體當(dāng)成了一個(gè)key值,沒(méi)有value的方法:導(dǎo)入qs庫(kù)(qs庫(kù)以及包含在axios中,不需要重新安裝),data里面的參數(shù)使用qs.stringify方法來(lái)轉(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中

三、代碼舉例說(shuō)明

get請(qǐng)求

axios({
    method: 'GET',
    url: 'xxxxx',
    params: param,
  })
 
/or  get請(qǐng)求沒(méi)有請(qǐng)求體參數(shù)一說(shuō)
 
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)求沒(méi)有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庫(kù),所以發(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論