预备

• 应用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

版权声明： 该文章由博主编辑 , 转发请说明出处感谢！