问题
在实际项目中,前端发送请求获取数据刷新页面是大家非常熟悉的操作。请求响应的快慢,与业务逻辑的复杂程度和网络环境有关,很有可能出现请求延迟的情况,如果我们不处理请求响应前后的交互,那么页面在请求响应成功之前这段事件就没有任何提示信息,这是非常影响用户体验的。但是如何为每个请求单独处理loading
状态,那么工作量是非常大的。
axios
是我们开发中常用的请求工具库,并且和vue能很好的搭配。下面向大家介绍我自己在项目中使用axios
配置来完场全局的loading
状态处理
store状态记录
index.js
1 | import Vue from "vue"; |
axios 配置
axios/index.js
1 | /** |
vue项目中使用
我的项目中应用了vue的UI组件库—-vant
,使用其提供的Toast
组件即可完成loading状态的交互。
具体使用main.js
1 | import Vue from "vue"; |
最后,我们在项目根组件App.vue
中监听 isAppending
状态即可app.vue
1 | <template> |
大功告成了!