首页 建站教程 正文
我要投稿

异步单例模式之不一样的单例模式

建站教程
2025-05-29 0 34
也想出现在这里？点击联系我~

异步单例模式之不一样的单例模式

前言

单例模式大家都知道，异步单例又为何物。

异步单例：

创建实例需要一定的时间，创建期间，交出执行权，创建完毕后，拿回执行权，返回结果。

有人可能会吐槽，就这，其他方案分分钟搞定。没错，没有谁不可被替代。

这里主要表达的是一种编程思想，其能改变代码风格， 特定情况下漂亮的解决问题。多一种手段，多一种选择。

先一起来看一个栗子：

asyncInsCreator延时2秒创建一个对象;

getAsyncIns 封装异步对象获取过程;

我们多次调用 getAsyncIns, 得到同一个对象。

  1. asyncfunctionasyncInsCreator(){
  2. awaitdelay(2000).run();
  3. returnnewObject();
  4. }
  6. functiongetAsyncIns(){
  7. returnfactory(asyncInsCreator);
  8. }
  10. ;(asyncfunctiontest(){
  11. try{
  12. const[ins1,ins2,ins3]=awaitPromise.all([
  13. getAsyncIns(),
  14. getAsyncIns(),
  15. getAsyncIns()
  16. ]);
  18. console.log("ins1:",ins1);//ins1:{}
  19. console.log("ins1===ins2",ins1===ins2);//ins1===ins2true
  20. console.log("ins2===ins3",ins2===ins3);//ins2===ins3true
  21. console.log("ins3===ins1",ins3===ins1);//ins3===ins1true
  22. }catch(err){
  23. console.log("err",err);
  24. }
  25. })();

适用场景

异步单例

比如初始化socket.io客户端, indexedDB等等

仅仅一次的情况

