场景

在后台系统中，每次接口提交的时候都需要添加一个loading来告知用户我们正在进行系统操作，但是这样需要我们反复复制代码，并且需要再三确保loading关闭的时机，低劳动且容易忘记

解决

在全局的axios添加服务loading，根据api配置的参数判断是否展示loading，根据接口状态来添加和关闭loading
第一步：axios添加loading服务

  2. // axios.js
  3. import { Loading } from 'element-ui';
  4. // 全局loading
  5. let loadingInstance;
  6. axios.interceptors.request.use((config) => {
  7.     // ...一些其他操作
  8.     // 判断api中是否有loading参数，有就展示全局loading
  9.     if (config.loadingOptions) {
  10.       loadingInstance = Loading.service(config.loadingOptions);
  11.     }
  12. }, (error) => {
  13.     // 请求错误关闭loading
  14.     loadingInstance && loadingInstance.close();
  15.     // 一些其他操作
  16. });
  17. // 返回状态判断(添加响应拦截器)
  18. axios.interceptors.response.use(response => {
  19.     // 响应成功关闭loading
  20.     loadingInstance && loadingInstance.close();
  23. }, error => {
  24.     // 响应失败关闭loading
  25.     loadingInstance && loadingInstance.close();
  26. });

第二步：在想要加loading的接口中加入标识

  1. const getCityConfig = (params) => axios.get(getCityConfigApi, {
  2.     params,
  3.     loadingOptions: {
  4.         fullscreen: true,
  5.         text: '请稍等...'
  6.     }
  7. });