为vue项目自动设置请求状态的配置方法
前端  /  管理员 发布于 4年前   261
在进入一个页面的时候,一般在获取数据的同时,会先显示一个 loading ,等请求结束再隐藏 loading 渲染页面,只需要用一个属性去记录请求的状态,再根据这个状态去渲染页面就好了
async handler() { this.loading = true await fetch() this.loading = false}
虽然是很简单的功能,可是要处理的地方多的时候,还是很繁琐的,就想着能不能统一设置处理请求的 loading ,然后页面根据 loading 的状态决定要显示的内容,就根据自己的想法做了一些封装,自动给所有 ajax 请求设置 loading 状态,主要思路是把所有请求集中到单一实例上,通过 proxy 代理属性访问,把 loading 状态提交到 store 的 state 中
安装
$ npm install vue-ajax-loading
演示
在线demo(打开较慢)
使用
配置 store 的 state 及 mutations
import { loadingState, loadingMutations } from 'vue-ajax-loading'const store = new Vuex.Store({ state: { ...loadingState }, mutations: { ...loadingMutations }})
把所有请求集中到一个对象上
import { ajaxLoading } from 'vue-ajax-loading'import axios from 'axios'import store from '../store' // Vuex.Store 创建的实例axios.defaults.baseURL = 'https://cnodejs.org/api/v1'// 把请求集中到单一对象上,如:const service = { global: { // 全局的请求 getTopics() { return axios.get('/topics') }, getTopicById(id = '5433d5e4e737cbe96dcef312') { return axios.get(`/topic/${id}`) } }, modules: { // 有命名空间的请求,命名空间就是 topic topic: { getTopics() { return axios.get('/topics') }, getTopicById(id = '5433d5e4e737cbe96dcef312') { return axios.get(`/topic/${id}`) } } }}export default ajaxLoading({ store, service})
完成以上配置之后,通过上面 export default
出来的对象去发送请求,就会自动设置请求的状态,然后可以在组件内通过 this.$store.state.loading
或 this.$loading
去访问请求状态,如:
getTopics 定时两秒 topic.getTopics import api from 'path/to/api'export default { methods: { handler1() { api.getTopics() }, handler3() { api.topic.getTopics() }, delay() { api.delay() } }}
Options
store
Vuex.Store 创建的实例
service
包含所有请求的对象,可以配置 global 和 modules 属性
总结
以上所述是小编给大家介绍的为vue项目自动设置请求状态的配置方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号