举一个例子，我们可以注册多个 load事件

  1. window.addEventListener("load",function(){
  2. //othercode
  3. console.log("load1");
  4. });
  6. window.addEventListener("load",function(){
  7. //othercode
  8. console.log("load2");
  9. );

这要是换做React或者Vue，你先得订阅还得取消订阅，显得麻烦，当然你可以利用订阅发布思想再包装一层：

如果换成如下，是不是赏心悦目：

  1. awaitloaded();
  2. //TODO::

你肯定说，这个我会：

  1. functionloaded(){
  2. returnnewPromise((resove,reject)=>{
  3. window.addEventListener("load",resove)
  4. });
  5. }

我给你一段测试代码：

下面只会输出 loaded 1，不会输出loaded 2。

至于原因：load事件只会触发一次。

  1. functionloaded(){
  2. returnnewPromise((resolve,reject)=>{
  3. window.addEventListener("load",()=>resolve(null));
  4. });
  5. }
  7. asyncfunctiontest(){
  8. awaitloaded();
  9. console.log("loaded1");
  11. setTimeout(async()=>{
  12. awaitloaded();
  13. console.log("loaded2");
  14. },1000)
  15. }
  17. est();

到这里，我们的异步单例就可以秀一把，虽然他本意不是干这个，但他可以，因为他满足仅仅一次的条件。

我们看看使用异步单例模式的代码：

loaded 1 与 loaded 2 都如期到来。

  1. constfactory=asyncFactory();
  3. functionasyncInsCreator(){
  4. returnnewPromise((resove,reject)=>{
  5. window.addEventListener("load",)
  6. });
  7. }
  9. functionloaded(){
  10. returnfactory(asyncInsCreator)
  11. }
  13. asyncfunctiontest(){
  14. awaitloaded();
  15. console.log("loaded1");//loaded1
  17. setTimeout(async()=>{
  18. awaitloaded();
  19. console.log("loaded2");//loaded2
  20. },1000)
  21. }
  23. test();

实现思路

状态

实例创建，其实也就只有简简单单的两种状态：

  1. 创建中
  2. 创建完毕

难点在于，创建中的时候，又有新的请求来获取实例。

那么我们就需要一个队列或者数组来维护这些请求队列，等待实例创建完毕，再通知请求方。

如果实例化已经完毕，那么之后就直接返回实例就好了。

变量

我们这里就需要三个变量：

  1. instance 存储已经创建完毕的实例
  2. initializing 是否创建中
  3. requests 来保存哪些处于创建中，发过来的请求

工具方法

delay:

延时一定时间调用指定的函数。

用于后面的超时，和模拟延时。

  1. exportfunctiondelay(delay:number=5000,fn=()=>{},context=null){
  2. letticket=null;
  3. return{
  4. run(…args:any[]){
  5. returnnewPromise((resolve,reject)=>{
  6. ticket=setTimeout(async()=>{
  7. try{
  8. constres=awaitfn.apply(context,args);
  9. resolve(res);
  10. }catch(err){
  11. reject(err);
  12. }
  13. },delay);
  14. });
  15. },
  16. cancel:()=>{
  17. clearTimeout(ticket);
  18. }
  19. };
  20. };

基础版本

实现代码

注意点：

1.instance !== undefined这个作为判断是否实例化，也就是说可以是null, 仅仅一次的场景下使用，最适合不过了。

这里也是一个局限，如果就是返回undefined呢， 我保持沉默。

2.有人可能会吐槽我，你之前还说过 undefined不可靠，我微微一笑，你觉得迷人吗?

失败之后 initializing = false这个意图，就是某次初始化失败时，会通知之前的全部请求，已失败。

之后的请求，还会尝试初始化。

  1. import{delay}from"../util";
  3. functionasyncFactory(){
  4. letrequests=[];
  5. letinstance;
  6. letinitializing=false;
  8. returnfunctioninitiator(fn:(…args:any)=>Promise<any>){
  9. //实例已经实例化过了
  10. if(instance!==undefined){
  11. returnPromise.resolve(instance);
  12. }
  13. //初始化中
  14. if(initializing){
  15. returnnewPromise((resolve,reject)=>{
  16. //保存请求
  17. requests.push({
  18. resolve,
  19. reject
  20. });
  21. })
  22. }
  23. initializing=true;
  24. returnnewPromise((resolve,reject)=>{
  25. //保存请求
  26. requests.push({
  27. resolve,
  28. reject
  29. });
  31. fn()
  32. .then(result=>{
  33. instance=result;
  34. initializing=false;
  35. processRequests('resolve',instance);
  36. })
  37. .catch(error=>{
  38. initializing=false;
  39. processRequests('reject',error);
  40. });
  41. });
  42. }
  43. functionprocessRequests(type:"resolve"|"reject",value:any){
  44. //挨个resolve
  45. requests.forEach(q=>{
  46. q[type](value"type");
  47. });
  48. //置空请求，之后直接用instance
  49. requests=[];
  50. }
  51. }

测试代码

  1. constfactory=asyncFactory();
  3. asyncfunctionasyncInsCreator(){
  4. awaitdelay(2000).run();
  5. returnnewObject();
  6. }
  8. functiongetAsyncIns(){
  9. returnfactory(asyncInsCreator);
  10. }
  12. ;(asyncfunctiontest(){
  13. try{
  15. const[ins1,ins2,ins3]=awaitPromise.all([
  16. getAsyncIns(),
  17. getAsyncIns(),
  18. getAsyncIns()
  19. ]);
  21. console.log("ins1:",ins1);//ins1:{}
  22. console.log("ins1===ins2",ins1===ins2);//ins1===ins2true
  23. console.log("ins2===ins3",ins2===ins3);//ins2===ins3true
  24. console.log("ins3===ins1",ins3===ins1);//ins3===ins1true
  25. }catch(err){
  26. console.log("err",err);
  27. }
  29. })();

存在的问题：

没法传参啊，没法设置this的上下文啊。

传递参数版本

实现思路：

  1. 增加参数 context 以及 args参数
  2. Function.prototype.appy

实现代码

  1. import{delay}from"../util";
  3. interfaceAVFunction<T=unknown>{
  4. (value:T):void
  5. }
  7. functionasyncFactory<R=unknown,RR=unknown>(){
  8. letrequests:{reject:AVFunction<RR>,resolve:AVFunction<R>}[]=[];
  9. letinstance:R;
  10. letinitializing=false;
  12. returnfunctioninitiator(fn:(…args:any)=>Promise<R>,
  13. context:unknown,…args:unknown[]):Promise<R>{
  14. //实例已经实例化过了
  15. if(instance!==undefined){
  16. returnPromise.resolve(instance);
  17. }
  18. //初始化中
  19. if(initializing){
  20. returnnewPromise((resolve,reject)=>{
  21. requests.push({
  22. resolve,
  23. reject
  24. })
  25. })
  26. }
  27. initializing=true
  28. returnnewPromise((resolve,reject)=>{
  29. requests.push({
  30. resolve,
  31. reject
  32. })
  34. fn.apply(context,args)
  35. .then(res=>{
  36. instance=res;
  37. initializing=false;
  38. processRequests('resolve',instance);
  39. })
  40. .catch(error=>{
  41. initializing=false;
  42. processRequests('reject',error);
  43. })
  44. })
  45. }
  47. functionprocessRequests(type:"resolve"|"reject",value:any){
  48. //挨个resolve
  49. requests.forEach(q=>{
  50. q[type](value"type");
  51. });
  52. //置空请求，之后直接用instance
  53. requests=[];
  54. }
  55. }

测试代码

  1. interfaceRES{
  2. p1:number
  3. }
  5. constfactory=asyncFactory<RES>();
  7. asyncfunctionasyncInsCreator(opitons:unknown={}){
  8. awaitdelay(2000).run();
  9. console.log("context.name",this.name);
  10. constresult=newObject(opitons)asRES;
  11. returnresult;
  12. }
  14. functiongetAsyncIns(context:unknown,options:unknown={}){
  15. returnfactory(asyncInsCreator,context,options);
  16. }
  18. ;(asyncfunctiontest(){
  20. try{
  21. constcontext={
  22. name:"context"
  23. };
  25. const[ins1,ins2,ins3]=awaitPromise.all([
  26. getAsyncIns(context,{p1:1}),
  27. getAsyncIns(context,{p1:2}),
  28. getAsyncIns(context,{p1:3})
  29. ]);
  31. console.log("ins1:",ins1,ins1.p1);
  32. console.log("ins1===ins2",ins1===ins2);
  33. console.log("ins2===ins3",ins2===ins3);
  34. console.log("ins3===ins1",ins3===ins1);
  35. }catch(err){
  36. console.log("err",err);
  37. }
  39. })();

存在的问题

看似完美，要是超时了，怎么办呢?

想到这个问题的人，品论区发文，我给你们点赞。

超时版本

这里就需要借用我们的工具方法delay：

  • 如果超时没有成功，通知所有请求失败。
  • 反之，通知所有请求成功。

实现代码

  1. import{delay}from"../util";
  3. interfaceAVFunction<T=unknown>{
  4. (value:T):void
  5. }
  7. functionasyncFactory<R=unknown,RR=unknown>(timeout:number=5*1000){
  8. letrequests:{reject:AVFunction<RR>,resolve:AVFunction<R>}[]=[];
  9. letinstance:R;
  10. letinitializing=false;
  12. returnfunctioninitiator(fn:(…args:any)=>Promise<R>,context:unknown,…args:unknown[]):Promise<R>{
  14. //实例已经实例化过了
  15. if(instance!==undefined){
  16. returnPromise.resolve(instance);
  17. }
  19. //初始化中
  20. if(initializing){
  21. returnnewPromise((resolve,reject)=>{
  22. requests.push({
  23. resolve,
  24. reject
  25. })
  26. })
  27. }
  29. initializing=true
  30. returnnewPromise((resolve,reject)=>{
  32. requests.push({
  33. resolve,
  34. reject
  35. })
  37. const{run,cancel}=delay(timeout);
  39. run().then(()=>{
  40. consterror=newError("操作超时");
  41. processRequests("reject",error);
  42. });
  44. fn.apply(context,args)
  45. .then(res=>{
  46. //初始化成功
  47. cancel();
  48. instance=res;
  49. initializing=false;
  50. processRequests('resolve',instance);
  51. })
  52. .catch(error=>{
  53. //初始化失败
  54. cancel();
  55. initializing=false;
  56. processRequests('reject',error);
  57. })
  58. })
  59. }
  61. functionprocessRequests(type:"resolve"|"reject",value:any){
  62. //挨个resolve
  63. requests.forEach(q=>{
  64. q[type](value"type");
  65. });
  66. //置空请求，之后直接用instance
  67. requests=[];
  68. }
  69. }
  71. interfaceRES{
  72. p1:number
  73. }
  74. constfactory=asyncFactory<RES>();
  76. asyncfunctionasyncInsCreator(opitons:unknown={}){
  77. awaitdelay(1000).run();
  78. console.log("context.name",this.name);
  79. constresult=newObject(opitons)asRES;
  80. returnresult;
  81. }
  83. functiongetAsyncIns(context:unknown,options:unknown={}){
  84. returnfactory(asyncInsCreator,context,options);
  85. }
  86. ;(asyncfunctiontest(){
  88. try{
  89. constcontext={
  90. name:"context"
  91. };
  93. const[instance1,instance2,instance3]=awaitPromise.all([
  94. getAsyncIns(context,{p1:1}),
  95. getAsyncIns(context,{p1:2}),
  96. getAsyncIns(context,{p1:3})
  97. ]);
  99. console.log("instance1:",instance1,instance1.p1);
  100. console.log("instance1===instance2",instance1===instance2);
  101. console.log("instance2===instance3",instance2===instance3);
  102. console.log("instance3===instance1",instance3===instance1);
  103. }catch(err){
  104. console.log("err",err);
  105. }
  106. })();

测试代码

当把asyncInsCreator的 delay(1000)修改为 delay(6000)的时候，创建所以的事件6000ms大于 asyncFactory默认的5000ms，就会抛出下面的异常。

  1. errError:操作超时
  2. atc:\\projects-github\\juejinBlogs\\异步单例\\queue\\args_timeout.ts:40:31
  1. interfaceRES{
  2. p1:number
  3. }
  5. constfactory=asyncFactory<RES>();
  8. asyncfunctionasyncInsCreator(opitons:unknown={}){
  9. awaitdelay(1000).run();
  10. console.log("context.name",this.name);
  11. constresult=newObject(opitons)asRES;
  12. returnresult;
  13. }
  15. functiongetAsyncIns(context:unknown,options:unknown={}){
  16. returnfactory(asyncInsCreator,context,options);
  17. }
  19. ;(asyncfunctiontest(){
  20. try{
  21. constcontext={
  22. name:"context"
  23. };
  24. const[ins1,ins2,ins3]=awaitPromise.all([
  25. getAsyncIns(context,{p1:1}),
  26. getAsyncIns(context,{p1:2}),
  27. getAsyncIns(context,{p1:3})
  28. ]);
  30. console.log("ins1:",ins1,ins1.p1);
  31. console.log("ins1===ins2",ins1===ins2);
  32. console.log("ins2===ins3",ins2===ins3);
  33. console.log("ins3===ins1",ins3===ins1);
  34. }catch(err){
  35. console.log("err",err);
  36. }
  37. })();

存在的问题

存在的问题：

  1. 抛出了的Error new Error("操作超时")我们简单粗暴的抛出了这个异常，当外围的try/catch捕获后，还没法区别这个错误的来源。我们可以再封住一个AsyncFactoryError，或者 asyncInsCreator 抛出特定一定，交给try/catch 自身去识别。
  2. 没有判断参数 fn如果不是一个有效的函数，fn执行后是不是一个返回Promise。

是不是一个有效的函数好判断。

执行后是不是返回一个Promise, 借巨人p-is-promise[1]肩膀一靠。

  1. //核心代码
  2. functionisPromise(value){
  3. returnvalueinstanceofPromise||
  4. (
  5. isObject(value)&&
  6. typeofvalue.then==='function'&&
  7. typeofvalue.catch==='function'
  8. );
  9. }

存在问题，你就不解决了吗?不解决，等你来动手。

基于订阅发布模式的版本

这里是实现的另外一种思路， 利用订阅发布者。

要点

通过在Promise监听EventEmitter事件， 这里因为只需要监听一次，once闪亮登场。

  1. newPromise((resolve,reject)=>{
  2. emitter.once("initialized",()=>{
  3. resolve(instance);
  4. });
  5. emitter.once("error",(error)=>{
  6. reject(error);
  7. });
  8. });

实现代码

这里就实现一个最基础版本，至于带上下文，参数，超时的版本，大家可以尝试自己实现。

  1. import{EventEmitter}from"events";
  2. import{delay}from"./util";
  4. functionasyncFactory<R=any>(){
  5. letemitter=newEventEmitter();
  6. letinstance:any=null;
  7. letinitializing=false;
  9. returnfunctiongetAsyncInstance(factory:()=>Promise<R>):Promise<R>{
  10. //已初始化完毕
  11. if(instance!==undefined){
  12. returnPromise.resolve(instance);
  13. }
  14. //初始化中
  15. if(initializing===true){
  16. returnnewPromise((resolve,reject)=>{
  17. emitter.once("initialized",()=>{
  18. resolve(instance);
  19. });
  20. emitter.once("error",(error)=>{
  21. reject(error);
  22. });
  23. });
  24. }
  26. initializing=true;
  27. returnnewPromise((resolve,reject)=>{
  28. emitter.once("initialized",()=>{
  29. resolve(instance);
  30. });
  31. emitter.once("error",(error)=>{
  32. reject(error);
  33. });
  34. factory()
  35. .then(ins=>{
  36. instance=ins;
  37. initializing=false;
  38. emitter.emit("initialized");
  39. emitter=null;
  40. })
  41. .catch((error)=>{
  42. initializing=false;
  43. emitter.emit("error",error);
  44. });
  45. })
  46. }
  47. }

总结

异步单例不多见，这里要表达的是一种思想，把基于事件的编程，变为基于Promise的编程。

这里其实还涉及一些设计模式， 学以致用，投入实际代码中，解决问题，带来收益，这才是我们追求的。

async-init[2]

Is it impossible to create a reliable async singleton pattern in JavaScript?[3]

Creating an async singletone in javascript[4]

参考资料

[1]p-is-promise: https://www.npmjs.com/package/p-is-promise

[2]async-init: https://github.com/ert78gb/async-init

[3]Is it impossible to create a reliable async singleton pattern in JavaScript?: https://stackoverflow.com/questions/58919867/is-it-impossible-to-create-a-reliable-async-singleton-pattern-in-javascript

[4]Creating an async singletone in javascript: https://stackoverflow.com/questions/59612076/creating-an-async-singletone-in-javascript

原文链接：https://mp.weixin.qq.com/s/pccZbczQ4iEubuPdQDfQWw

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

快网idc优惠网 建站教程 异步单例模式之不一样的单例模式 https://www.kuaiidc.com/93095.html

也想出现在这里？点击联系我~

相关文章

ASP.NET自助建站系统中如何实现多语言支持？
ASP.NET自助建站系统中如何实现多语言支持？
建站教程
3个月前 92
64M VPS建站：如何选择最适合的网站建设平台？
64M VPS建站：如何选择最适合的网站建设平台？
建站教程
3个月前 59
ASP.NET本地开发时常见的配置错误及解决方法？
ASP.NET本地开发时常见的配置错误及解决方法？
建站教程
3个月前 142
ASP.NET自助建站系统的数据库备份与恢复操作指南
ASP.NET自助建站系统的数据库备份与恢复操作指南
建站教程
3个月前 65
猜你喜欢
发表评论
暂无评论
TA的动态
快网idc优惠网

idc信息共同学习，共同进步，共同成长！

QQ交流群
快网idc优惠网

QQ交流群

您的支持，是我们最大的动力！
热门文章
热门评论
终身VIP会员限时钜惠
首页 SSL证书 菜单 论坛 问答