Axios - 批量同类型异常请求，只提示一次

场景

在使用 axios 处理请求的时候，在某些场景下，比如 token 过期，页面大量的请求会提示 “无权限” 的提示。导致页面不是很美观，且不友好。如图：

解决方法

本文使用的是 elementui 的 message 组件。主要思路是通过对 elementui 的 message 进行封装。保证当前只存在一个类型的 message 实例，从而控制了提示框的数量。组件代码如下：

import { Message } from 'element-ui'
let instance = null;
const newMessage = (op) => {
    if(instance) {
        instance.close();
    }
    instance = Message(op);
}

['error', 'success', 'info', 'warning'].foreach(type => {
	newMessage[type] = op => {
    	if(typeof op === 'string'){
            op = {
                message: op
            }
        }
        op.type = type;
        return newMessage(op);
    }
});

// 错误提示中使用
export default function handleMessage(data)  {
    if(data instanceof Error) {
        newMessage.error(data.message);
    }else if(typeof data === 'string') {
    	newMessage.error(data);
    }else {
    	newMessage.error(data.data.msg);
    }
    return window.Promise.reject(data);
}