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

今天小編給大家分享一下axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

一、前言：

前端發(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ù)
  });
}

以上就是“axios請(qǐng)求中以params或body形式傳遞參數(shù)的區(qū)別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。