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

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

參數(shù)的傳遞方式

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

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ù)人會搞錯的，咋們來看看。

data 的形式

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

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

控制臺結(jié)果

使用data傳遞的是一個對象，在控制臺中看到的話是 request payload

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

這里我采用的是koa 來搭建的后臺。需要使用 koa-bodyparser 這個插件來解析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 后臺接收參數(shù)的方式

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

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

params 的形式

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

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

瀏覽器結(jié)果分析

查看view sourcer 如下：

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

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

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

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

get 請求

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

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

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

處理data

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

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

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

處理 params

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

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

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

當(dāng)前文章：axios傳遞參數(shù)的方式是什么
本文URL：http://chinadenli.net/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)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)