解析為什么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" } })所以還是感覺直接調用axios好用
到此這篇關于為什么axios會有params和data兩個參數(shù)的文章就介紹到這了,更多相關axios params和data兩個參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)星級評分，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
文件上傳,iframe跨域數(shù)據(jù)提交的實現(xiàn)
下面小編就為大家?guī)硪黄募蟼?iframe跨域數(shù)據(jù)提交的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
layui技巧：下拉框未展示問題;下拉框的onchange事件處理;關閉彈出層,重新加載父頁面;父頁面如何傳遞參數(shù)給彈出層的iframe頁面;表單元素處于禁用狀態(tài);表單提交如何獲取表單元素值集合;數(shù)據(jù)表格固定列;帶搜索的下拉框;表單提交阻止頁面跳轉;父頁面和子窗口傳遞值2024-07-07
javascript 動態(tài)改變onclick事件觸發(fā)函數(shù)代碼
javascript 動態(tài)改變onclick事件觸發(fā)函數(shù)代碼，需要的朋友可以參考下。2011-08-08
three.js是一款webGL框架，由于其易用性被廣泛應用。接下來通過本文給大家分享three.js加載obj模型的實例代碼，需要的朋友參考下吧2017-11-11
方法重寫，重寫要禁用的方法，并讓它什么也不做，結果證明真的可行，但并不知道是不是一個科學的方法，我拿出來與大家共同討論一下2013-07-07
這篇文章主要介紹了提升PHP安全：8個必須修改的PHP默認配置,PHP.ini中的默認配置是面向開發(fā)者的,如果是生產(chǎn)環(huán)境是必須要修改一些配置的,需要的朋友可以參考下2014-11-11
這篇文章主要介紹了微信運維交互機器人的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
js實現(xiàn)適用于素材網(wǎng)站的黑色多級菜單導航條效果
這篇文章主要介紹了js實現(xiàn)適用于素材網(wǎng)站的黑色多級菜單導航條效果,涉及javascript鼠標事件及頁面元素樣式的動態(tài)切換技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08