为vue项目自动设置请求状态的配置方法


Posted in Javascript onJune 09, 2019

在进入一个页面的时候,一般在获取数据的同时,会先显示一个 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(打开较慢)

为vue项目自动设置请求状态的配置方法 

使用

配置 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 去访问请求状态,如:

<el-button type="primary" :loading="$loading.getTopics" @click="handler1">getTopics</el-button>
<el-button type="primary" :loading="$loading.delay" @click="delay">定时两秒</el-button>
<el-button type="primary" :loading="$loading.topic.getTopics" @click="handler3">topic.getTopics</el-button>

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 属性

  • global:全局作用域的请求,可以设置为 对象 或 数组对象
  • modules:带命名空间的请求,类型为 对象 ,属性名即为命名空间

总结

以上所述是小编给大家介绍的为vue项目自动设置请求状态的配置方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
vue 组件开发原理与实现方法详解
Nov 29 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 #Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 #Javascript
详解Node.js异步处理的各种写法
Jun 09 #Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 #Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 #Javascript
微信小程序与webview交互实现支付功能
Jun 07 #Javascript
在微信小程序中使用vant的方法
Jun 07 #Javascript
You might like
微博短链接算法php版本实现代码
2012/09/15 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
brook javascript框架介绍
2011/10/10 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
机关办公室岗位职责
2014/04/16 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
大学生赌博检讨书
2014/09/22 职场文书
国家助学金受助感言
2015/08/01 职场文书
早安问候语大全
2015/11/10 职场文书