摘要：前言做過(guò)前后端聯(lián)調(diào)的小伙伴，可能有時(shí)會(huì)遇到一些問(wèn)題。它是請(qǐng)求中空行的后面那部分。這就是它向你展示的。值得形式是以的形式提交的。傳遞對(duì)象的時(shí)候，默認(rèn)為類型的值，與非時(shí)，的區(qū)別。如果是字符串的話，后端解析的內(nèi)容時(shí)候，肯定要去解析啦。

做過(guò)前后端聯(lián)調(diào)的小伙伴，可能有時(shí)會(huì)遇到一些問(wèn)題。例如，我明明傳遞數(shù)據(jù)給后端了，后端為什么說(shuō)沒(méi)收到呢？這時(shí)候可能就會(huì)就會(huì)有小伙伴陷入迷茫，本文從chrome-dev-tools（F12調(diào)試器）中看到的FormData與RequestBody，給小伙伴們提供一種可能的思路。也給小伙伴們提供一些問(wèn)題的探究方法。

什么是FormData？什么是RequestPayload？不解釋，直接上圖：

因?yàn)檫@里觸及了我的知識(shí)盲區(qū)，所以有了本文。這個(gè)答案是我在stackoverflow上得到的。首先還是貼問(wèn)題，貼答案。

What"s the difference between “Request Payload” vs “Form Data” as seen in Chrome dev tools Network tab。
中文翻譯：chrome開發(fā)者工具中的Request Payload與Form Data有什么區(qū)別？

高票回答：

The Request Payload - or to be more precise: payload body of a HTTP Request - is the data normally send by a POST or PUT Request. It"s the part after the headers and the CRLF of a HTTP Request.
A request with Content-Type: application/json may look like this:
POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar", "name" : "John" }

If you submit this per AJAX the browser simply shows you what it is submitting as payload body. That’s all it can do because it has no idea where the data is coming from.
If you submit a HTML-Form with method="POST" and Content-Type: application/x-www-form-urlencoded or Content-Type: multipart/form-data your request may look like this:
POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John
In this case the form-data is the request payload. Here the Browser knows more: it knows that bar is the value of the input-field foo of the submitted form. And that’s what it is showing to you.
So, they differ in the Content-Type but not in the way data is submitted. In both cases the data is in the message-body. And Chrome distinguishes how the data is presented to you in the Developer Tools.

翻譯過(guò)來(lái)是說(shuō)：
Request Payload更準(zhǔn)確的說(shuō)是http request的payload body。一般用在數(shù)據(jù)通過(guò)POST請(qǐng)求或者PUT請(qǐng)求。它是HTTP請(qǐng)求中空行的后面那部分。（PS:這里涉及一個(gè)http常被問(wèn)到的問(wèn)題，http請(qǐng)求由哪幾部分組成，一般是請(qǐng)求行，請(qǐng)求頭，空行，請(qǐng)求體。payload body應(yīng)該是對(duì)應(yīng)請(qǐng)求體。）

一個(gè)請(qǐng)求伴隨著header設(shè)置為Content-Type: application/json時(shí)候，看起來(lái)可能像這樣：

POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar", "name" : "John" }

如果你正常請(qǐng)求一個(gè)ajax。瀏覽器會(huì)簡(jiǎn)單的將你提交的內(nèi)容作為payload展示出來(lái)，這就是它所能做的，因?yàn)樗恢罃?shù)據(jù)來(lái)自哪里。

如果你提交了一個(gè)html表單并且配置上了method="post"，并且設(shè)置了Content-Type: application/x-www-form-urlencoded或者Content-Type: multipart/form-data。那么你的請(qǐng)求可能長(zhǎng)這個(gè)樣：

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John

這里的form-data就是request payload。在這里，瀏覽器知道更多：它知道bar是提交表單的輸入字段foo的值。這就是它向你展示的。

所以區(qū)別就是，他們只是因?yàn)?b>Content-Type設(shè)置的不同，并不是數(shù)據(jù)提交方式的不同，這兩種提交都會(huì)將數(shù)據(jù)放在message-body中。但是chrome瀏覽器的開發(fā)者工具會(huì)根據(jù)這個(gè)ContentType區(qū)分顯示方式。

