axios全局提示+状态管理+路由跳转

212 阅读1分钟

前言

在日常的生活中,我们调用不同的接口一般返回值是200,但是不可避免的会出现一些特殊情况,遇到特定的返回值要进行跳转,遇到特定的返回值要进行不同的message提示。。。。。

准备工作

首先我们用的是elementui,使用的框架是vue.

ok,话不多说直接上代码:

http.js:

import axios from 'axios'
// 创建一个axios实例 在其中设置超时时间和响应头
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
import { Notification } from 'element-ui';  //引入组件
const http = axios.create({
    baseURL: '/xxx', // api 的 base_url
    headers: {
        'Content-Type': 'application/json;charset=utf-8', 'BsmAjaxHeader': true
    }
})
/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
    config.cancelToken=source.token;
    return config
}, error => {
    return Promise.reject(error)
})
/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
    const code = response.status;
    switch (code){
        case 200 :
            Notification({
                title: '成功',
                message: '这是一条成功的提示消息',
                type: 'success'
            })
            break;
        case 500:
            Notification({
                title: '错误',
                message: '接口不通',
                type: 'error'
            })
            break;
        case 404:
            Notification({
                title: '警告',
                message: '这是一条警告的提示消息',
                type: 'warning'
            })
            break;
        case 501:
            Notification({
                title: '消息',
                message: '这是一条提示消息',
                type: 'info'
            })
            break;
    }
    return response
}, error => {
    return Promise.reject(error)
})

export default http

遇到特定的返回值要进行路由跳转

那就来个最简单的:

case 510:   //证书过期
    Notification({
        title: '消息',
        message: '证书已过期,请颁发新的证书使用',
        type: 'info'
    })
    location.href = '你要跳转的地址'; 
    break;

遇到特定的值要进行状态修改

首先是store里面的状态值:

store.js:

1668419133081.png

state: {
    isLogin: false,
    baseURL: {
        picAddr: '',
        zsAddr: '',
        jxszsAddr: '',
        syAddr: '',
        logoUrl: '',
        companyUrl: ''
    },
    userInfo: {},
    testdata:1,
},


changetestdata(state,data){
    state.testdata = data;
}

然后是http.js

1668419457140.png

case 520:   //权限发生了改变
    Notification({
        title: '消息',
        message: '权限已重置',
        type: 'info'
    })
    store.commit('changetestdata','1000');
    break;

总结:

希望能对大家有所帮助,如果没有适合你的,请先留言,只要是力所能及的,一定会第一时间给出答复