vue.js - vue2封装的ajax请教的fetch.js如何显示错误消息

问题描述

问 题

vue2的项目，使用了axios作为ajax请求。
大量axios请教，页面ajax相关代码太冗余，也不方便对有些系统错误做处理。
想封装axios，写了一个utils/fetch.js 里面封装了axios。
我有个专门显示错误消息的组件alertTip.vue，平时页面使用是需要嵌入到template的<alert-tip :alertText="消息"></alert-tip>
问题是如何在fetch.js里面调用我的 alertTip.vue组件并传一个消息参数啊？
这个问题困扰了很久了，求赐教。

解决方案

首先，你需要一个全局实例（非 Vue 实例）的接口，能够在 js 文件中调用该接口：

import { AlertInstance } from 'AlertInstance';
AlertInstance.alert('some text')

第二，这个全局实例需要手动渲染 AlertTip Vue 组件:

document.body.appendChild(instance);

实现起来比较复杂，可以参考 Vue 组件库中全局 Message 或 Notification 类组件的实现：

• Element UI - Notification

这篇关于vue.js - vue2封装的ajax请教的fetch.js如何显示错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！