Vue基于vuex、axios拦截器实现loading效果及axios的安装配置


Posted in Javascript onApril 26, 2019

准备

  • 利用vue-cli脚手架创建项目
  • 进入项目安装vuex、axios(npm install vuex,npm install axios)

axios配置

项目中安装axios模块(npm install axios)完成后,进行以下配置:

main.js

//引入axios
import Axios from 'axios'
//修改原型链,全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求
Vue.prototype.$axios=Axios

loading组件

我这里就选择使用iview提供的loading组件,

npm install iview

main.js
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

安装引入后,将loading写成一个组件loading.vue

Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

Vuex state状态设置控制loading的显隐

store.js(Vuex)

export const store = new Vuex.Store({
  state:{
    isShow:false
  }
})

在state中定义isShow属性,默认false隐藏

v-if="this.$store.state.isShow"

为loading组件添加v-if绑定state中的isShow

组件使用axios请求数据

<button @click="getData">请求数据</button>
methods:{
    getData(){
      this.$axios.get('https://www.apiopen.top/journalismApi')
      .then(res=>{
        console.log(res)//返回请求的结果
      })
      .catch(err=>{
        console.log(err)
      })
    }
  }

我这里使用一个按钮进行触发事件,利用get请求网上随便找的一个api接口,.then中返回请求的整个结果(不仅仅包括数据)

Axios拦截器配置

main.js

//定义一个请求拦截器
Axios.interceptors.request.use(function(config){
 store.state.isShow=true; //在请求发出之前进行一些操作
 return config
})
//定义一个响应拦截器
Axios.interceptors.response.use(function(config){
 store.state.isShow=false;//在这里对返回的数据进行处理
 return config
})

分别定义一个请求拦截器(请求开始时执行某些操作)、响应拦截器(接受到数据后执行某些操作),之间分别设置拦截时执行的操作,改变state内isShow的布尔值从而控制loading组件在触发请求数据开始时显示loading,返回数据时隐藏loading

特别注意:这里有一个语法坑(我可是来来回回踩了不少次)main.js中调取、操作vuex state中的数据不同于组件中的this.$store.state,而是直接store.state 同上面代码

效果展示

Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

Vue基于vuex、axios拦截器实现loading效果及axios的安装配置

总结

以上所述是小编给大家介绍的Vue基于vuex、axios拦截器实现loading效果及axios的安装配置,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
js word表格动态添加代码
Jun 07 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 #Javascript
vue组件间的参数传递实例详解
Apr 26 #Javascript
详解VUE前端按钮权限控制
Apr 26 #Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 #Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 #Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 #Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 #Javascript
You might like
PHP curl使用实例
2015/07/02 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
node的process以及child_process模块学习笔记
2018/03/06 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
Python中每次处理一个字符的5种方法
2015/05/21 Python
python实现读取命令行参数的方法
2015/05/22 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python学生管理系统代码实现
2020/04/05 Python
python矩阵的转置和逆转实例
2018/12/12 Python
Numpy之random函数使用学习
2019/01/29 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
python 如何对logging日志封装
2020/12/02 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
优秀共产党员先进事迹
2014/01/27 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
学生自我评语
2015/01/04 职场文书
索赔员岗位职责
2015/02/15 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android