[axios] axios发送 及 接收处理二进制数据

一、发送携带二进制数据的请求

在图片上传、文件上传等场景中,需要发送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

你可能感兴趣的:([axios] axios发送 及 接收处理二进制数据)