怎样优雅进行控制全局loading的显示

这篇文章将为大家详细讲解有关怎样优雅进行控制全局loading的显示，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

在很多后台管理系统中，发送请求的时候，需要打开一个loading，收到响应后，需要关闭这个loading,对于这种通用的逻辑，我一般是在axios拦截器中做这种处理，因为不是每个请求都需要全局显示loading，所以我在axios config中添加了一个标记showLoading, 用于标记发送请求之前是否需要显示loading，自然收到响应后，根据这个标记确定是否需要关闭loading，在axios拦截器中的代码如下：

axios.interceptors.request.use(  (config) => {    // config中不设置showLoading这个字段或者这个字段为true时，代表需要全局显示loading    if (config.headers.showLoading !== false) {      // 全局显示loading      Loading.showLoading();    }    return config;  },  (err) => {    return Promise.reject(err);  },);instance.interceptors.response.use(  (response) => {    const { config: { headers } } = response;    if (headers.showLoading !== false) {      // 关闭全局的loading      Loading.hideLoading();    }    return data;  });

我自己自然觉得上面那个实现自然满足要求了，但是偶然一次和后端同事聊起这个问题，后端同事说，这个前端的标记（showLoading）怎么能传递给后端服务器了，并且还说，如果是他和我对接，绝对不允许我这么做。然后我就懵逼了，因为想不到解决办法。

直到后来了解到洋葱模型，其实请求，响应天然的适用洋葱模型，如果给axios添加上洋葱模型，这个问题就自然而然解决了啊。下面讲解如何给axios添加洋葱模型，如果有了洋葱模型，axios拦截器就没有必要了，因为洋葱模型比axios拦截器更好用。

• 声明MiddleWareManager类，这个类是洋葱模型的具体实现，代码如下。

// 中间件管理器，用于添加，删除中间件。// 另外这个添加的中间件给谁用，也需要用参数（job）保存起来。class MiddleWareManager {  // 添加的中间件是给谁用的，我们用job标识，如果中间件是给axios用，那么这个job就是axios方法。  // middleWares用来保存中间件。  // job和中间件都是返回Promise对象的方法。  // 其中，job接受一个参数config，由最后一个中间件传递。  // 中间件接受两个参数，一个是他之前的中间件传递的config，一个是执行下一个中间件的方法。  constructor(job) {    // 这里默认加上axios请求    this.job = job;    this.middleWares = [];  }  use(middleWare) {    this.middleWares.unshift(middleWare);    return this;  }  remove(middleWare) {    const index = this.middleWares.indexOf(middleWare);    this.middleWares.splice(index, 1);    return this;  }  run(config) {    const { length } = this.middleWares;    function innerRun(config, index) {      // 如果中间件已经执行完毕，这直接job函数。      if (index >= length) {        return this.job(config);      }      // 否则执行下一个中间件函数      return this.middleWares[index](config, (config) => innerRun(config, index++));    }    innerRun(config, 0);  }}

• MiddleWareManager已经实现，接下来是讲解如何将MiddleWareManager和axios组合到一起使用。我们会定义一个request方法，当我们需要发送请求的时候，我们就统一调用request方法。

// middleWare1用于处理是否需要全局的显示loadingasync function middleWare1(config, next) {  // 查看config中是否有showLoading标记，如果没有或者为true， 则需要全局显示loading,   // 当接收到响应后，自然需要关闭loading  // 自然收到响应后，根据这个标记确定是否需要关闭loading  const { showLoading, ...rest } = config;  if (showLoading !== false) {    // 显示loading动画  }  const response = await next(rest);  if (showLoading !== false) {    // 关闭动画  }  return response;}// 组装MiddleWareManagerconst manager = new MiddleWareManager(axios);manager.use(middleWare1);// 实现request方法，用于发送请求function request(config) {  return manager.run(config);}

• 当我们发送请求需要全局打开loading时，像如下做

request({  url: 'xxx',  method: 'get'})

这样在发送请求前，会自动打开loading，当接收到响应后，会自动关闭loading. 当我们不需要自动打开loading的功能时，我们只需要在发送请求时在config中添加showLoading: false就可以了，代码如下

request({  url: 'xxx',  method: 'get',  showLoading: false})

这样做是不是满足了后端同事的要求了呢！并且洋葱模型也比拦截器使用起来更加方便，特别是在请求和响应中访问相同的变量的时候。就如我们例子中的showLoading. 当然我们也可以把拦截器中的更多功能移到洋葱模型的中间件中，比如发送请求时,自动添加token。

关于怎样优雅进行控制全局loading的显示就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。