vue接口封装加载loading过渡效果

新建api/axiosFun.js

封装接口分成了两种方法

• 通用方法不带token接口调用，例如登录接口
• 公用方法，登录成功之后，携带token接口调用

注意事项

• 方法里面有相应的针对某个路由判断组件页面是否使用loadding效果加载，这个可以根据需要添加

import Router from '@/router/index';

if(Router.currentRoute.path!="/first/first" && Router.currentRoute.path!="/center/myCenter"){
        store.commit("showLoading");
}

完整代码： 

1.接口封装

import axios from 'axios';
import Vue from 'vue';
import Router from '@/router/index';
import store from "../vuex/store";//为了使用loading
import { Toast,Dialog } from 'vant';
Vue.use(Toast);
Vue.use(Dialog);
 
//通用方法，不带token
const reqNull = (method, url, params) => {
    return axios({
        method: method,
        url: url,
        headers: {
            'Content-Type': 'application/json',
            // 'Content-Security-Policy': 'upgrade-insecure-requests'
        },
        data: params
    }).then(res => res.data);
};
 
// 通用公用方法
const req = (method, url, params) => {
    if(Router.currentRoute.path!="/first/first" && Router.currentRoute.path!="/center/myCenter"){
        store.commit("showLoading");
    }
    return axios({
        method: method,
        url: url,
        headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${localStorage.getItem('token')}`
        },
        data: params
    }).then(res => {
        store.commit("hideLoading");
        if (Number(res.data.code) == Number(403)) {
            Toast.fail({
                message: res.data.msg,
                onClose: () => {
                    localStorage.clear();
                    sessionStorage.clear();
                    Router.push({ path: "/" });
                }
            })
        }else if(Number(res.data.code)==Number(405)){
            
            Dialog.confirm({
                title: '提示',
                message: '您还没有提交认证，请认证',
                confirmButtonText: '去认证',
                cancelButtonText: '取消',
            })
            .then(() => {
                if(localStorage.getItem("loginType")==0){
                    Router.push({path:"/personConfirm"})
                }else{
                    Router.push({path:"/companyConfirm"})
                }
            }).catch(err=>{})
        }else if(res.data.code==-2){
            Toast('您已提交认证，请耐心等待审核');
        }else if(res.data.code==-3){
            Dialog.confirm({
                title: '提示',
                message: '您认证未通过，请重新提交认证',
            })
            .then(() => {
              
                if(localStorage.getItem("loginType")==0){
                    Router.push({path:"/personConfirm"})
                }else{
                    Router.push({path:"/companyConfirm"})
                }
            }).catch(err=>{})
 
        }else {
 
            let resData = res.data;
            return resData;
        }
    }).catch(error => {
        store.commit("hideLoading");
        
    });
};
 
 
 
export {
    req,
    reqNull
}

2.加载loading方法：

• 新建components/loading.vue组件

<template>
  <div class="loading">
    <van-loading class="loadingVant" vertical type="spinner" color="#1989fa">加载中</van-loading>
  </div>
</template>
 
<script>
  export default {
    name: 'loading',
    data () {
      return {}
    },
  }
</script>
<style scoped lang="scss">
.loading{
  position: fixed;
  // top:20%;
  // left:50%;
  z-index:12100;
  // transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: transparent;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  .loadingVant{
    position: absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%);
  }
  .van-loading__text{
    color:#1989fa;
  }
}
</style>

• App.vue引入loading组件

<template>
  <div id="app">
    <Loading v-show="loading"></Loading>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件 -->
      </router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive">
      <!-- 这里是不被缓存的视图组件 -->
    </router-view>
    
  </div>
</template>

<script>
import { mapState } from "vuex";
import Loading from "./components/loading";
export default {
  components: {
    [Button.name]: Button,
    Loading
  },
  name: "App",
  data() {
    return {
     
    };
  },
    
  computed: {
    ...mapState(["loading"])
  }
  
  
};
</script>

• 新建store.js 

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        loading: false
    },
    getters: {

    },
    mutations: {
        showLoading(state) {
            state.loading = true;
        },
        hideLoading(state) {
            state.loading = false;
        }

    }
})

发文不易，点赞、收藏、评论、关注一下呗！