使用axios进行请求,浏览器f12检查,请求成功。但是代码逻辑还是进入axios的catch模块,并且打印为undefined.
刚开始以为是then中业务异常抛出,后只放console.log也出错,排除。
原因分析:发现axios中 是有响应拦截器的
代码如下
axios.interceptors.response.use(function (response) {
if(response.headers.token){
storage.setToken(response.headers.token);
}
if(response.status === 200){ // 外部返回的状态码
const res = response.data;
if(res.code === 200){ // 后端返回的状态码为200时正常响应
return res;
}else{
// -----如下是新添加------
if (response.headers['content-type'].search('octet-stream') > -1) {
return response;
}
// -----如上是新添加------
return Promise.reject(res.msg);
}
}else{
return Promise.reject(response.statusText);
}
},function (error) {
return Promise.reject(error);
});
解释一下:经过排查,axios会判断返回的response内容,是否包含 code 200的。
若包含,则会返回resolve() (进入 .then)
若不包含,就reject()
因为接口是二进制数据流,直接返回的就是二进制数据流,不包含res.code。所以会进入catch!
解决方案:
后端返回添加 content-type="application/octet-stream",即
response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
前端代码
axios.get('/images/captcha', {
responseType: 'arraybuffer'
}).then(response => {
return 'data:image/png;base64,' + btoa(new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
}).then(data => {
$('#codeimg').attr("src", data)
}).catch(err => {
console.log(err)
})