好了，到這里我們知道了，其實(shí)都是放到了payload中。那么具體有什么區(qū)別呢？為什么有時(shí)候后端拿不到值呢？這就不得不說(shuō)對(duì)payload的解析方式了。我們以幾個(gè)chrome下的測(cè)試案例，來(lái)理一理這個(gè)邏輯。

    
    
    提交

如果我這里點(diǎn)擊提交按鈕，就會(huì)觸發(fā)瀏覽器的提交功能，那結(jié)果是什么樣呢？

可以看到Content-Type為application/x-www-form-urlencoded。
值得形式是以key1=value1&key2=value2的形式提交的。

function submit2() {
    var xhr = new XMLHttpRequest();
    xhr.timeout = 3000;
    var obj = {a: 1, b: 2};
    xhr.open("POST", "/");
    xhr.send(obj);
}

首先我們構(gòu)造一個(gè)簡(jiǎn)單的函數(shù)，然后觸發(fā)它。通過(guò)chrome反饋來(lái)看：

1.默認(rèn)的Content-Type為text/plain。
2.Request Payload會(huì)對(duì)非字符串做字符串轉(zhuǎn)換。
3.通過(guò)xhr.send(JSON.stringify(obj));可修正要發(fā)的內(nèi)容

由于axios已經(jīng)是vue、react的準(zhǔn)標(biāo)配請(qǐng)求方式了，所以這里探究一下它。
首先我門看axios的文檔，當(dāng)post提交時(shí)候可以傳遞什么類型參數(shù)：

注意這個(gè)類型，我們分別構(gòu)造兩個(gè)場(chǎng)景。對(duì)應(yīng)它。

function submit3() {
    var sence1 = "name=123&val=456";
    var sence2 = {name: 123, val: 456};
    axios.post("/", sence1)
}

分別傳遞字符串與對(duì)象，提交post請(qǐng)求，然后觀察結(jié)果:

場(chǎng)景1——傳遞字符串時(shí)候的結(jié)果：

場(chǎng)景2——傳遞對(duì)象的結(jié)果：

1.當(dāng)我們傳遞字符串的時(shí)候，Content-Type自動(dòng)轉(zhuǎn)為xxx-form-xxx的形式。當(dāng)為對(duì)象的時(shí)候，自動(dòng)轉(zhuǎn)化為xxx/json。
2.字符串的時(shí)候以key1=val1&key2=val2的形式體現(xiàn)，對(duì)象以JSON字符串形式體現(xiàn)。

探索了這么多種情況之后，那么我們回顧一下：

1.傳統(tǒng)的ajax請(qǐng)求時(shí)候，Content-Type默認(rèn)為"文本"類型。
2.傳統(tǒng)的form提交的時(shí)候，Content-Type默認(rèn)為"Form"類型。
3.axios傳遞字符串的時(shí)候，Content-Type默認(rèn)為"Form"類型。
4.axios傳遞對(duì)象的時(shí)候，Content-Type默認(rèn)為"JSON"類型

1.都只支持字符串類型(以上探究的幾種情況)
2.Form需要傳遞的格式為key1=value1&key2=value2,類似GET請(qǐng)求的QueryString格式
3.非Form一般為JSON.stringify(formDataObject)形式

無(wú)論何種形式傳遞，后端解析表單信息的時(shí)候，會(huì)考慮Content-Type。如果是JSON字符串的話，后端解析payload的內(nèi)容時(shí)候，肯定要去解析JSON啦。如果是key1=value1&key2=value2的形式，則需要去分割字符串。

當(dāng)然這些事情一般后端使用的框架會(huì)去處理，但是框架給后端提供取值接口有可能是不同的，所以前端的小伙伴在處理請(qǐng)求問(wèn)題時(shí)，一定要跟后端小伙伴商量好，是用JSON還是FormData哈。

本來(lái)只是小小的一個(gè)問(wèn)題，仔細(xì)研究起來(lái)發(fā)現(xiàn)挺多細(xì)節(jié)。今天就花時(shí)間整理了一下，希望能給大家一些幫助。碼字不容易，如果感到這篇文章對(duì)你有用。點(diǎn)個(gè)贊，收個(gè)藏唄。