首页 > 作文

一文教你如何优雅的控制全局loading的显示

更新时间:2023-04-04 13:14:16 阅读: 评论:0

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

axios.intercep学霸计划表tors.request.u(  (config) => {    // config中不设置showloading这个字段或者这个字段为true时,代表需要全局显示loading    if (config.headers.showloa服装设计学校排名ding !== fal) {      // 全局显示loading      loading.showloading();    }    return config;  },  (err) => {    return promi.reject(err);  },);instance.interceptors.respon.u(  (respon) => {    const { config: { headers } } = respon;    if (headers.showloading !== fal) {      // 关闭全局的loading      loading.hideloading();    }    return data;  });

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

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

声明middlewaremanager类,这个类是洋葱模型的具体实现,代码如下。
// 中间件管理器,用于添加,删除中间件。// 另外这个添加的中间件给谁用,也需要用参数(job)保存起来。class middlewaremanager {  // 添加的中间件是给谁用的,我们用job标识,如果中间件是给2011年江苏高考语文试卷axios用,那么这个job就是axios方法。  // middlewares用来保存中间件。  // job和中间件都是返回promi对象的方法。  // 其中,job接受一个参数config,由最后一个中间件传递。  // 中间件接受两个参数,一个是他之前的中间件传递的config,一个是执行下一个中间件的方法。  constructor(job) {    // 这里默认加上axios请求    this.job = job;    this.middlewares = [];  }  u(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 !== fal) {    // 显示loading动画  }  const respon = await next(rest);  if (showloading !== fal) {    // 关闭动画  }  return respon;}// 组装middlewaremanagerconst manager = new middlewaremanager(axios);manager.u(middleware1);// 实现request方法,用于发送请求function request(config) {  return manager.run(config);}
当我们发送请求需要全局打开loading时,像如下做
request({  url: 'xxx',  method: 'get'})

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

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

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

总结

到此这篇关于如何优雅的控制全局loading的显示的文章就介绍到这了,更多相关控制全局loading显示内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!

本文发布于:2023-04-04 13:14:14,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/42aa6b2a24a6905b955a66f8e81b4275.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:一文教你如何优雅的控制全局loading的显示.doc

本文 PDF 下载地址:一文教你如何优雅的控制全局loading的显示.pdf

标签:中间件   洋葱   全局   模型
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图