摘要:前端最基礎(chǔ)的就是。數(shù)據(jù)被編碼為鍵值對。大法好,精準(zhǔn)識別,也算是正確的表單提交。全局的默認(rèn)值實(shí)例默認(rèn)值創(chuàng)建實(shí)例時設(shè)置配置的默認(rèn)值在實(shí)例已創(chuàng)建后修改默認(rèn)值攔截器,可以攔截錯誤,進(jìn)行上報。參考資料類型看云
前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門,但也僅僅是入門,現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(HTML/CSS/JS),本著提升技術(shù)水平,打牢基礎(chǔ)知識的中心思想,我們開課啦(每周四)。
axios 日常使用上,感覺不如 $.ajax 但是我之前使用的時候不是改入?yún)⒕褪歉姆椒ǚ凑嵌冀鉀Q了。
我也知道問題出在 content-type 上。
就是記不住,這不前幾天后臺項(xiàng)目起了個新的服務(wù)。
之前用的構(gòu)建開發(fā)工具用的是 proxy 代理,不知道有老哥用過沒,好幾年前初次開發(fā)的時候就不更新了,還有 bug。
索性換 axios 代理一下吧,然后報錯了。好吧,我的鍋,我認(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ù)這個值,來選擇適合的方式解析數(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)用
為什么想上傳文件不能用第二個呢?帶著你的問題往后看吧
Media Types -全量的對照表
MIME 分類type關(guān)鍵詞 | 描述 | 示例 |
text | 文本。復(fù)制粘貼的里面常見。 | text/html html頁面, text/css css文件,text/plain 通用文字(默認(rèn)格式) |
image | 圖片。input.files[0].type 返回的時候用于判斷類型。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 | 常見圖片類型,一般上傳圖片的時候判斷 |
image/jpeg | 常見圖片類型,一般上傳圖片的時候判斷 |
image/gif | 常見圖片類型,一般上傳圖片的時候判斷 |
multipart/byteranges | 用于把部分的響應(yīng)報文發(fā)送回瀏覽器。常見于請求視頻資源返回206狀態(tài)碼 |
application/json | JSON 格式 |
multipart/form-data | 用于帶文件上傳的表單提交。作為多部分文檔格式,由邊界線(一個由"--"開始的字符串)劃分出的不同部分組成。每一部分有自己的實(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 吧)-這個應(yīng)該是我聽到最多的吐槽了。測試地址
axios 與 $.ajax 設(shè)計思路、或者說歷史場景jquery 非常棒,他存在解決了各個瀏覽器版本不一致的問題,提供了統(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ù)
同樣兩個使用,我們會發(fā)現(xiàn) axios 的沒有帶過去參數(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)槭裁匆虏邸M瑯樱?ajax 怎么好使,axios ****
data 不行,我們換 params,嗯這里其實(shí)分為兩個情況
后臺大哥說收到了,嗯,post 也是 params的結(jié)論就出來了
過幾天另一個后臺大哥說收不到。很奇怪,又開始揪頭發(fā)。
這里說一下為什么有的時候能收到,有的時候不行。首先 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 大法,我這個方法里面,給他處理一番。
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è)置配置的默認(rèn)值 var instance = axios.create({ baseURL: "https://api.example.com" }); // 在實(shí)例已創(chuàng)建后修改默認(rèn)值 instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;
攔截器,可以攔截錯誤,進(jìn)行上報。或者打印日志。
// 添加響應(yīng)攔截器 axios.interceptors.response.use(function (response) { // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 return response; }, function (error) { // 對響應(yīng)錯誤做點(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/104366.html
摘要:前端最基礎(chǔ)的就是。數(shù)據(jù)被編碼為鍵值對。大法好,精準(zhǔn)識別,也算是正確的表單提交。全局的默認(rèn)值實(shí)例默認(rèn)值創(chuàng)建實(shí)例時設(shè)置配置的默認(rèn)值在實(shí)例已創(chuàng)建后修改默認(rèn)值攔截器,可以攔截錯誤,進(jìn)行上報。參考資料類型看云 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門,但也僅僅是入門,現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(HTML/CSS/JS),本著提升技術(shù)水...
摘要:前端最基礎(chǔ)的就是。一個朋友的問題,監(jiān)測下載進(jìn)度。這節(jié)主要是講如何使用,以及前端下載的核心操作。下載文件,并顯示進(jìn)度條。下載文件,并顯示進(jìn)度條下載文件上面已經(jīng)實(shí)現(xiàn)了,那我們先說說如何顯示進(jìn)度條。實(shí)現(xiàn)代碼如下,我們操作成讀流,然后統(tǒng)計長度。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門,但也僅僅是入門,現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(H...
摘要:前端最基礎(chǔ)的就是。一個朋友的問題,監(jiān)測下載進(jìn)度。這節(jié)主要是講如何使用,以及前端下載的核心操作。下載文件,并顯示進(jìn)度條。下載文件,并顯示進(jìn)度條下載文件上面已經(jīng)實(shí)現(xiàn)了,那我們先說說如何顯示進(jìn)度條。實(shí)現(xiàn)代碼如下,我們操作成讀流,然后統(tǒng)計長度。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門,但也僅僅是入門,現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂(H...
閱讀 2048·2019-08-30 15:52
閱讀 2440·2019-08-29 18:37
閱讀 790·2019-08-29 12:33
閱讀 2839·2019-08-29 11:04
閱讀 1523·2019-08-27 10:57
閱讀 2092·2019-08-26 13:38
閱讀 2759·2019-08-26 12:25
閱讀 2445·2019-08-26 12:23