vue全局封装 loading

1.创建文件src/plugins/logding/loading.vue

<template>
    <div class="bg" v-show="showloading">
        <div class="circle" ></div> 
        <!-- <img src="../../assets/loading.gif" alt=""> -->
		<span>加载中...</span>
    </div>
</template>

<script>
    export default {
        props:{
            showloading:{
                type:Boolean,
                default:false
            }
        }
    }
</script>

<style lang="less" scoped>
    @keyframes move {
        0%{
            transform: rotate(0deg)
        }
        100%{
            transform: rotate(360deg)
        }
    }
    .bg{
        position:fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background: rgba(186, 183, 183, 0.3);
        display: flex;
		flex-direction:row;
        justify-content: center;
        align-items: center;
        z-index:100;
        .circle{
             width:46px;
             height: 46px;
            border:5px solid #a2a2a2;
            border-radius:40px;
             border-left-color:transparent;
            animation: move linear 500ms infinite;
         }
        img{
          width: 52px;
          height: 52px;
        }
		span{
		  font-size: 42px;
		  margin-left: 16px;
		  color: #a2a2a2;
		}
    }
</style>

2.创建文件src/plugins/logding/index.js

import loadingTem from "./loading.vue"

const loading = {
  install:(Vue,options)=>{
    let loadingVue = Vue.extend(loadingTem);
    let vm = new loadingVue(); 
    document.body.appendChild(vm.$mount().$el);
    Vue.prototype.$showLoading = ()=>{
      vm.showloading = true;
    }
    Vue.prototype.$hideLoading = ()=>{
      vm.showloading = false;
    }
  }
}

export default loading;

3.创建文件src/utils/request.js

// 导入axios
import Vue from 'vue';
import axios from 'axios'


//1. 创建新的axios实例，
const service = axios.create({
	headers: {
		'Content-Type': 'application/json',
		// 'X-Client-DeviceId': 'WebClient',
		// 'X-Client-DeviceType': 'WebClient',
		// 'X-Client-Version': '1.0.0.0'
		// 'X-Client-AgentId': 37
	},
	//baseURL: 'http://127.0.0.1:8181/',
	baseURL: 'http://xxx.xxx.x.xxx:xxxx/',
	timeout: 3 * 1000
})


//请求拦截器
service.interceptors.request.use(config => {
    // 打开全局loading
	Vue.prototype.$showLoading();
	return config
}, error => {
	return Promise.reject(error)
})

// 3.响应拦截器
service.interceptors.response.use(response => {
	//关闭loading
	Vue.prototype.$hideLoading()
	// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
	if (response.status === 200) {
		return Promise.resolve(response.data);
		// 否则的话抛出错误
	} else {
		return Promise.reject(response);
	}
	// return response
}, error => {
	// return Promise.resolve(error.response)
	return Promise.resolve(error)
})


export default service

main.js引入

import loading from "./plugins/loading/index.js"
Vue.use(loading) // 全局使用loading

src/api/index.js

import service from '../utils/request'

export function postListAPI(data) {
	return service({
		url: 'WX0010/endpoint',
		method: 'get',
		data
	})
}


//贷款查询列表
export function postListAPI(data) {
	return service({
		url: 'WX0010/endpoint',
		method: 'post',
		data
	})
}

接口调用

//get
loanableLines().then((res) => {
//接口调用成功
}).catch((err) => console.log(err)); //接口调用失败

//post
loanableLines(data).then((res) => {
//接口调用成功
}).catch((err) => console.log(err)); //接口调用失败