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

[[422320]]

本文转载自微信公众号「云的程序世界」，作者云的世界。转载本文请联系云的程序世界公众号。

网站设计制作过程拒绝使用模板建站；使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统；成都网站建设、网站建设收费合理；免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了十年的创新互联建站网站建设公司。

前言

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

异步单例：

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

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

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

先一起来看一个栗子：

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

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

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

 
 
 
    
  
  
  
  1. async function asyncInsCreator() { 
    2. 
  
  
  
  2.     await delay(2000).run(); 
    3. 
  
  
  
  3.     return new Object(); 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. function getAsyncIns() { 
    7. 
  
  
  
  7.     return factory(asyncInsCreator); 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10. ; (async function test() { 
    11. 
  
  
  
  11.     try {   
    12. 
  
  
  
  12.         const [ins1, ins2, ins3] = await Promise.all([ 
    13. 
  
  
  
  13.             getAsyncIns(), 
    14. 
  
  
  
  14.             getAsyncIns(), 
    15. 
  
  
  
  15.             getAsyncIns() 
    16. 
  
  
  
  16.         ]); 
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18.         console.log("ins1:", ins1);  // ins1: {} 
    19. 
  
  
  
  19.         console.log("ins1===ins2", ins1 === ins2); // ins1===ins2 true 
    20. 
  
  
  
  20.         console.log("ins2===ins3", ins2 === ins3); // ins2===ins3 true 
    21. 
  
  
  
  21.         console.log("ins3=== ins1", ins3 === ins1); // ins3=== ins1 true 
    22. 
  
  
  
  22.     } catch (err) { 
    23. 
  
  
  
  23.         console.log("err", err); 
    24. 
  
  
  
  24.     } 
    25. 
  
  
  
  25. })(); 
    26.

适用场景

异步单例

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

仅仅一次的情况

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

 
 
 
    
  
  
  
  1. window.addEventListener("load", function () { 
    2. 
  
  
  
  2.      // other code 
    3. 
  
  
  
  3.      console.log("load 1"); 
    4. 
  
  
  
  4. }); 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6. window.addEventListener("load", function () { 
    7. 
  
  
  
  7.      // other code 
    8. 
  
  
  
  8.      console.log("load 2"); 
    9. 
  
  
  
  9. ); 
    10.

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

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

 
 
 
    
  
  
  
  1. await loaded(); 
    2. 
  
  
  
  2. // TODO::   
    3.

你肯定说，这个我会：

 
 
 
    
  
  
  
  1. function loaded() { 
    2. 
  
  
  
  2.        return new Promise((resove, reject) => { 
    3. 
  
  
  
  3.            window.addEventListener("load", resove) 
    4. 
  
  
  
  4.        }); 
    5. 
  
  
  
  5.    } 
    6.

我给你一段测试代码：

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

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

 
 
 
    
  
  
  
  1. function loaded() { 
    2. 
  
  
  
  2.     return new Promise((resolve, reject) => { 
    3. 
  
  
  
  3.         window.addEventListener("load", ()=> resolve(null)); 
    4. 
  
  
  
  4.     }); 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. async function test() { 
    8. 
  
  
  
  8.     await loaded(); 
    9. 
  
  
  
  9.     console.log("loaded 1"); 
    10. 
  
  
  
  10.      
    11. 
  
  
  
  11.     setTimeout(async () => { 
    12. 
  
  
  
  12.         await loaded(); 
    13. 
  
  
  
  13.         console.log("loaded 2"); 
    14. 
  
  
  
  14.     }, 1000) 
    15. 
  
  
  
  15. } 
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17. est(); 
    18.

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

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

loaded 1 与 loaded 2 都如期到来。

 
 
 
    
  
  
  
  1. const factory = asyncFactory(); 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. function asyncInsCreator() { 
    4. 
  
  
  
  4.     return new Promise((resove, reject) => { 
    5. 
  
  
  
  5.         window.addEventListener("load", ) 
    6. 
  
  
  
  6.     }); 
    7. 
  
  
  
  7. } 
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9. function loaded() { 
    10. 
  
  
  
  10.     return factory(asyncInsCreator) 
    11. 
  
  
  
  11. } 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13. async function test() { 
    14. 
  
  
  
  14.     await loaded(); 
    15. 
  
  
  
  15.     console.log("loaded 1");  // loaded 1 
    16. 
  
  
  
  16.  
    17. 
  
  
  
  17.     setTimeout(async () => { 
    18. 
  
  
  
  18.         await loaded(); 
    19. 
  
  
  
  19.         console.log("loaded 2"); // loaded 2 
    20. 
  
  
  
  20.     }, 1000) 
    21. 
  
  
  
  21. } 
    22. 
  
  
  
  22.  
    23. 
  
  
  
  23. test(); 
    24.

实现思路

状态

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

  1. 创建中
  2. 创建完毕

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

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

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

变量

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

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

工具方法

delay:

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

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

 
 
 
    
  
  
  
  1. export function delay(delay: number = 5000, fn = () => { }, context = null) { 
    2. 
  
  
  
  2.     let ticket = null; 
    3. 
  
  
  
  3.     return { 
    4. 
  
  
  
  4.         run(...args: any[]) { 
    5. 
  
  
  
  5.             return new Promise((resolve, reject) => { 
    6. 
  
  
  
  6.                 ticket = setTimeout(async () => { 
    7. 
  
  
  
  7.                     try { 
    8. 
  
  
  
  8.                         const res = await fn.apply(context, args); 
    9. 
  
  
  
  9.                         resolve(res); 
    10. 
  
  
  
  10.                     } catch (err) { 
    11. 
  
  
  
  11.                         reject(err); 
    12. 
  
  
  
  12.                     } 
    13. 
  
  
  
  13.                 }, delay); 
    14. 
  
  
  
  14.             }); 
    15. 
  
  
  
  15.         }, 
    16. 
  
  
  
  16.         cancel: () => { 
    17. 
  
  
  
  17.             clearTimeout(ticket); 
    18. 
  
  
  
  18.         } 
    19. 
  
  
  
  19.     }; 
    20. 
  
  
  
  20. }; 
    21.

基础版本

实现代码

注意点：

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

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

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

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

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

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

测试代码

 
 
 
    
  
  
  
  1. const factory = asyncFactory(); 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. async function asyncInsCreator() { 
    4. 
  
  
  
  4.     await delay(2000).run(); 
    5. 
  
  
  
  5.     return new Object(); 
    6. 
  
  
  
  6. } 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. function getAsyncIns() { 
    9. 
  
  
  
  9.     return factory(asyncInsCreator); 
    10. 
  
  
  
  10. } 
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12. ; (async function test() { 
    13. 
  
  
  
  13.     try {   
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.         const [ins1, ins2, ins3] = await Promise.all([ 
    16. 
  
  
  
  16.             getAsyncIns(), 
    17. 
  
  
  
  17.             getAsyncIns(), 
    18. 
  
  
  
  18.             getAsyncIns() 
    19. 
  
  
  
  19.         ]); 
    20. 
  
  
  
  20.  
    21. 
  
  
  
  21.         console.log("ins1:", ins1);  // ins1: {} 
    22. 
  
  
  
  22.         console.log("ins1===ins2", ins1 === ins2); // ins1===ins2 true 
    23. 
  
  
  
  23.         console.log("ins2===ins3", ins2 === ins3); // ins2===ins3 true 
    24. 
  
  
  
  24.         console.log("ins3=== ins1", ins3 === ins1); // ins3=== ins1 true 
    25. 
  
  
  
  25.     } catch (err) { 
    26. 
  
  
  
  26.         console.log("err", err); 
    27. 
  
  
  
  27.     } 
    28. 
  
  
  
  28.  
    29. 
  
  
  
  29. })(); 
    30.

存在的问题：

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

传递参数版本

实现思路：

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

实现代码

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

测试代码

 
 
 
    
  
  
  
  1. interface RES { 
    2. 
  
  
  
  2.     p1: number 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. const factory = asyncFactory(); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. async function asyncInsCreator(opitons: unknown = {}) { 
    8. 
  
  
  
  8.     await delay(2000).run(); 
    9. 
  
  
  
  9.     console.log("context.name", this.name); 
    10. 
  
  
  
  10.     const result = new Object(opitons) as RES; 
    11. 
  
  
  
  11.     return result; 
    12. 
  
  
  
  12. } 
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14. function getAsyncIns(context: unknown, options: unknown = {}) { 
    15. 
  
  
  
  15.     return factory(asyncInsCreator, context, options); 
    16. 
  
  
  
  16. } 
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18. ; (async function test() { 
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20.     try { 
    21. 
  
  
  
  21.         const context = { 
    22. 
  
  
  
  22.             name: "context" 
    23. 
  
  
  
  23.         }; 
    24. 
  
  
  
  24.  
    25. 
  
  
  
  25.         const [ins1, ins2, ins3] = await Promise.all([ 
    26. 
  
  
  
  26.             getAsyncIns(context, { p1: 1 }), 
    27. 
  
  
  
  27.             getAsyncIns(context, { p1: 2 }), 
    28. 
  
  
  
  28.             getAsyncIns(context, { p1: 3 }) 
    29. 
  
  
  
  29.         ]); 
    30. 
  
  
  
  30.  
    31. 
  
  
  
  31.         console.log("ins1:", ins1, ins1.p1); 
    32. 
  
  
  
  32.         console.log("ins1=== ins2", ins1 === ins2); 
    33. 
  
  
  
  33.         console.log("ins2=== ins3", ins2 === ins3); 
    34. 
  
  
  
  34.         console.log("ins3=== ins1", ins3 === ins1); 
    35. 
  
  
  
  35.     } catch (err) { 
    36. 
  
  
  
  36.         console.log("err", err); 
    37. 
  
  
  
  37.     } 
    38. 
  
  
  
  38.  
    39. 
  
  
  
  39. })(); 
    40.

存在的问题

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

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

超时版本

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

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

实现代码

 
 
 
    
  
  
  
  1. import { delay } from "../util"; 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. interface AVFunction { 
    4. 
  
  
  
  4.     (value: T): void 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7. function asyncFactory(timeout: number = 5 * 1000) { 
    8. 
  
  
  
  8.     let requests: { reject: AVFunction, resolve: AVFunction }[] = []; 
    9. 
  
  
  
  9.     let instance: R; 
    10. 
  
  
  
  10.     let initializing = false; 
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.     return function initiator(fn: (...args: any) => Promise, context: unknown, ...args: unknown[]): Promise { 
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.         // 实例已经实例化过了 
    15. 
  
  
  
  15.         if (instance !== undefined){ 
    16. 
  
  
  
  16.             return Promise.resolve(instance); 
    17. 
  
  
  
  17.         } 
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19.         // 初始化中 
    20. 
  
  
  
  20.         if (initializing) { 
    21. 
  
  
  
  21.             return new Promise((resolve, reject) => { 
    22. 
  
  
  
  22.                 requests.push({ 
    23. 
  
  
  
  23.                     resolve, 
    24. 
  
  
  
  24.                     reject 
    25. 
  
  
  
  25.                 }) 
    26. 
  
  
  
  26.             }) 
    27. 
  
  
  
  27.         } 
    28. 
  
  
  
  28.  
    29. 
  
  
  
  29.         initializing = true 
    30. 
  
  
  
  30.         return new Promise((resolve, reject) => { 
    31. 
  
  
  
  31.  
    32. 
  
  
  
  32.             requests.push({ 
    33. 
  
  
  
  33.                 resolve, 
    34. 
  
  
  
  34.                 reject 
    35. 
  
  
  
  35.             }) 
    36. 
  
  
  
  36.  
    37. 
  
  
  
  37.             const { run, cancel } = delay(timeout); 
    38. 
  
  
  
  38.  
    39. 
  
  
  
  39.             run().then(() => { 
    40. 
  
  
  
  40.                 const error = new Error("操作超时"); 
    41. 
  
  
  
  41.                 processRequests("reject", error); 
    42. 
  
  
  
  42.             }); 
    43. 
  
  
  
  43.  
    44. 
  
  
  
  44.             fn.apply(context, args) 
    45. 
  
  
  
  45.                 .then(res => { 
    46. 
  
  
  
  46.                     // 初始化成功 
    47. 
  
  
  
  47.                     cancel(); 
    48. 
  
  
  
  48.                     instance = res; 
    49. 
  
  
  
  49.                     initializing = false; 
    50. 
  
  
  
  50.                     processRequests('resolve', instance); 
    51. 
  
  
  
  51.                 }) 
    52. 
  
  
  
  52.                 .catch(error => { 
    53. 
  
  
  
  53.                     // 初始化失败 
    54. 
  
  
  
  54.                     cancel(); 
    55. 
  
  
  
  55.                     initializing = false; 
    56. 
  
  
  
  56.                     processRequests('reject', error); 
    57. 
  
  
  
  57.                 }) 
    58. 
  
  
  
  58.         }) 
    59. 
  
  
  
  59.     } 
    60. 
  
  
  
  60.  
    61. 
  
  
  
  61.     function processRequests(type: "resolve" | "reject", value: any) { 
    62. 
  
  
  
  62.         // 挨个resolve 
    63. 
  
  
  
  63.         requests.forEach(q => { 
    64. 
  
  
  
  64.             q[type](value "type"); 
    65. 
  
  
  
  65.         }); 
    66. 
  
  
  
  66.         // 置空请求，之后直接用instance 
    67. 
  
  
  
  67.         requests = []; 
    68. 
  
  
  
  68.     } 
    69. 
  
  
  
  69. } 
    70. 
  
  
  
  70.  
    71. 
  
  
  
  71. interface RES { 
    72. 
  
  
  
  72.     p1: number 
    73. 
  
  
  
  73. } 
    74. 
  
  
  
  74. const factory = asyncFactory(); 
    75. 
  
  
  
  75.  
    76. 
  
  
  
  76. async function asyncInsCreator(opitons: unknown = {}) { 
    77. 
  
  
  
  77.     await delay(1000).run(); 
    78. 
  
  
  
  78.     console.log("context.name", this.name); 
    79. 
  
  
  
  79.     const result = new Object(opitons) as RES; 
    80. 
  
  
  
  80.     return result; 
    81. 
  
  
  
  81. } 
    82. 
  
  
  
  82.  
    83. 
  
  
  
  83. function getAsyncIns(context: unknown, options: unknown = {}) { 
    84. 
  
  
  
  84.     return factory(asyncInsCreator, context, options); 
    85. 
  
  
  
  85. } 
    86. 
  
  
  
  86. ; (async function test() { 
    87. 
  
  
  
  87.  
    88. 
  
  
  
  88.     try { 
    89. 
  
  
  
  89.         const context = { 
    90. 
  
  
  
  90.             name: "context" 
    91. 
  
  
  
  91.         }; 
    92. 
  
  
  
  92.  
    93. 
  
  
  
  93.         const [instance1, instance2, instance3] = await Promise.all([ 
    94. 
  
  
  
  94.             getAsyncIns(context, { p1: 1 }), 
    95. 
  
  
  
  95.             getAsyncIns(context, { p1: 2 }), 
    96. 
  
  
  
  96.             getAsyncIns(context, { p1: 3 }) 
    97. 
  
  
  
  97.         ]); 
    98. 
  
  
  
  98.  
    99. 
  
  
  
  99.         console.log("instance1:", instance1, instance1.p1); 
    100. 
  
  
  
  100.         console.log("instance1=== instance2", instance1 === instance2); 
    101. 
  
  
  
  101.         console.log("instance2=== instance3", instance2 === instance3); 
    102. 
  
  
  
  102.         console.log("instance3=== instance1", instance3 === instance1); 
    103. 
  
  
  
  103.     } catch (err) { 
    104. 
  
  
  
  104.         console.log("err", err); 
    105. 
  
  
  
  105.     } 
    106. 
  
  
  
  106. })(); 
    107.

测试代码

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

 
 
 
    
  
  
  
  1. err Error: 操作超时 
    2. 
  
  
  
  2.     at c:\projects-github\juejinBlogs\异步单例\queue\args_timeout.ts:40:31 
    3. 
 
 
 
 
 
 
    
  
  
  
  1. interface RES { 
    2. 
  
  
  
  2.     p1: number 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. const factory = asyncFactory(); 
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8. async function asyncInsCreator(opitons: unknown = {}) { 
    9. 
  
  
  
  9.     await delay(1000).run(); 
    10. 
  
  
  
  10.     console.log("context.name", this.name); 
    11. 
  
  
  
  11.     const result = new Object(opitons) as RES; 
    12. 
  
  
  
  12.     return result; 
    13. 
  
  
  
  13. } 
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15. function getAsyncIns(context: unknown, options: unknown = {}) { 
    16. 
  
  
  
  16.     return factory(asyncInsCreator, context, options); 
    17. 
  
  
  
  17. } 
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19. ; (async function test() { 
    20. 
  
  
  
  20.     try { 
    21. 
  
  
  
  21.         const context = { 
    22. 
  
  
  
  22.             name: "context" 
    23. 
  
  
  
  23.         }; 
    24. 
  
  
  
  24.         const [ins1, ins2, ins3] = await Promise.all([ 
    25. 
  
  
  
  25.             getAsyncIns(context, { p1: 1 }), 
    26. 
  
  
  
  26.             getAsyncIns(context, { p1: 2 }), 
    27. 
  
  
  
  27.             getAsyncIns(context, { p1: 3 }) 
    28. 
  
  
  
  28.         ]); 
    29. 
  
  
  
  29.  
    30. 
  
  
  
  30.         console.log("ins1:", ins1, ins1.p1); 
    31. 
  
  
  
  31.         console.log("ins1=== ins2", ins1 === ins2); 
    32. 
  
  
  
  32.         console.log("ins2=== ins3", ins2 === ins3); 
    33. 
  
  
  
  33.         console.log("ins3=== ins1", ins3 === ins1); 
    34. 
  
  
  
  34.     } catch (err) { 
    35. 
  
  
  
  35.         console.log("err", err); 
    36. 
  
  
  
  36.     } 
    37. 
  
  
  
  37. })(); 
    38.

存在的问题

存在的问题：

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

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

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

 
 
 
    
  
  
  
  1. // 核心代码 
    2. 
  
  
  
  2. function isPromise(value) { 
    3. 
  
  
  
  3.    return value instanceof Promise || 
    4. 
  
  
  
  4.     ( 
    5. 
  
  
  
  5.      isObject(value) && 
    6. 
  
  
  
  6.      typeof value.then === 'function' && 
    7. 
  
  
  
  7.      typeof value.catch === 'function' 
    8. 
  
  
  
  8.     ); 
    9. 
  
  
  
  9. } 
    10.

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

基于订阅发布模式的版本

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

要点

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

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

实现代码

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

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

总结

异步单例不多见，这里要表达的是一种思想，把基于事件的编程，变为基于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

当前题目：异步单例模式之不一样的单例模式
链接URL：http://www.stwzsj.com/qtweb/news40/8790.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

全网营销推广知识

各行业网站

网站推广　　 　免备案空间　　 　网站SEO优化　　 　H5网站制作　　 　托管服务器　　 　绵阳服务器托管　　 　成都网络公司　　 　网站seo优化　　 　乐山做网站　　 　成都400电话申请　　 　宏昇商务服务　　 　成都网站建设　　 　子晨木包装箱　　 　成都网站建设　　 　网页设计制作　　 　成都网站设计　　 　顺泽窗帘　　 　温江服务器租用　　 　成都seo优化　　 　域名注册