axios傳遞參數(shù)的方式是什么

這篇文章主要講解了“axios傳遞參數(shù)的方式是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“axios傳遞參數(shù)的方式是什么”吧！

參數(shù)的傳遞方式

參數(shù)傳遞一般有兩種，一種是 使用 params, 另一種是 data的方式,有很多的時(shí)候我們看到的前端代碼是這樣的

get 請求

axios({
    method: 'GET',
    url: 'xxxxx',
    params: param,
  })
或者 
axios({
    method: 'GET',
    url: '/xxx?message=' + msg,
  })

post 請求

axios({
    method: 'POST',
    url: '/xxxxx',
    data: param,
  })
  或者
 axios({
    method: 'POST',
    url: '/xxxxx',
    params: param,
  })

正確傳遞

傳遞參數(shù)的解決辦法分為post和get,咋們從這里來看一下

post

post 是大多數(shù)人會(huì)搞錯(cuò)的，咋們來看看。

data 的形式

從例子中說話，使用的案例代碼是post參數(shù)，并且沒有做任何的轉(zhuǎn)碼。

method: 'POST',
    url: '/xxxxx',
    data: param,
  })

控制臺(tái)結(jié)果

使用data傳遞的是一個(gè)對象，在控制臺(tái)中看到的話是 request payload

node 后臺(tái)接收參數(shù)的方式

這里我采用的是koa 來搭建的后臺(tái)。需要使用 koa-bodyparser 這個(gè)插件來解析body 的參數(shù)

import Koa from 'koa';
import bodyParser from 'koa-bodyparser'
const app = new Koa();


app.use(bodyParser());

app.listen(9020, () => {
  console.log('the server is listen 9020 port');
})

接受方式如下：

java 后臺(tái)接收參數(shù)的方式

對于 java 來說，本人并不是那么熟悉，但是知道的是。如果需要接受axios 以data 傳遞的參數(shù)。需要使用注解 @responseBody 并且使用的是實(shí)體類來接收的.

post data 的形式 ，不管是 哪種服務(wù)端的語言，都需要從body中獲取參數(shù)。主要用于 傳遞 對象的參數(shù)，后臺(tái)拿到的數(shù)據(jù)是一個(gè) obj。 data 形式的數(shù)據(jù)有可以做好多事情， 文件上傳，表單提交 等

params 的形式

這個(gè)是一個(gè)對象形式傳遞的，案例代碼如下：

 axios({
    method: 'POST',
    url: '/xxxxx',
    params: param,
  })

瀏覽器結(jié)果分析

查看view sourcer 如下：

node 后臺(tái)接收參數(shù)的方式

啟動(dòng)服務(wù)和上面一樣，但是接收參數(shù)的方式有點(diǎn)變化

java 后臺(tái)接收參數(shù)的方式

這個(gè)本人搞不來 ，理論上是從地址欄上獲取參數(shù)。應(yīng)該也是 可以使用注解 @resquestParam吧

get 請求

get 請求不管使用哪種方式，最后的參數(shù)都會(huì)放到路徑上。 使用param 只是axios幫你把這個(gè)參數(shù)進(jìn)行了序列化，并且拼接在 url上面。原因的話，請查看下面

出現(xiàn)兩種的原因

遇到這個(gè)問題，咋們就需要去看 axios 的源碼了.這里 只會(huì)看處理參數(shù)的部分。有興趣的自己去查看源碼。

處理data

在axios文件中 的 core/dispatchRequest.js 中，我們可以看到 ，axois會(huì) data

在 axios 的 default.js 中，有一個(gè)函數(shù)專門轉(zhuǎn)換 data 參數(shù)的 。

注意： 上面只是舉例 data 傳遞參數(shù)的一種情況哈！其實(shí)data 也有在地址欄 上 拼接的情況，或者 是文件上傳的等情況。太多了，這里 只是講清楚使用的方式。

處理 params

在axios文件中 的 adapt/ xhr.js 中，我們可以看到 ，axois會(huì) params的參數(shù)放到url路徑中。

buildUrl 一些關(guān)鍵代碼如下 ：

感謝各位的閱讀，以上就是“axios傳遞參數(shù)的方式是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對axios傳遞參數(shù)的方式是什么這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！