设置axios拦截器,promise抛出的异常如何全局处理?

axios.interceptors.response.use((response) => {
  if (response.data.error_no !== '0') {
    showErrorMsg(response.data.error_info);
    return Promise.reject(response);
  }
  return response.data;
}, (error) => {
  Toast.offline('网络传输错误', 1);
  return Promise.reject(error);
});

针对返回内容做了一下拦截,如果error_no !== '0'就认为是请求错误(比如未登录等等),这时候会把错误信息提示给用户。

设置了这个拦截器之后,我写的请求格式如下:

axios.get('xxxx').then((res) => {
  // 请求成功
  // DO STH
})

// 如果要处理Promise抛出的异常的话,每个请求后面都得带上catch:
axios.get('xxxx').then((res) => {
  // 请求成功
  // DO STH
}).catch((err) => {
  console.log(err);
})

实际上开发者并没有对捕获到的err做什么处理,每个axios请求都带上catch显得很麻烦、累赘。

第一:有没有什么方法统一设置下 处理这个异常? 省得控制台老是报错 Uncaught (in promise)

第二:如果不设置异常处理,应用程序会有什么问题吗?比如容易奔溃、不稳定等等

阅读 19.6k
3 个回答

可以对 axios 做一层封装
编辑
大概这样吧:

export default {
    get (url, params) {
        return axios.get().then().catch()
    },
    post (url, params) {
        return axios.post().then().catch()
    }
}

把 axios 的操作封装到函数中,涉及到配置和参数的部分,通过这个函数进行调用,函数内部执行axios的实际操作。

这样,axios().get().then().catch() 就能封装成 funcAxios(); 一个操作。

你就不需要每次都是用 axios...... ,catch自然也就不用写了。

至于封装的内容,需要看你的业务逻辑涉及哪些。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进