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

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

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)惠陽(yáng)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

參數(shù)的傳遞方式

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

get 請(qǐng)求

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

post 請(qǐng)求

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

正確傳遞

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

post

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

data 的形式

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

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

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

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

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

這里我采用的是koa 來(lái)搭建的后臺(tái)。需要使用 koa-bodyparser 這個(gè)插件來(lái)解析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ù)的方式

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

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

params 的形式

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

 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è)本人搞不來(lái) ，理論上是從地址欄上獲取參數(shù)。應(yīng)該也是 可以使用注解 @resquestParam吧

get 請(qǐng)求

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

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

遇到這個(gè)問(wèn)題，咋們就需要去看 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)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)axios傳遞參數(shù)的方式是什么這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前文章：axios傳遞參數(shù)的方式是什么
本文URL：http://muchs.cn/article34/ihicse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站排名、ChatGPT、外貿(mào)建站、網(wǎng)站制作、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)