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