vue之axios请求统一拦截element-ui多次弹窗只弹一次优化
文章 463 0 0 0
发布时间:2021年04月05日

概述

在我们使用vue全家桶+ElementUi的时候我们采用了axios全局请求状态请求拦截管理,而且还要给出用户对应的提示,那么我们会发现这个提示会弹出多个如下图:
vue之axios请求统一拦截element-ui多次弹窗只弹一次优化
现在只是两个提示,看到network当中的接口请求是不是也是对应的出现两个请求,那要是多个呢就会弹出多个,会导致整个屏幕上都是这样的提示,对我们的用户不是太友好,我们看着也不太舒服。

产生原因

axios的状态拦截只是拦截状态,虽然也会返回提示,但是他不是像我们知道的那样第一个错了就不会弹第二次,axios对所有的接口进行统一的管理,会依次执行完所有的接口,并且也会执行多次的弹窗操作。

产生代码

// 响应拦截器
$axios.interceptors.response.use(
    response => {
        const code = response.data.code;
        const msg = response.data.msg;
        if(code == 4){
            Toast.fail('当前登录已失效,请重新登录')
        } else {
            return Promise.reject(response)
        }
    },
    error => {
        return Promise.reject(error)
    }
);

解决办法

我们如何应该让这个弹窗只弹一次呢
新建一个弹窗文件alert.js

import {Message} from 'element-ui'
    // 私有属性,只在当前文件可用
const showMessage = Symbol('showMessage')
export default class domMessage {
    success (options, single = true) {
        this[showMessage]('success', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    error(options, single = true) {
        this[showMessage]('error', options, single)
    }
    [showMessage] (type, options, single) {
        if (single) {
            // 关键代码,判断当前页是否有el-message标签,如果没有则执行弹窗操作
            if (document.getElementsByClassName('el-message').length === 0) {
                Message[type](options)
            }
        } else {
            Message[type](options)
        }
    }
}

引入弹窗文件

import axios from 'axios'
import alertDom from './alert.js'
// 对象实例
const alertbox = new alertDom()
// 响应拦截器
$axios.interceptors.response.use(
    response => {
        const code = response.data.code;
        const msg = response.data.msg;
        if(code == 4){
            alertbox.warning({
                message: '当前登录已失效,请重新登录',
                type: 'warning'
            })
        } else {
            return Promise.reject(response)
        }
    },
    error => {
        return Promise.reject(error)
    }
);
评论专区