一、發送攜帶二進制數據的請求
在圖片上傳、文件上傳等場景中,需要發送payload為二進制數據的'POST'請求
注: 只要請求體中不是純 JSON 或字符串,而是包含或完全由二進制數據構成的內容 (如文件、音視頻、圖片),就需要發送payload為二進制數據的'POST'請求。
這裏的重點是設置headers,先介紹如何發送這種特殊的請求。
分別以 1.axios(config) , 2.axios.post(url[, data[, config]]) 這兩種形式的axios請求舉例。
a1.
axios({
method: 'post',
url: '/address',
data: {...},
headers: {
'Content-Type': 'multipart/form-data'
}
});
a2.
axios.post('/address', data, { headers: { 'Content-Type': 'multipart/form-data' } })
a1, a2兩種寫法等價。
對payload是 Blob 及 ArrayBuffer的情況,需要自己設置合適的 Content-Type,這兩種場景下常用的Content-Type有
'Content-Type': 'image/png', 'Content-Type': 'application/octet-stream'
二、向服務器發起請求,獲取二進制數據,處理二進制數據
發送請求後,服務器返回二進制數據,需要給axios設置正確的配置用以處理二進制數據。
這裏以get請求為例,展示 1. axios(config) 2. axios.get(url[, config]) 這兩種形式下如何告訴axios獲取的是二進制數據。
b1.
axios({
method: 'get',
url: '/address',
responseType: 'blob'
});
b2.
axios.get('/address', { responseType: 'blob' })
b1, b2兩種形式等價
responseType 的作用是告訴 Axios 該如何處理服務器返回的內容
注: responseType不是告訴服務器返回什麼,而是告訴Axios這個請求得到了什麼格式的內容,按照這個設定的格式去處理。
同步更新到自己的語雀
https://www.yuque.com/dirackeeko/blog/llgp8b1k5gse8qvc