准备

利用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 iviewmain.js
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

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

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 同上面代码

效果展示

本文作者：茅野zhy
博客链接：www.zhysama.xyz
版权声明：该文章由博主编辑 , 转发请注明出处谢谢！

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

springboot + vue 后台token生成拦截器 redis实现前台封装axios xueX 接口实现
后台后台程序图片新建token的基础类 public class Constants {public final static String TOKEN = "token";} ...
封装axios加载动画Loding——vuex+axios拦截器
封装axios加载动画Loding--vuex+axios拦截器前言:我们在axios发送请求时候,会存在请求等待时长,我们一般会加一个动画,如果很多个时候一个一个的加动画代码看起来很臃肿很冗余,我 ...
Vue学习笔记：axios 拦截器的用法
Vue学习笔记:axios 拦截器的用法什么是axios 拦截器? 拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是 ...
axios拦截器应用场景
一:什么是axios拦截器.为什么要使用axios拦截器? 在vue项目中,我们通常使用axios与后台进行数据交互,axios是一款基于promise封装的库,可以运行在浏览器端和node环境中.它 ...
全局配置axios、axios 拦截器和 proxy 跨域代理
目录一.全局配置axios 1. 为什么要全局配置 axios 2. 如何全局配置 axios 3. 在 vue3 的项目中全局配置axios 4. 在 vue2 的项目中全局配置 axios ...
axios拦截器的原理及应用
1-1 应用场景: 1. 请求拦截器用于在接口请求之前做的处理,比如为每个请求带上相应的参数(token,时间戳等) 返回拦截器用于在接口返回之后做的处理,比如对返回的状态进行判断(token是否过期 ...
axios 拦截器及其实现过程
一.axios 拦截器 axios 拦截器,代码如下所示: <!DOCTYPE html> <html lang="en"> <head>< ...
axios vue 加载效果动画_vue中使用axios拦截器实现数据加载之前的loading动画显示 @劉䔳...
首先新建一个 loading.vue组件,写loading动画效果 .loader { width: 100%; height: 100%; display: flex; align-items: c ...
Vue的axios拦截器
Vue的axios拦截器为什么要使用拦截器? 在页面发送http请求,很多情况我们要对请求和其响应进行特定的处理,如:判断token,设置请求头.如果请求数非常多,单独对每一个请求进行处理会变得 ...
【vue开发问题-解决方法】（八）利用axios拦截器实现elementUI中加载动画，控制加载区域
[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加载动画,控制加载区域参考文章: (1)[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加 ...

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

准备