一文詳解axios傳遞參數的兩種方式

axios 大家都非常的清楚，一個既可以用於客戶端或 服務端傳送#http##請求的庫。但是在前後端聯調的時候有的時候會很難受，所以這裡我來做一個總結。希望能幫助有緣人。

參數的傳遞方式【相關推薦：

vue.js影片教學】

參數傳遞一般有兩種，一種是使用 

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,
  })

正確傳遞

傳遞參數的解決方法分為post和get,咋們從這裡來看一下 

post<span style="background-color:#cccccc;"></span> 

#post 是多數人會搞錯的，咋們來看看。

 data<span style="background-color:#cccccc;"></span> 的形式

從範例中說話，使用的案例代碼是post參數，並且沒有做任何的轉碼。

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

 控制台結果

# 使用data傳遞的是一個對象，在控制台中看到的話是 

request payload 

#node 後台接收參數的方式 

這裡我採用的是

koa 來搭建的後台。需要使用 koa-bodyparser 這個外掛程式來解析body 的參數

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 後台接收參數的方式

對java 來說，本人並不是那麼熟悉，但知道的是。如果需要接受

axios 以data 傳遞的參數。需要使用註解 @responseBody 且使用的是實體類別來接收的.

##post data

的形式，不管是哪一種服務端的語言，都需要從body中取得參數。主要用於 傳遞 物件的參數，後台拿到的資料是一個 obj。 data 形式的資料有可以做好多事情， 檔案上傳，表單提交 等

params

 的形式這個是一個物件形式傳遞的，案例程式碼如下：

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

瀏覽器結果分析

查看view sourcer 如下：

node

 後台接收參數的方式

啟動服務和上面一樣，但是接收參數的方式有點變化

java

 後台接收參數的方式

這個本人搞不來，理論上是從網址列取得參數。應該也是 可以使用註解 @resquestParam吧

get 請求

get 請求不管使用哪一種方式，最後的參數都會放到路徑上。使用param 只是axios幫你把這個參數進行了序列化，並且拼接在 url上面。原因的話，請看下面

出現兩種的原因

遇到這個問題，咋們就需要去看 

axios

 的源碼了.這裡只會看處理參數的部分。有興趣的自己去查看源碼。

處理

data

在

axios

檔案中的 core/dispatchRequest.js 中，我們可以看到，axois會 data#

在 axios 的 default.js 中，有一個函數專門轉換 data#參數的。

注意： 上面只是舉例 data 傳遞參數的一種情況哈！其實data 也有在網址列 上 拼接的情況，或是是檔案上傳的等情況。太多了，這裡 只是講清楚使用的方式。

處理 params

在axios檔案中的 adapt/ xhr.js 中，我們可以看到，axois會 params的參數放到url路徑中。

buildUrl 一些關鍵程式碼如下：

總結

其實前端和後端對接參數過程，對於post請求，data 不行，那就使用 params來傳遞，如果都不行，那就可能後端有問題了。

以上是一文詳解axios傳遞參數的兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！