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

102次阅读

共计 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 同上面代码
效果展示