vue在axios响应拦截器中对状态码code进行相应处理

原创

已于 2022-03-16 17:09:50 修改 · 1w 阅读

收录于

当前文章被以下社区和专栏收录：

于 2022-03-10 14:14:46 首次发布

本文介绍了如何在Vue项目中使用axios响应拦截器，根据返回的状态码进行操作，如利用element-ui的MessageBox和Message进行错误提示，并通过location.href进行页面跳转。同时提出了在多接口连续返回失效状态码时添加防抖处理，避免MessageBox连续触发。

在axios拦截器中根据返回的状态码进行相应处理，如跳转页面，错误提示等

1.引入MessageBox与Message

import { MessageBox,Message } from 'element-ui'

element-ui文档

2.在响应拦截器中判断code

// response  拦截器 获取后台数据前拦截
service.interceptors.response.use(
    response => {
        const code = response.data.code || 200 ;//若未设置默认成功状态
        switch (code) {
            case 200://为200执行该行

标签