axios拦截器中添加 加载中....效果

直接看代码

先新建一个加载中的vue页面
代码可以参考下图

<template>
    <div class="markbox">
      <div class="sun-loading"></div>
    </div>
  </template>

  <style scoped>
      /*loading开始*/
      .markbox{
        background-color: rgb(255, 255, 255,0.1);
        
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1
      }
    .sun-loading {
       overflow: hidden;
        background: url('../..//assets/img/pend.gif') 0 0 no-repeat;//动态gif图
        background-size: 50%;
        margin:auto;
        position:absolute;
        top: 12rem;
        left: 35rem;
        bottom: 0;
        right:0;
    }
    /*loading结束*/	
  </style>

1、新建一个store.js
里面代码是这样色儿滴
定义一个loading来控制加载中效果的展示和隐藏

2、在你的main.js 加上下面这个代码
引入到main.js中

3、在App.vue 中
判断一下状态里面的loading参数 如果为真显示加载中效果

4、在axios中request请求拦截器中 在return config 前加上下面的代码

 store.state.loading = true;//显示加载中效果

5、在axios中response响应拦截器中 在return response前加上下面的代码

store.state.loading = false;//隐藏加载中效果

完事儿！！