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

以上~