body傳參？parameter傳參？Request Payload？Query String Parameter?

今天，是有委屈的一天；今天，是有小情緒的一天。所以，我們要對今天進行小結，跟它做一個了斷！

今天，后端來一個接口，告訴我“要用post請求，parameter形式傳參”。over。
初級選手一般聽到用post請求，但素用parameter傳參一定很懵圈o((⊙﹏⊙))o。那么請先移步看這篇文章，get和post請求其實並沒本質區別，他們都是tcp連接，post請求可以將參數放在body中，也可以是parameter形式，both fine！

但是對於post請求來說，后端所謂的“parameter形式傳參”還有以下兩個區別：

1. 第一種parameter形式的傳參和一般get請求一樣，參數會帶在請求路徑尾部，即?a=1&b=2&c=3...，對於這種形式的參數，在控制台可以看到參數形式是“Query String Parameter”，后端用req.query進行處理。
2. 第二種parameter形式的傳參，被他們叫做“parameter”，但是它在請求時不會跟隨到請求路徑的尾部，即對外是不能直觀看到的。對於這種形式的參數，在控制台可以看到參數形式是“Form Data”，它對應的Request Headers是: Content-Type:application/x-www-form-urlencoded。后端也用req.query進行處理這類型參數。

總之，對於post請求這兩種形式的parameter傳參，后端的處理方式是一樣的，他們也稱之為“key=value形式傳參”。

另一種更為常見的，也是前端普遍認為的post請求傳參是放在所謂“body”中的，在控制台中可以看到參數形式叫做"request payload"，它是json格式的參數。對於這種形式的參數，后台用req.body來處理。

接入正題~
一開始我是這么調用的：

axios({
    method: 'post',
    url: '/xxx/xxx',
    data: {
        a: X,
        b: XX,
        c: XXXX,
        d: XXXXX
    }
})

在這么寫完后，打開控制台一看，是上面說的"request payload"參數形式。即后端所言"body傳參"，它是json格式的對象。不是他們所想要的…… 因而請求失敗。-_-||

然后呢，我修改上述代碼，把data改成params，如下：

axios({
    method: 'post',
    url: '/xxx/xxx',
    params: {
        a: X,
        b: XX,
        c: XXXX,
        d: XXXXX
    }
}) 

ok！這種可以成功請求接口，但是參數會尾隨在請求路徑后面，亦不是理想的傳參形式，畢竟我們不想那么直接地把參數暴露出來。

腫么辦？翻閱資料后，終於發現qs這個包。其實qs.stringify的作用和jquery的$.param()一樣，把對象轉換為鍵值對格式。

import qs from 'qs' 
axios({
    method: 'post',
    url: '/xxx/xxx',
    data: qs.stringify({ // >>>關鍵是這一步，將參數對象轉變為key=value格式，這才是后端所想。這種方式，即不直觀對外暴露參數，也達到使用“parameter形式”
        a: X,
        b: XX,
        c: XXXX,
        d: XXXXX
    })
})    

以上~

來源：https://segmentfault.com/a/1190000015937372