让axios更加简洁地控制loading

前言

通常我们使用一个专门的变量控制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写法。