前端培訓-初級階段-場景實戰（2019-06-06）-Content-Type對照表及平常使用

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

axios 平常使用上，感受不如 $.ajax 可是我以前使用的時候不是改入參就是改方法反正是都解決了。
我也知道問題出在 content-type 上。
就是記不住，這不前幾天後臺項目起了個新的服務。
以前用的構建開發工具用的是 proxy 代理，不知道有老哥用過沒，好幾年前初次開發的時候就不更新了，還有 bug。
索性換 axios 代理一下吧，而後報錯了。好吧，個人鍋，我認真總結，保證我不忘了。

今天講什麼？

1. content-type 是什麼
2. MIME 對照表
3. axios 爲何感受不如 $.ajax
4. 帶你領略 axios 正確打開方式

content-type 是什麼

Content-Type 實體頭部用於指示資源的 MIME類型 media type 。
在響應中，用來描述服務端實際發送給客戶端的數據的類型。
在請求中，好比 POST請求，是指客戶端給服務器實際發送的數據的類型。
雙方根據這個值，來選擇適合的方式解析數據。

MIME 類型組成方式

type/subtype，如application/json、text/html、text/plain
對大小寫不敏感，可是習慣寫小寫。

content-type 組成方式

Content-Type:media-type; charset，如Content-Type: text/html; charset=utf-8

表單中的應用

<form action="/" method="post" enctype="multipart/form-data"> 想上傳文件的時候
<form action="/" method="post" enctype="application/x-www-form-urlencoded"> 默認
爲何想上傳文件不能用第二個呢？帶着你的問題日後看吧

MIME 對照表

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

常見 MIME

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)這是標準的編碼格式。

axios 爲何感受不如 $.ajax

（一樣代碼 jquery 好使，axios 很差使，axios 有 bug 吧）-這個應該是我聽到最多的吐槽了。測試地址

axios 與 $.ajax 設計思路、或者說歷史場景

1. jquery 很是棒，他存在解決了各個瀏覽器版本不一致的問題，提供了統一的 api，極大的簡化了咱們的操做。
2. axios 擁抱現代瀏覽器，提供跨平臺（Node發請求）、 Promise等。

get 請求

對於 get 請求其實沒有太多說的，請求的參數會拼在 url 上，如 https://www.lilnong.top/CORS/lnong?a=1&b=2，其中 a=1&b=2 就是帶過去的參數

一樣兩個使用，咱們會發現 axios 的沒有帶過去參數。


這個時候兄弟們就開始說，我寫了爲何傳不過去。垃圾垃圾。針對上面的問題兄弟們罵完以後，仍是要解決問題的。

1. 手動拼寫，兄弟也是虎的能夠
   
2. qs、$.param({a:1,b:2}) 等類庫解決處理問題，而後手動拼接
3. 正確答案（axios 是使用 params 來發送 get 的數據的）
   

post 請求

對於 post 請求來講就有好幾種狀況了

1. application/x-www-form-urlencoded 這種狀況等於把 get 方式的參數拿到 請求體中存放。編譯格式是如出一轍的。
2. application/json 請求體中就是以下的JSON字符串{a:1,b:2}
3. multipart/form-data 請求體中就是這種塊的結構。
   

好，那咱們接着看兄弟們爲何要吐槽。一樣，我 ajax 怎麼好使，axios ****

1. data 不行，咱們換 params，嗯這裏其實分爲兩個狀況

   1. 後臺大哥說收到了，嗯，post 也是 params的結論就出來了
   2. 過幾天另外一個後臺大哥說收不到。很奇怪，又開始揪頭髮。
   3. 這裏說一下爲何有的時候能收到，有的時候不行。首先 params 帶過去的參數會拼寫在 url 上。若是嚴格來按規定作的話，他就是拿body 的信息就致使拿不到。不按規定來，url的構建一次，body的覆蓋一次，就致使拿到了。
2. 有的人比較機靈，換 params 發現不怎麼好使，忽然發現官網的例子，我來試一試。後臺大哥怎麼還收不到？這裏其實 content-type 被改爲了 application/json。通常來講老後臺都不會適配這種格式。axios({method:'post'}) 也是這種格式
   
3. 沒辦法了？嗯，他們又開始本身拼接。嗯，此次有混過去了
   
4. transformRequest 大法，我這個方法裏面，給他處理一番。
   
5. FormData 大法好，精準識別，也算是正確的表單提交。
   
6. URLSearchParams 方案等同於 Qs 的類庫，只不過是瀏覽器支持的，固然兼容性也不怎麼樣
   

帶你領略 axios 正確打開方式

1. 使用 get 要用 params 來發送請求

2. 使用 post 要用 data 來發送請求

   1. 默認爲 application/json 格式
   2. 能夠經過 FormData 來進行修改
   3. 更建議全局 transformRequest 的方案

3. axios 支持 Promise

   axios.get('/user?ID=12345')
     .then(function (response) {
       console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });

4. axios 支持 Node 環境

5. 配置默認值，方案1更痛快，能夠增長一些通用的 headers。

   1. 全局的 axios 默認值

      axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

   2. 實例默認值

      // 建立實例時設置配置的默認值
        var instance = axios.create({
          baseURL: 'https://api.example.com'
        });
        
        // 在實例已建立後修改默認值
        instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

6. 攔截器，能夠攔截錯誤，進行上報。或者打印日誌。

   // 添加響應攔截器
   axios.interceptors.response.use(function (response) {
       // 對響應數據作點什麼
       return response;
     }, function (error) {
       // 對響應錯誤作點什麼
       return Promise.reject(error);
     });

總結

content-type 很重要，在 req 中是告知服務器應該用什麼樣的格式去解析數據，rsp 中是讓瀏覽器端去如何解析數據。
根據對應的類型，傳對應的格式，才能夠正確的收發。

參考資料

1. MIME 類型 --MDN
2. axios --看雲