解析為什么axios會有params和data兩個參數(shù)
不知道大家有沒有過這種感覺，突然一個問題百思不得其解，然后突然有一天就明白了。然后就感覺這個問題原來這么簡單，本來想記錄下來，但是又感覺這么簡單的問題記錄下來沒啥意義。但是回過頭來想一想，這個問題之前其實困擾了你很長時間。感覺還是記錄一下比較好，萬一哪一天突然對這個問題有了新的擴展呢？
先來回顧一下axios的基本使用，怎么發(fā)送一個請求：
發(fā)送get請求
// 發(fā)送的鏈接就是 https://www.baidu.com?a=1
axios.get('https://www.baidu.com', { params: { a: 1 } })
// 或者這樣
axios({
method: "get",
url: 'https://www.baidu.com',
params: { a: 1 }
})
// 如果發(fā)送一個帶請求頭的就是這樣
axios.get('https://www.baidu.com', { params: { a: 1 }, headers: { token: "123" } })
// 或者這樣
axios({
method: "get",
url: 'https://www.baidu.com',
params: { a: 1 },
headers: { token: "111" }
})發(fā)送post請求
axios.post('https://www.baidu.com', { a: 1 })
// 或者這樣
axios({
method: "post",
url: 'https://www.baidu.com',
data: { a: 1 }
})
// 如果發(fā)送一個帶請求頭的就是這樣
axios.post('https://www.baidu.com', { a: 1 }, { headers: { token: "123" } })
// 或者這樣
axios({
method: "post",
url: 'https://www.baidu.com',
data: { a: 1 },
headers: { token: "111" }
})這里我們可以發(fā)現(xiàn)
axios.get可以傳遞兩個參數(shù) url和其他參數(shù)axios.post可以傳遞三個參數(shù) url、請求發(fā)出去的參數(shù)、其他參數(shù)
好像不方便記憶，一會傳2個，一會傳3個的。所以一般情況下，即使是對項目封裝網(wǎng)絡請求，我也會使用axios()去封裝，而不是使用axios.get和axios.post。
那么使用axios()，get請求時如果給請求傳一些參數(shù)，那么可以使用params，例如：
axios({
method: "get",
url: 'https://www.baidu.com',
params: { a: 1 }
})而使用post的時候需要使用data，例如：
axios({
method: "post",
url: 'https://www.baidu.com',
data: { a: 1 }
})好奇掛啊，為什么不能使用同一個參數(shù)呢？其實params和data有各自的使用意義。
params是拼接在url后面的參數(shù)data是請求體里面的參數(shù)
例如發(fā)送post的時候
axios({
method: "post",
url: 'https://www.baidu.com',
data: { a: 1 },
params: { a: 2 }
})上面例子a=1會放在url后面拼接，而a=2會在請求體中。所以params和data其實是各司其職的。
那么再來看一下，如果像使用axios.post，我既想在url后面拼接參數(shù)，又想在請求體里面有參數(shù)，該怎么寫呢？
axios.post('https://www.baidu.com', { a: 1 }, { params: { a: 1 }, headers: { token: "123" } })所以還是感覺直接調(diào)用axios好用
到此這篇關(guān)于為什么axios會有params和data兩個參數(shù)的文章就介紹到這了,更多相關(guān)axios params和data兩個參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了微信小程序之判斷頁面滾動方向的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
JavaScript延遲加載之a(chǎn)sync與defer的應用
這篇文章主要介紹了JavaScript延遲加載之a(chǎn)sync與defer的應用場景與使用區(qū)別的介紹，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-09-09
這篇文章主要介紹了JS嚴格模式原理與用法,結(jié)合實例形式分析了JS嚴格模式基本概念、原理、用法及相關(guān)操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要給大家介紹了關(guān)JS 箭頭函數(shù)的this指向，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
這篇文章主要介紹了使用uni-app開發(fā)微信小程序的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
在子頁面(<iframe></iframe>)創(chuàng)建父級事件！當子頁面(<iframe></iframe>)被銷毀！子頁面(<iframe></iframe>)創(chuàng)建父級事件也會被銷毀！2011-01-01
這篇文章主要介紹了JavaScript中的方法重載實例,本文直接給出重載實例,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS延時器提示框的應用實例代碼解析 的相關(guān)資料,需要的朋友可以參考下2016-04-04
js常用方法及字符串的常用判斷方法都是在工作中經(jīng)常用到的，在本文整理了一些，感興趣的朋友可以參考下2013-10-10
使用GruntJS構(gòu)建Web程序之構(gòu)建篇
前一篇記錄了Grunt的安裝，這篇介紹下怎么使用Gruntjs來搭建一個前端項目，然后使用grunt合并，壓縮JS文件。2014-06-06