------------------------补充 2020.08.10-------------------------
之前理解有误,前端H5页面并非后端同步来渲染,此接口在页面渲染完成后,在组件渲染完成的生命周期函数里调用,异步调用后端接口并不会造成页面url改变,而是请求接口的链接变化,即前端请求的a接口,被a接口重定向为请求b接口,所以需要后端将需要跳转的url传给前端,前端来跳转,本文可当做 axios 对报错做统一处理的文章来看
------------------------补充 2020.08.10 end-------------------------
背景:
1、H5页面
2、taro-axios@1.1.1
问题:
基于以上背景,调用后端接口时,接口状态码是302,被axios捕获为error,如下图
想要的效果是,直接拿到后端返回的所有数据
解决:
此时项目里对axios的封装代码如下:
import axios from 'taro-axios'
const api = axios.create({
headers: { 'X-Requested-With': 'XMLHttpRequest' }
});
api.interceptors.response.use(response => {
// some code
}, error => {
// 主要代码是这一行
// 接口返回 302 时,在这里被捕获为 error
Promise.reject(error)
})
官网的错误处理demo如下:
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
官方网址:
http://www.axios-js.com/zh-cn/docs/#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86(中文网)
https://github.com/axios/axios#handling-errors
尝试在 error 回调中打印一下 error 对象,如下图:
如果只需要某个status下不报错,可以根据 response 中的 status 做区分,比如 status 是 302 的话,直接返回接口给的返回值,代码如下:
api.interceptors.response.use(response => {
// some code
}, error => {
if(error.response.status == 302){
return error.response.data
}
Promise.reject(error)
})
搞定~