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

在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执行该行
                return response.data;//成功直接返回
            case 1300://为1300执行该行
                MessageBox.confirm("登录状态已过期，重新登录", "系统提示", {
                    confirmButtonText: "重新登录",
                    type: "warning",
                    showCancelButton: false,
                    showClose: false
                }).then(() => { window.location.href = '/' })//跳转登录页
                    .catch(() => { window.location.href = '/' })//跳转登录页
                return response.data
            default://都不相同执行该行
                return response.data
        }
    },
    error => {
        console.log("axios中response报错", error);
        Message({
            showClose: true,
            message: error.message,//弹出失败原因
            type: 'error'
        })
        return Promise.reject(error);
    }
)

处理特定值时，使用switch语句最佳 

 若判断为登录失效则通过location对象的href属性进行页面跳转

Location 对象包含有关当前 URL 的信息。

href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。

import axios from "axios";
import { getToken } from '@/utils/auth'
import { MessageBox, Message } from 'element-ui'

const service = axios.create({
    baseURL: window.baseUrl,
    timeout: 30000,//请求超时时间
    headers: {
        "Content-Type": "application/json;charset=UTF-8", //表单数据类型
    },
    withCredentials: true,//自动同步获取后台服务器cookie同步本地 
})

// request  拦截器 发送数据到后台服务器前拦截
service.interceptors.request.use(
    config => {
    if(getToken()) { //判断有无获取到token
    config.headers['Authorization'] = getToken() // 携带token
}
        return config;
    },
    error => {
        console.log("axios中request报错", error);
        return Promise.reject(error);
    }
)

// response  拦截器 获取后台数据前拦截
service.interceptors.response.use(
    response => {
        const code = response.data.code || 200 ;//若未设置默认成功状态
        switch (code) {
            case 200://为200执行该行
                return response.data;//成功直接返回
            case 1300://为1300执行该行
                MessageBox.confirm("登录状态已过期，重新登录", "系统提示", {
                    confirmButtonText: "重新登录",
                    type: "warning",
                    showCancelButton: false,
                    showClose: false
                }).then(() => { window.location.href = '/' })//跳转登录页
                    .catch(() => { window.location.href = '/' })//跳转登录页
                return response.data
            default://都不相同执行该行
                return response.data
        }
    },
    error => {
        console.log("axios中response报错", error);
        Message({
            showClose: true,
            message: error.message,//弹出失败原因
            type: 'error'
        })
        return Promise.reject(error);
    }
)

export default service;

 3.可添加防抖，防止请求多个接口返回状态码均为失效时，MessageBox被连续触发

//引入防抖
const debounce = (() => {
    let timer = null
    return (callback, wait) => {
        clearTimeout(timer)
        timer = setTimeout(callback, wait)
    }
})()

        switch (code) {
            case 200://为200执行该行
                return Promise.reject(error);//成功直接返回
            case 1300://为1300执行该行
                debounce(() => {
                    MessageBox.confirm("登录状态已过期，重新登录", "系统提示", {
                        confirmButtonText: "重新登录",
                        type: "warning",
                        showCancelButton: false,
                        showClose: false
                    }).then(() => { window.location.href = '/' })//跳转登录页
                        .catch(() => { window.location.href = '/' })//跳转登录页
                }, 5000)
                return Promise.reject(error)
            default://都不相同执行该行
                return Promise.reject(error)
        }