设置全局拦截，请求开始前设置状态为加载。
设置全局拦截，请求结束后设置状态为完成。
在触发请求的函数中进行拦截，触发前设置为加载，触发后设置为完成。
判断请求后的数据是否为非空，如果非空则设置为完成
最终可以实现的情况上，进行全局拦截设置，然后局部的判断是最容易想到也是最容易实现的方案。给每个触发的函数设置
before和
after看起来美好，但实现起来简直是灾难，我们并没有
before和
after这两个函数钩子来告诉我们函数什么时候调用了和调用完了，自己实现吧坑很多，不实现吧又没得用只能去原函数里一个个写上。只判断数据局限性很大，只有一次机会。既然是即插即用的插件，使用起来就得突出一个简单易用，基本思路上也是使用全局拦截，但局部判断方面与常规略有不同，使用数据绑定(当然也可以再次全局响应拦截)，咱们实现起来吧~。
样式
Loading嘛，必须得有一个转圈圈才能叫Loading，样式并不是这个插件的最主要的，这里直接用CSS实现一个容易实现又不显得很糙的：
<template>
<div class="loading">
</div>
</template>
...
<style scoped>
.loading {
width: 50px;
height: 50px;
border: 4px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-left-color: red;
animation: loading 1s infinite linear;
}@keyframes loading {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
</style>
固定大小50px的正方形，使用
border-radius把它盘得圆润一些，
border设置个进度条底座，
border-left-color设置为进度条好了。演示地址
绑定数据与URL
提供外部使用接口
上面思路中提到，这个插件是用全局拦截与数据绑定制作的：
暴露一个 source 属性，从使用的组件中获取出要绑定的数据。
暴露一个 urls 属性，从使用的组件中获取出要拦截的URL。
<template>
...
</template>
<script>
export default { props: {
source: {
require: true
},
urls: {
type: Array,
default: () => { new Array() }
