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

93次阅读

共计 1356 个字符,预计需要花费 4 分钟才能阅读完成。

准备

利用 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

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 版权声明:该文章由博主编辑 , 转发请注明出处谢谢!

正文完
 0