vue ajax封装loading extend store

通过vuex 进行loading数据管理

store

// 全局变量
const state = {
  // 页面加载时
  pageLoading: false,
  // 数据加载时
  dataLoading: false,

  // 音频图标
  calendaricon: 0,

};
// computed作用
const getters = {
  calendaricon: (state) => {
    return state.calendaricon;
  }
};
// 数据处理
const mutations = {
  // 数据加载时
  setDataLoading(state, payload) {
    state.dataLoading = payload;
  },
  }
  // 异步处理
import Axios from "axios";
const actions = {
  message() {
    return Axios.request({
      url: "/ajax/user/wx/information/detail",
      method: "get",
      params: {
        contentId: 408,
      },
    }).then((res) => {
      return Promise.resolve(res);
    });
  },
  }
 
 export default new Vuex.Store({
  // strict: process.env.NODE_ENV !== 'production',
  state,
  getters,
  mutations,
  actions,
});

app.vue

<template>
  <div>
    <keep-alive :include="routerlist">
      <router-view></router-view>
    </keep-alive>
    <loading v-model="$store.state.dataLoading"></loading>
  </div>
</template>
import loading from "@/components/common/loading";
export default {
  data() {
    return {
      routerlist: [],
    };
  },
   components: {
    loading,
  },

axios

import store from "store";

let num = 0;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    num++;
    if(nmu==1){
      store.commit("setDataLoading", true);
    }

   
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    num--
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
     num--;
    if (num == 0) {
      store.commit("setDataLoading", false);
    }
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
     num--;
    if (num == 0) {
      store.commit("setDataLoading", false);
    }
    return Promise.reject(error);
  });
  // 挂载原型|分布式描写都可以
  Vue.prototype.$http = Axios;
  Axios.post().then(res=>{})

vue extend 动态添加

! 注意:extend 新增的组件没有 router store 需要动态注册才行

//     import store from "store";
//     let data={
//       isload:true
//        }
//     let instance = new loading({
//      data,this.$router,store
//     }).$mount();
import load from '@/common/loading/loading'
const loading = Vue.extend(load)
let instance = new loading().$mount();
document.body.appendChild(instance.$el)
     
let num = 0;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    num++;
    if(nmu==1){
       Vue.nextTick(() => {
          instance.isload = true
          // show 和弹窗组件里的show对应，用于控制显隐
        })
    }

   
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    num--
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
     num--;
    if (num == 0) {
       Vue.nextTick(() => {
          instance.isload = true
          // show 和弹窗组件里的show对应，用于控制显隐
        })
    }
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
     num--;
    if (num == 0) {
        Vue.nextTick(() => {
          instance.isload = true
          // show 和弹窗组件里的show对应，用于控制显隐
        })
    }
    return Promise.reject(error);
  });
  // 挂载原型|分布式描写都可以
  Vue.prototype.$http = Axios;
  Axios.post().then(res=>{})