前言
通常我们使用一个专门的变量控制loading，我们总要惦记修改loading为true或false，如果一个页面有多个loading就很繁琐，增加心智负担，既然axios请求的时候一定是true，而有结果之后无论是成功还是失败，都一律是false，那么为什么我们不想一个简洁方案呢？
所以今天我提供一个使用axios的拦截器控制loading的办法。
Vue3环境下
1. 业务代码定义变量
第二个参数就是这个loading Flag。
const articleListLoading = ref(false);
2. 执行Ajax
listArticle(queryParams, articleListLoading).then(...);
3. API工厂函数
export function listArticle(params, loading) {
return request({
url: '...',
method: 'get',
params,
loading,
});
}
4. axios请求拦截器
service.interceptors.request.use(
(config) => {
// ... 其他原有代码
if (config.loading) {
config.loading.value = true;
}
// ... 其他原有代码
}
);
5. axios响应拦截器
service.interceptors.response.use(
(res) => {
// ... 其他原有代码
if (res.config.loading) {
res.config.loading.value = false;
}
// ... 其他原有代码
}
);
Vue2环境下
Vue2的困境在于，axios的config是对传参的深度拷贝，loading会丢失响应。
怎么办呢？
我提供的办法是使用Map，对于深拷贝，Map不会丢失地址引用。
1. 业务代码定义变量
注意new Map()参数的写法。
data(){
return {
articleListLoading: new Map([['value', false]]),
}
}
2. 注意html部分如何使用articleListLoading
<el-table v-loading="articleListLoading.get('value')">
...
3. 执行Ajax、API工厂函数、axios请求拦截器、axios响应拦截器
同Vue3写法。
