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 相关文章推荐
jquery实现submit提交表单
Feb 03 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
javascript事件模型介绍
May 31 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
详解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从memcache读取数据再批量写入mysql的方法
2014/12/29 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
JavaScript 学习技巧
2010/02/17 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python 探针的实现原理
2016/04/23 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Python常用断言函数实例汇总
2020/11/30 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
捐献物资倡议书范文
2014/05/19 职场文书
检讨书格式范文
2015/05/07 职场文书
靠谱的活动总结
2019/04/16 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android