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