交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 为vue项目自动设置请求状态的配置方法

    在进入一个页面的时候,一般在获取数据的同时,会先显示一个 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 去访问请求状态,如:

    <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项目自动设置请求状态的配置方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    您可能感兴趣的文章:

    • 解决vue axios的封装 请求状态的错误提示问题
    • 详解Vue-axios 设置请求头问题
    • vue中promise的使用及异步请求数据的方法
    • 在Vue中使用axios请求拦截的实现方法
    • vue src动态加载请求获取图片的方法

    广而告之:
    热门推荐:
    高效利用mysql索引指南

    前言 mysql 相信大部分人都用过,索引肯定也是用过的,但是你知道如何创建恰当的索引吗?在数据量小的时候,不合适的索引对性能并不会有太大的影响,但是当数据逐渐增大时,性能便会急剧的下降。 本篇是对 mysql 索引的一个归纳总结,如果有错误的地方,记得评论指出哦。 索引···

    深入本机影像生成器(Ngen.exe)工具使用方法详解

    先介绍一点背景知识;.Net程序在运行时会实时(JIT)编译,将.Net程序文件编译成cpu认识的汇编机器码。实时编译需要消耗额外的cpu和内存资源,这对于服务器端程序是无关紧要的,因为实时编译只在程序第一次运行时编译,之后就不需要再做了;如果你在做的是一个较大的winf···

    外包B2C网站与其他类型网站的seo优化技巧有什么不同?详解外包B2

    1、域名选择  当企业准备开发自己的B2C网站时,首先需要考虑的是如何为该网站获得一个“好”的域名。良好的域名是企业电子商务成功的条件。在选择域名时,需要考虑两个问题:一个是域名的后缀选择;另一个是域名选择。  一般来说,中国企业喜欢选择.com作为···

    JavaScript 经典效果集

    些很实用且必用的小脚本代码: 脚本1:进入主页以后自动播放声音  <embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true>  脚本2:进入主页后自动最大话,省的去在自己单击了  <script&g···

    php如何使用PHPAnalysis提取关键字中文分词

    需求:做SEO的keywords时,需要从标题或者正文里提取关键字 1.PHPAnalysis下载地址 https://github.com/feixuekeji/PHPAnalysis 下载后解压放到extend目录下(以tp5为例,其他目录也行) 2.封装 <?php /** * @auther: xxf * Date: 2019/8/19 * Time: 11:04 */ namesp···

    jQuery实现浮动层随浏览器滚动条滚动的方法

    本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下: 这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.n···

    jQuery EasyUI之验证框validatebox实例详解

    1.样式 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> ···

    当前比较流行的两款PHP加密、解密工具Zend Guard和iconCube介绍

    当前市场上较流行的对PHP进行上述加密授权的软件主要有二种: (1)Zend公司的ZendGuard。 (2)ionCube公司的ionCube PHP Encode。 ZendGuard只能对带有PHP标记或源码的文件进行加密(如:.php,inc等),对于其他不带有PHP标记的文本方式保存的文件不能进行加密操作,支持期限···

    分析影响网站稳定排名的几个关键因素

    很多朋友都在参与企业网站的优化,但在这个过程中,我们必须从网站一开始就坚持不懈地努力,不排名,逐步得到一个好的排名。然而,如何在获得排名后保持网站的权重和排名在一个更好和稳定的位置,是我们每个优化人员都值得考虑的问题。好吧,让我们继续讨论今天的话题,分析影···

    js实现简单模态窗口,背景灰显

    没什么好说的,都是js,用一个iframe将页面遮挡,iframe上面一个div层,js面向对象做的,其中有部分是js动态生成style。ModeWindow.js复制代码 代码如下:<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page<···