vue想在js文件里用this.$message("消息的方法"
2019-05-17 本文已影响0人
sproutZhang
开始写后台管理的这个项目时,用的vue-element-admin 这个后台框架,观察到写请求方法的时候统一写在一个api文件夹下,所以写自己的接口的时候就原封不动的照抄来了。是长这样的:

现在的回调还是分别写到每个组件里边的。直到遇见了一个需求改动: 接口返回状态码为101的时候,是登录超时,需要重新登录。这一个一个的去里边改动的话得改到猴年马月去了,指不定还会落下几个。并且过程中发现每个接口返回都需要写一个判断状态码为1的时候弹出错误。代码重复的地方太多了。
所以开始考虑能不能抽出一个单独请求数据的函数,所有的请求和数据处理都走这一个方法。只有code值等于0的时候再返回数据,其余统一处理。然后改成下面这样:

美滋滋的跑去试,结果$message报错了 ...
解决方法:
在js里的this这时指向的是window,没有给window注册这个方法,当然会报错了。这时只要单独引入就可以了,
import { Message } from 'element-ui';
引用: Message (options)
带状态图标的引用: Message.error(options)
手动关闭: Message.closeAll()
$router同理~