VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 为vue项目自动设置请求状态的配置方法

    建站教程 2019年11月09日 关键词:,,

    在进入一个页面的时候,一般在获取数据的同时,会先显示一个 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动态加载请求获取图片的方法

    广而告之:
    热门推荐:
    Zend Framework校验器Zend

    本文实例讲述了Zend Framework校验器Zend_Validate用法。分享给大家供大家参考,具体如下: 引言: 是对输入内容进行检查,并生成一个布尔结果来表明内容是否被成功校验的机制。 如果isValid()方法返回False,子类的getMessage()方法将返回一个消息数组来解释校验失败的原因。 ···

    DedeCMS新发布图集排序在最前的方法

    由于本人做的网站需要经常增加图片。每次增加新的图片(注意:是往已经建立好的图集里面增加新的图片而不是创建新图集)默认都是排列在最后面,现总结出如何让新加的图片显示在前面。 找到如下文件 include/taglib/channel/img.lib.php 大约在70行左右    ···

    PHP 获取文件权限函数介绍

    复制代码 代码如下:/* * substr 返回字符串的子串 * base_convert  在任意进制之间转换数字 * fileperms  取得文件的权限 */// 获取权限function getChmod($filepath){    return substr(base_convert(@fileperms($filepat···

    Nodejs libuv运行原理详解

    前言 这应该是Nodejs的运行原理的第7篇分享,这篇过后,短时间内不会再分享Nodejs的运行原理,会停更一段时间,PS:不是不更,而是会开挖新的坑,最近有在研究RPG Maker MV,区块链,云计算,可能会更新一些相关文章,或者相关教学。 回到正题,异步编程的难点在于请求与响应不···

    用灵动标签做的友情连接帝国cms教程

    [e:loop={'select * from [!db.pre!]enewslink where checked=1 order by lid',20,24,0}]<a href="<?=$bqr[lurl]?>"><?=$bqr[lname]?></a>[/e:loop]

    解析PHP实现多进程并行执行脚本

    由于php的进程是不支持多线程的,有些场景为了方便以及提高性能,可以用php实现多进程以弥补这个不足:复制代码 代码如下:#!/usr/bin/env php<?php$cmds=array(        array('/apps/bin/launcher.php','charge/promotion_props_s···

    ThinkPHP采用<volist>实现三级循环代码实例

    本文以实例描述了ThinkPHP采用<volist>标签实现三级循环代码,具体操作步骤如下: 1. 三级循环需要三维数组,实现代码如下: function MakeTree($pid,$level) { $map['pid'] = $pid; $map['level'] = $level; $result = $this->where($map)->order('rank ASC'···

    php mysql procedure实现获取多个结果集的方法【基于thinkPHP】

    本文实例讲述了php mysql procedure实现获取多个结果集的方法。分享给大家供大家参考,具体如下: protected function getRs($id) { $db = new mysqli(C("DB_HOST"), C("DB_USER"), C("DB_PWD"), C("DB_NAME"), C("DB_PORT")); if (mysqli_connect_errno()) thr···

    PHP遍历文件夹与文件类及处理类用法实例

    本文实例讲述了PHP遍历文件夹与文件类及处理类用法,非常具有实用价值。分享给大家供大家参考。具体方法如下: FindFile.class.php类文件用于遍历目录文件,具体代码如下: <?php /** 遍历文件夹及文件类 * Date: 2013-03-21 * Author: fdipzone * Ver: 1.0 ···

    vue2.0实现音乐/视频播放进度条组件

    基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度;时间实时更新。 ②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区···