資訊專欄INFORMATION COLUMN
摘要：前端最基礎(chǔ)的就是。數(shù)據(jù)被編碼為鍵值對(duì)。大法好，精準(zhǔn)識(shí)別，也算是正確的表單提交。全局的默認(rèn)值實(shí)例默認(rèn)值創(chuàng)建實(shí)例時(shí)設(shè)置配置的默認(rèn)值在實(shí)例已創(chuàng)建后修改默認(rèn)值攔截器，可以攔截錯(cuò)誤，進(jìn)行上報(bào)。參考資料類型看云
前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開課啦（每周四）。
axios 日常使用上，感覺(jué)不如 $.ajax 但是我之前使用的時(shí)候不是改入?yún)⒕褪歉姆椒ǚ凑嵌冀鉀Q了。
我也知道問(wèn)題出在 content-type 上。
就是記不住，這不前幾天后臺(tái)項(xiàng)目起了個(gè)新的服務(wù)。
之前用的構(gòu)建開發(fā)工具用的是 proxy 代理，不知道有老哥用過(guò)沒(méi)，好幾年前初次開發(fā)的時(shí)候就不更新了，還有 bug。
索性換 axios 代理一下吧，然后報(bào)錯(cuò)了。好吧，我的鍋，我認(rèn)真總結(jié)，保證我不忘了。
content-type 是什么
MIME 對(duì)照表
axios 為什么感覺(jué)不如 $.ajax
帶你領(lǐng)略 axios 正確打開方式
content-type 是什么Content-Type 實(shí)體頭部用于指示資源的 MIME類型 media type 。
在響應(yīng)中，用來(lái)描述服務(wù)端實(shí)際發(fā)送給客戶端的數(shù)據(jù)的類型。
在請(qǐng)求中，比如 POST請(qǐng)求，是指客戶端給服務(wù)器實(shí)際發(fā)送的數(shù)據(jù)的類型。
雙方根據(jù)這個(gè)值，來(lái)選擇適合的方式解析數(shù)據(jù)。
type/subtype，如application/json、text/html、text/plain
對(duì)大小寫不敏感，但是習(xí)慣寫小寫。
Content-Type:media-type; charset，如Content-Type: text/html; charset=utf-8
表單中的應(yīng)用 想上傳文件的時(shí)候
默認(rèn)
為什么想上傳文件不能用第二個(gè)呢？帶著你的問(wèn)題往后看吧
Media Types -全量的對(duì)照表
MIME 分類| type關(guān)鍵詞 | 描述 | 示例 |
| text | 文本。復(fù)制粘貼的里面常見(jiàn)。 | text/html html頁(yè)面, text/css css文件,text/plain 通用文字（默認(rèn)格式） |
| image | 圖片。input.files[0].type 返回的時(shí)候用于判斷類型。input accept="image/*" 允許選擇所有圖片文件 | image/png png圖片, image/jpeg jpg圖片 |
| audio | 音頻。同上 | audio/wav,audio/mpeg mp3文件 |
| video | 視頻。同上 | video/mp4 MP4文件 |
| application | 二進(jìn)制數(shù)據(jù) | application/octet-stream 通用類型（默認(rèn)格式），application/pdf |
| multipart | 復(fù)合類型 | multipart/form-data |
| key | 描述 |
| application/octet-stream | 默認(rèn)值，或者可以理解為未知的應(yīng)用程序文件。瀏覽器會(huì)像對(duì)待設(shè)置了 HTTP 頭 Content-Disposition 值為 attachment 的文件一樣來(lái)對(duì)待這類文件。（微信下載文件） |
| text/html | 可以理解為 html、xml 文件。 |
| text/plain | 默認(rèn)值，也可以理解為未知格式的文本文件。文本文件嘛，沒(méi)格式就只看字也不是啥大問(wèn)題 |
| image/png | 常見(jiàn)圖片類型，一般上傳圖片的時(shí)候判斷 |
| image/jpeg | 常見(jiàn)圖片類型，一般上傳圖片的時(shí)候判斷 |
| image/gif | 常見(jiàn)圖片類型，一般上傳圖片的時(shí)候判斷 |
| multipart/byteranges | 用于把部分的響應(yīng)報(bào)文發(fā)送回瀏覽器。常見(jiàn)于請(qǐng)求視頻資源返回206狀態(tài)碼 |
| application/json | JSON 格式 |
| multipart/form-data | 用于帶文件上傳的表單提交。作為多部分文檔格式，由邊界線（一個(gè)由"--"開始的字符串）劃分出的不同部分組成。每一部分有自己的實(shí)體，以及自己的 HTTP 請(qǐng)求頭，Content-Disposition 和 Content-Type。 |
| application/x-www-form-urlencoded | 普通的 get&post 請(qǐng)求。數(shù)據(jù)被編碼為鍵/值對(duì)。(a=1&b=2)這是標(biāo)準(zhǔn)的編碼格式。 |
（同樣代碼 jquery 好使，axios 不好使，axios 有 bug 吧）-這個(gè)應(yīng)該是我聽到最多的吐槽了。測(cè)試地址
axios 與 $.ajax 設(shè)計(jì)思路、或者說(shuō)歷史場(chǎng)景jquery 非常棒，他存在解決了各個(gè)瀏覽器版本不一致的問(wèn)題，提供了統(tǒng)一的 api，極大的簡(jiǎn)化了我們的操作。
axios 擁抱現(xiàn)代瀏覽器，提供跨平臺(tái)（Node發(fā)請(qǐng)求）、 Promise等。
get 請(qǐng)求對(duì)于 get 請(qǐng)求其實(shí)沒(méi)有太多說(shuō)的，請(qǐng)求的參數(shù)會(huì)拼在 url 上，如 https://www.lilnong.top/CORS/lnong?a=1&b=2，其中 a=1&b=2 就是帶過(guò)去的參數(shù)
同樣兩個(gè)使用，我們會(huì)發(fā)現(xiàn) axios 的沒(méi)有帶過(guò)去參數(shù)。
這個(gè)時(shí)候兄弟們就開始說(shuō)，我寫了為什么傳不過(guò)去。垃圾垃圾。針對(duì)上面的問(wèn)題兄弟們罵完之后，還是要解決問(wèn)題的。
手動(dòng)拼寫，兄弟也是虎的可以
qs、$.param({a:1,b:2}) 等類庫(kù)解決處理問(wèn)題，然后手動(dòng)拼接
正確答案（axios 是使用 params 來(lái)發(fā)送 get 的數(shù)據(jù)的）
對(duì)于 post 請(qǐng)求來(lái)說(shuō)就有好幾種情況了
application/x-www-form-urlencoded 這種情況等于把 get 方式的參數(shù)拿到 請(qǐng)求體中存放。編譯格式是一模一樣的。
application/json 請(qǐng)求體中就是如下的JSON字符串{a:1,b:2}
multipart/form-data 請(qǐng)求體中就是這種塊的結(jié)構(gòu)。
好，那我們接著看兄弟們?yōu)槭裁匆虏?。同樣，?ajax 怎么好使，axios ****
data 不行，我們換 params，嗯這里其實(shí)分為兩個(gè)情況
后臺(tái)大哥說(shuō)收到了，嗯，post 也是 params的結(jié)論就出來(lái)了
過(guò)幾天另一個(gè)后臺(tái)大哥說(shuō)收不到。很奇怪，又開始揪頭發(fā)。
這里說(shuō)一下為什么有的時(shí)候能收到，有的時(shí)候不行。首先 params 帶過(guò)去的參數(shù)會(huì)拼寫在 url 上。如果嚴(yán)格來(lái)按規(guī)定做的話，他就是拿body 的信息就導(dǎo)致拿不到。不按規(guī)定來(lái)，url的構(gòu)建一次，body的覆蓋一次，就導(dǎo)致拿到了。
有的人比較機(jī)靈，換 params 發(fā)現(xiàn)不怎么好使，突然發(fā)現(xiàn)官網(wǎng)的例子，我來(lái)試一試。后臺(tái)大哥怎么還收不到？這里其實(shí) content-type 被改成了 application/json。一般來(lái)說(shuō)老后臺(tái)都不會(huì)適配這種格式。axios({method:"post"}) 也是這種格式
沒(méi)辦法了？嗯，他們又開始自己拼接。嗯，這次有混過(guò)去了
transformRequest 大法，我這個(gè)方法里面，給他處理一番。
FormData 大法好，精準(zhǔn)識(shí)別，也算是正確的表單提交。
URLSearchParams 方案等同于 Qs 的類庫(kù)，只不過(guò)是瀏覽器支持的，當(dāng)然兼容性也不怎么樣
使用 get 要用 params 來(lái)發(fā)送請(qǐng)求
使用 post 要用 data 來(lái)發(fā)送請(qǐng)求
默認(rèn)為 application/json 格式
可以通過(guò) FormData 來(lái)進(jìn)行修改
更建議全局 transformRequest 的方案
axios 支持 Promise
axios.get("/user?ID=12345")
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios 支持 Node 環(huán)境
配置默認(rèn)值，方案1更痛快，可以增加一些通用的 headers。
全局的 axios 默認(rèn)值
axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;
實(shí)例默認(rèn)值
// 創(chuàng)建實(shí)例時(shí)設(shè)置配置的默認(rèn)值
var instance = axios.create({
baseURL: "https://api.example.com"
});
// 在實(shí)例已創(chuàng)建后修改默認(rèn)值
instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;
攔截器，可以攔截錯(cuò)誤，進(jìn)行上報(bào)?；蛘叽蛴∪罩?。
// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
return response;
}, function (error) {
// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
return Promise.reject(error);
});
總結(jié)
content-type 很重要，在 req 中是告知服務(wù)器應(yīng)該用什么樣的格式去解析數(shù)據(jù)，rsp 中是讓瀏覽器端去如何解析數(shù)據(jù)。
根據(jù)對(duì)應(yīng)的類型，傳對(duì)應(yīng)的格式，才可以正確的收發(fā)。
MIME 類型 --MDN
axios --看云
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/53985.html
摘要：前端最基礎(chǔ)的就是。數(shù)據(jù)被編碼為鍵值對(duì)。大法好，精準(zhǔn)識(shí)別，也算是正確的表單提交。全局的默認(rèn)值實(shí)例默認(rèn)值創(chuàng)建實(shí)例時(shí)設(shè)置配置的默認(rèn)值在實(shí)例已創(chuàng)建后修改默認(rèn)值攔截器，可以攔截錯(cuò)誤，進(jìn)行上報(bào)。參考資料類型看云 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水...
摘要：前端最基礎(chǔ)的就是。一個(gè)朋友的問(wèn)題，監(jiān)測(cè)下載進(jìn)度。這節(jié)主要是講如何使用，以及前端下載的核心操作。下載文件，并顯示進(jìn)度條。下載文件，并顯示進(jìn)度條下載文件上面已經(jīng)實(shí)現(xiàn)了，那我們先說(shuō)說(shuō)如何顯示進(jìn)度條。實(shí)現(xiàn)代碼如下，我們操作成讀流，然后統(tǒng)計(jì)長(zhǎng)度。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（H...
摘要：前端最基礎(chǔ)的就是。一個(gè)朋友的問(wèn)題，監(jiān)測(cè)下載進(jìn)度。這節(jié)主要是講如何使用，以及前端下載的核心操作。下載文件，并顯示進(jìn)度條。下載文件，并顯示進(jìn)度條下載文件上面已經(jīng)實(shí)現(xiàn)了，那我們先說(shuō)說(shuō)如何顯示進(jìn)度條。實(shí)現(xiàn)代碼如下，我們操作成讀流，然后統(tǒng)計(jì)長(zhǎng)度。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（H...
閱讀 2596·2021-10-25 09:45
閱讀 1256·2021-10-14 09:43
閱讀 2311·2021-09-22 15:23
閱讀 1540·2021-09-22 14:58
閱讀 1945·2019-08-30 15:54
閱讀 3554·2019-08-30 13:00
閱讀 1367·2019-08-29 18:44
閱讀 1583·2019-08-29 16:59
