axios拦截响应报错

在基于Promise的HTTP客户端中,axios是一个广泛使用的库,它提供了一种简洁明了的方式来发送异步HTTP请求到REST端点,在使用axios时,我们经常需要对请求和响应进行拦截,以便于统一处理一些逻辑,例如认证失效、接口报错、请求重定向等,以下将详细讨论如何使用axios的响应拦截器来处理报错。,我们需要设置axios的响应拦截器,响应拦截器允许我们在请求得到响应后,对响应数据进行处理或修改,这非常实用,因为我们可以在这里检查HTTP状态码,并根据需要处理业务逻辑错误。,在上述代码中,我们首先创建了一个axios实例并为其添加了响应拦截器,拦截器由两部分组成:一个是处理正常响应的回调,另一个是处理异常的回调。,当接口返回的业务状态码不是我们预定的成功状态码时,我们会在第一个回调函数中处理这种情况,通常,后端服务会返回一个包含业务错误信息的JSON对象,我们会弹出错误信息,并调用
Promise.reject()来拒绝这个Promise,使得后续的
.then()不会被执行,而是直接跳转到
.catch()中去。,对于异常处理,我们检查
error.response是否存在来区分错误类型,如果
error.response存在,说明请求已发出且服务器有响应,但状态码不是2xx,这时我们可以根据服务器返回的错误信息进行提示,如果不存在,可能是请求发出前发生了错误,例如网络问题,或者是请求配置不正确。,特别需要注意的是,当token失效时,可能会在一次用户操作中引发多个请求失败,导致多次弹出错误提示,这会影响用户体验,为了解决这个问题,我们可以设置一个全局变量来控制提示只弹出一次。,通过上述机制,我们不仅统一了错误处理的方式,而且避免了因为重复错误导致的频繁提示,提升了用户界面的友好性。,为了避免在拦截器中由于编程疏忽导致的问题,比如在响应拦截器中忘记返回response对象,我们需要仔细检查拦截器的逻辑,确保任何情况下,
use函数中的两个回调都正确返回了Promise对象。,使用axios的拦截器可以有效地对HTTP请求进行监控和管理,它为我们提供了一个强大的机制来处理API调用过程中可能出现的各种情况,从而增强应用的可维护性和用户体验。,,// 创建axios实例 const service = axios.create({ // axios 配置项 }); // 响应拦截器 service.interceptors.response.use( response => { // 对响应数据做点什么 const res = response.data; // 这里可以根据后端接口返回数据的结构进行判断 if (res.code !== 200) { // 业务逻辑错误处理 // 可以根据实际情况,做弹出提示,或者其他的错误处理逻辑 Message({ message: res.message || ‘Error’, type: ‘error’, duration: 5 * 1000 }); // 如果是业务错误,我们返回一个Promise.reject,这样可以在后续的.catch中捕获 return Promise.reject(new Error(res.message || ‘Error’)); } else { // 业务成功,返回response对象 return response; } }, error => { // 对响应错误做点什么 if (error.response) { // 请求已发出,但服务器响应的状态码不在2xx的范围 const res = error.response.data; Message({ message: res.message || ‘Error’, type: ‘error’, duration: 5 * 1000 }); } else if (error.request) { // 请求已经发出了,但是没有收到响应 Message({ message: ‘Network Error’, type: ‘error’, duration: 5 * 1000 }); } else { // 发送请求时出了点问题 Message({ message: error.message || ‘Request Error’, type: ‘error’, duration: 5 * 1000 }); } // 我们返回一个Promise.reject,这样可以在后续的.catch中捕获 return Promise.reject(error); } );,let hasTokenErrorShown = false; // 部分异常处理代码 if (error.response && error.response.status === 401 && !hasTokenErrorShown) { hasTokenErrorShown = true; Message({ message: ‘Token expired, please login again’, type: ‘error’, duration: 5 * 1000 }); },

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《axios拦截响应报错》
文章链接:https://zhuji.vsping.com/397949.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。