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

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

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

引數傳遞一般有兩種，一種是 使用 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

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

data 的形式

從例子中說話，使用的案例程式碼是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傳遞引數的兩種方式的詳細內容，更多請關注TW511.COM其它相關文章！