如何使用vant库的loading组件

第一步，main.js文件引入下载的loading

//全局引入ui组件
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

第二步，在vuex中定义全局变量loading，定义修改loading变量显示隐藏的方法

export default new Vuex.Store({
  state: {
    isShow: false,
  },
  mutations: {
    // 展示loading的方法
    showLoading(state) {
      state.isShow = true
    },
    // 隐藏loading的方法
    hideLoading(state) {
      state.isShow = false
    },
  },
  actions: {},
  modules: {}
})

第三步，在App.vue主文件中引入全局变量loading在页面使用

<template>
  <div id="app">
    <router-view />
    <van-loading
      v-show="isShow"
      size="24px"
      color="#1989fa"
      vertical
    >加载中...</van-loading>
  </div>
</template>

import { mapState } from 'vuex'

computed: {
    ...mapState(['isShow'])
  },

// van-loading设置样式，在页面最中间显示
<style lang="less">
.van-loading {
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}
</style>

第五步，在请求拦截器中和响应拦截器中统一设置loading

// 2.请求拦截器
service.interceptors.request.use(config => {
  store.commit('showLoading');
  //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
  // config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
  //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
  // const token = window.sessionStorage.getItem('Admin-Token'); //这里取token之前，需要先拿到token,存一下
  const token = getToken()
  // console.log(token,'token456');
  if (token) {
    config.headers['X-HRSS-SERVICE-TOKEN'] = token
  } else {
    setTimeout(() => {
      // this.$message({
      //   message: '此链接已过期',
      //   type: 'warning'
      // });
      window.location.href = localStorage.getItem('return-Url')
    }, 2000);
  }
  return config;
}, error => {
  store.commit('hideLoading');
  return Promise.reject(error);
})


// 3.响应拦截器
service.interceptors.response.use(response => {
  // debugger
  store.commit('hideLoading');
  // console.log(response, 'response');
  const {
    data,
    // config
  } = response;
  // console.log(data,'data')
  if (data.code !== 200) {
    switch (data.code) {
      case 401:
        break;
      case 404:
        break;
      case 403:
        break;
      default:
        break;
    }

    return Promise.reject({
      // url: config.url,
      // code: data.code,
      // data: data.data,
      // msg: data.msg,
      ...data,
    } || "Error");
  } else {
    return data;
  }
}, error => {
  store.commit('hideLoading');
  console.log(error)
  if (error && error.response) {
    // 1.公共错误处理
    // 2.根据响应码具体处理
    switch (error.response.status) {
      case 400:
        error.message = '错误请求'
        break;
      case 401:
        error.message = '未授权，请重新登录'
        break;
      case 403:
        // 后端返403时就是token过期了，此时清空token并且跳转页面
        error.message = '拒绝访问'
        break;
      case 404:
        error.message = '请求错误,未找到该资源'
        break;
      case 405:
        error.message = '请求方法未允许'
        break;
      case 408:
        error.message = '请求超时'
        break;
      case 500:
        error.message = '服务器端出错'
        break;
      case 501:
        error.message = '网络未实现'
        break;
      case 502:
        error.message = '网络错误'
        break;
      case 503:
        error.message = '服务不可用'
        break;
      case 504:
        error.message = '网络超时'
        break;
      case 505:
        error.message = 'http版本不支持该请求'
        break;
      default:
        error.message = `连接错误${error.response.status}`
        break;
    }
  } else {
    // 超时处理
    if (JSON.stringify(error).includes('timeout')) {
      // Message.error('服务器响应超时，请刷新当前页')
    }
    // Message.error('连接服务器失败')
  }
  // Message.error(error.message);
  return Promise.reject(error);
})

完毕。