快捷導(dǎo)航

解析為什么axios會有params和data兩個(gè)參數(shù)

更新時(shí)間：2023年10月27日 10:32:21 作者：程序員超超

本文給大家分享為什么axios會有params和data兩個(gè)參數(shù),先來回顧一下axios的基本使用,怎么發(fā)送一個(gè)請求,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

不知道大家有沒有過這種感覺，突然一個(gè)問題百思不得其解，然后突然有一天就明白了。然后就感覺這個(gè)問題原來這么簡單，本來想記錄下來，但是又感覺這么簡單的問題記錄下來沒啥意義。但是回過頭來想一想，這個(gè)問題之前其實(shí)困擾了你很長時(shí)間。感覺還是記錄一下比較好，萬一哪一天突然對這個(gè)問題有了新的擴(kuò)展呢？

先來回顧一下axios的基本使用，怎么發(fā)送一個(gè)請求：

發(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ā)送一個(gè)帶請求頭的就是這樣
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ā)送一個(gè)帶請求頭的就是這樣
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可以傳遞兩個(gè)參數(shù) url和其他參數(shù)
axios.post可以傳遞三個(gè)參數(shù) url、請求發(fā)出去的參數(shù)、其他參數(shù)

好像不方便記憶，一會傳2個(gè)，一會傳3個(gè)的。所以一般情況下，即使是對項(xiàng)目封裝網(wǎng)絡(luò)請求，我也會使用axios()去封裝，而不是使用axios.get和axios.post。

那么使用axios()，get請求時(shí)如果給請求傳一些參數(shù)，那么可以使用params，例如：

axios({
  method: "get",
  url: 'https://www.baidu.com',
  params: { a: 1 }
})

而使用post的時(shí)候需要使用data，例如：

axios({
  method: "post",
  url: 'https://www.baidu.com',
  data: { a: 1 }
})

好奇掛啊，為什么不能使用同一個(gè)參數(shù)呢？其實(shí)params和data有各自的使用意義。

params是拼接在url后面的參數(shù)
data是請求體里面的參數(shù)

例如發(fā)送post的時(shí)候

axios({
  method: "post",
  url: 'https://www.baidu.com',
  data: { a: 1 },
  params: { a: 2 }
})

上面例子a=1會放在url后面拼接，而a=2會在請求體中。所以params和data其實(shí)是各司其職的。

那么再來看一下，如果像使用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兩個(gè)參數(shù)的文章就介紹到這了,更多相關(guān)axios params和data兩個(gè)參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: