一、Content Type

'Content Type' ，也被稱為MIME類型（Multipurpose Internet Mail Extensions），是一種用于標識數(shù)據(jù)格式的機制。在HTTP協(xié)議中，'Content Type’通常通過請求或響應頭部的’Content-Type’字段來指定。這個字段的值是一個字符串，用于描述消息體的媒體類型，如文本、圖像、音頻、視頻等，以及可能的字符集和編碼方式。當客戶端向服務器發(fā)送請求時，'Content-Type’頭部告訴服務器客戶端發(fā)送的數(shù)據(jù)是什么類型，這樣服務器就能根據(jù)數(shù)據(jù)的類型來選擇合適的處理方式。

在HTTP通信中，有幾種常見的’Content Type’類型：

1. application/json：這是最常見的’Content Type’之一,默認就是json，用于表示JSON格式的數(shù)據(jù)。JSON（JavaScript Object Notation）是一種輕量級的數(shù)據(jù)交換格式，易于人閱讀和編寫，同時也易于機器解析和生成。
2. application/x-www-form-urlencoded?：這是另一種常見的’Content Type’，用于表單提交。當表單數(shù)據(jù)被提交到服務器時，數(shù)據(jù)會被編碼為鍵值對的形式，并且每個鍵值對之間用’&'符號分隔。
3. ?multipart/form-data?：這種’Content Type’通常用于文件上傳。它允許在一個請求中發(fā)送多個部分的數(shù)據(jù)，每個部分都可以有自己的’Content-Type’和’Content-Disposition’等頭部信息。
4. ?text/plain?：這種’Content Type’表示純文本數(shù)據(jù)，沒有任何格式或編碼。

二、responseType

在使用axios進行異步網(wǎng)絡請求時，設置正確的responseType類型是非常關鍵的。axios允許設置多種responseType類型，如'arraybuffer'、'blob'、'document'、'json'、'text'、'stream'。這些類型決定了服務器響應的數(shù)據(jù)如何被處理和返回。在眾多類型中，'json’是最常見的一種，因為它直接返回JavaScript對象，大大簡化了數(shù)據(jù)處理的復雜度。
當你設置responseType為’json’時，axios默認將服務器端返回的數(shù)據(jù)視為JSON字符串，并自動進行解析。

2.1 理解RESPONSETYPE

responseType屬性的設定，直接影響著你如何訪問和處理返回的數(shù)據(jù)。axios通過XMLHttpRequest或fetch（在支持的環(huán)境中）對服務器進行請求，而responseType則告訴axios如何解析返回的響應體。

1. arraybuffer：適用于二進制數(shù)據(jù)，在處理文件上傳下載時尤其有用。
2. blob：同樣用于二進制數(shù)據(jù)，常在前端需要處理大型二進制對象（如圖片或視頻文件）時使用。
3. document：主要用于Web瀏覽器，允許直接返回一個HTML Document對象。
4. json：返回一個被解析成JavaScript對象的JSON字符串。大多數(shù)API交互使用此類型。
5. text：返回純文本字符串。
6. stream：使用Node.js環(huán)境時返回一個流。這對于處理大型數(shù)據(jù)非常有利。

2.2 應用場景

1. 處理JSON數(shù)據(jù)
   處理JSON數(shù)據(jù)是最常見的場景之一。通過將responseType設置為’json’，可以直接獲取到JavaScript對象，極大簡化了數(shù)據(jù)處理流程。

axios.get('your-api-url', {responseType: 'json'
}).then(response => {console.log(response.data); // 直接訪問返回的JavaScript對象
});

2. 文件下載
   在文件下載場景中，通常需要將responseType設置為’blob’或’arraybuffer’。這樣可以處理二進制數(shù)據(jù)，進而允許用戶保存文件到本地。

axios.get('your-file-url', {responseType: 'blob'
}).then(response => {const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'your-file-name');document.body.appendChild(link);link.click();
});