• 注册
  • 经验分享 经验分享 关注:4 内容:15179

    axios拦截响应报错

  • 查看作者
  • 打赏作者
  • Lv.10
    封号会员

    在基于Promise的HTTP客户端中,axios是一个广泛使用的库,它提供了一种简洁明了的方式来发送异步HTTP请求到REST端点,在使用axios时,我们经常需要对请求和响应进行拦截,以便于统一处理一些逻辑,例如认证失效、接口报错、请求重定向等,以下将详细讨论如何使用axios的响应拦截器来处理报错。

    axios拦截响应报错
    (图片来源网络,侵删)

    我们需要设置axios的响应拦截器,响应拦截器允许我们在请求得到响应后,对响应数据进行处理或修改,这非常实用,因为我们可以在这里检查HTTP状态码,并根据需要处理业务逻辑错误。

    // 创建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);
    }
    );

    在上述代码中,我们首先创建了一个axios实例并为其添加了响应拦截器,拦截器由两部分组成:一个是处理正常响应的回调,另一个是处理异常的回调。

    当接口返回的业务状态码不是我们预定的成功状态码时,我们会在第一个回调函数中处理这种情况,通常,后端服务会返回一个包含业务错误信息的JSON对象,我们会弹出错误信息,并调用Promise.reject()来拒绝这个Promise,使得后续的.then()不会被执行,而是直接跳转到.catch()中去。

    对于异常处理,我们检查error.response是否存在来区分错误类型,如果error.response存在,说明请求已发出且服务器有响应,但状态码不是2xx,这时我们可以根据服务器返回的错误信息进行提示,如果不存在,可能是请求发出前发生了错误,例如网络问题,或者是请求配置不正确。

    特别需要注意的是,当token失效时,可能会在一次用户操作中引发多个请求失败,导致多次弹出错误提示,这会影响用户体验,为了解决这个问题,我们可以设置一个全局变量来控制提示只弹出一次。

    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
    });
    }

    通过上述机制,我们不仅统一了错误处理的方式,而且避免了因为重复错误导致的频繁提示,提升了用户界面的友好性。

    为了避免在拦截器中由于编程疏忽导致的问题,比如在响应拦截器中忘记返回response对象,我们需要仔细检查拦截器的逻辑,确保任何情况下,use函数中的两个回调都正确返回了Promise对象。

    使用axios的拦截器可以有效地对HTTP请求进行监控和管理,它为我们提供了一个强大的机制来处理API调用过程中可能出现的各种情况,从而增强应用的可维护性和用户体验。

    请登录之后再进行评论

    登录
  • 快速发布
  • 任务
  • 实时动态
  • 偏好设置
  • 帖子间隔 侧栏位置: