2020-07-27vue H5+添加全局loading

在全局App.vue

    <div v-if="$store.state.loading" class="loading">
      <van-loading type="spinner" vertical>加载中...</van-loading>
    </div>

store.js

    loading: false,//loading默认值
    // 开始loading
    startLoading(state) {
      if (state.requestNum == 0) {
        state.loading = true;
      }
      state.requestNum++;
    },
    // 结束loading
    endLoading(state) {
      state.requestNum--;
      if (state.requestNum <= 0) {
        setTimeout(() => {
          state.requestNum = 0;
          state.loading = false;
        }, 100);
      }
    },

现在分三种情况：
1、每个请求都加loading
那么我们只要在拦截器开始loading和结束loading

service.interceptors.request.use(
  // 在发送请求之前做些什么
  config => {
    store.commit("startLoading");//请求之前开始loading
    return config;
  },
  err => {
    console.log(err);
  }
);

// http response 拦截器
service.interceptors.response.use(
  response => {
    store.commit("endLoading"); //请求成功关闭loading
    return response;
  },
  error => {
    store.commit("endLoading");////请求失败关闭loading
    return Promise.reject(error);
  }
);

2、给需要的接口+loading，不需要的则不加（有些接口并不需要loading）
我们可以在封装的axios添加一个是否添加loading的参数

//预约详情
export function detail(data) {
    return axios({
        method: 'post',
        url: '/member/appointment/detail',
        data: data,
        showLoading:true//需要loading
    })
}

export function detail(data) {
    return axios({
        method: 'post',
        url: '/member/appointment/detail',
        data: data,
        showLoading:false//不需要loading
    })
}

然后在拦截器判断即可
如：

service.interceptors.request.use(
  // 在发送请求之前做些什么
  config => {
   //config是一个对象，里面包含着所有的参数
    config.showLoading && store.commit("startLoading");
    return config;
  },
  err => {
    console.log(err);
  }
);

3、第三种情况就是、当我们第一次进入列表页面需要loading，随后的筛选条件并不需要
所以我们进入列表页面的时候就直接在生命周期开始loading就行了，
然后请求结束后关闭即可
列表页面

  mounted() {
    this.$store.commit("startLoading");
    this.drugList();//这里面不需要＋任何的loading
  }

然后再拦截器请求结束结束loading即可

// http response 拦截器
service.interceptors.response.use(
  response => {
    store.commit("endLoading"); //请求成功关闭loading
    return response;
  },
  error => {
    store.commit("endLoading");////请求失败关闭loading
    return Promise.reject(error);
  }
);