【JS】891- 高级 Promise 模式 - Promise缓存

灰太狼 2022-11-06 09:55 150阅读 0赞

![12467b520765301250e2c2a3d48a2968.png][]

**https://www.jonmellman.com/posts/promise-memoization 译者：ConardLi**

在本文中，我们将介绍常见的缓存实现在并发条件下存在的问题。然后我们将介绍如何修复它，并且在此过程中简化代码。

我们将通过介绍基于 `Singleton Promise` 模式的 `Promise Memoization` 模式来做到这一点。

> Singleton Promise 模式看前面的文章：高级异步模式 - Promise 单例

## 一个例子：缓存异步请求结果 ##

下面是一个简单的 API 客户端：

const getUserById = async (userId: string): Promise<User> => {
      const user = await request.get(`https://users-service/${userId}`);
      return user;
    };

非常简单。

但是，如果要关注性能，该怎么办？`users-service` 解析用户详细信息可能很慢，也许我们经常使用相同的用户 `ID` 集来调用此方法。

我们可能要添加缓存，该怎么做？

## 简单的解决方案 ##

const usersCache = new Map<string, User>();
    
    const getUserById = async (userId: string): Promise<User> => {
      if (!usersCache.has(userId)) {
        const user = await request.get(`https://users-service/${userId}`);
        usersCache.set(userId, user);
      }
    
      return usersCache.get(userId);
    };

这非常简单：在从 `users-service` 中解析了用户详细信息之后将结果填充到内存中的缓存中。

## 并发场景 ##

上面的代码，它将在以下情况下进行重复的网络调用：

await Promise.all([
      getUserById('user1'),
      getUserById('user1')
    ]);

问题在于直到第一个调用解决后，我们才分配缓存。但是，等等，如何在获得结果之前填充缓存？

如果我们缓存结果的 `Promise` 而不是结果本身，该怎么办？代码如下：

const userPromisesCache = new Map<string, Promise<User>>();
    
    const getUserById = (userId: string): Promise<User> => {
      if (!userPromisesCache.has(userId)) {
        const userPromise = request.get(`https://users-service/v1/${userId}`);
        userPromisesCache.set(userId, userPromise);
      }
    
      return userPromisesCache.get(userId)!;
    };

非常相似，但是我们没有 `await` 发出网络请求，而是将其 `Promise` 放入缓存中，然后将其返回给调用方。

> 注意，我们不需要声明我们的方法 `async` ，因为它不再调用 `await` 。我们的方法签名虽然没有改变我们仍然返回一个 `promise` ，但是我们是同步进行的。

这样可以解决并发条件，无论时间如何，当我们对进行多次调用时，只会触发一个网络请求 `getUserById('user1')`。这是因为所有后续调用者都收到与第一个相同的 `Promise` 单例。

## Promise 缓存 ##

从另一个角度看，我们的最后一个缓存实现实际上只是在记忆 `getUserById`！给定我们已经看到的输入后，我们只返回存储的结果（恰好是一个`Promise`）。

因此，记住我们的异步方法可以使我们在没有竞争条件的情况下进行缓存。

借助 `lodash`，我们可以将最后一个解决方案简化为：

import _ from 'lodash';
    
    const getUserById = _.memoize(async (userId: string): Promise<User> => {
      const user = await request.get(`https://users-service/${userId}`);
      return user;
    });

我们采用了原始的无缓存实现，并放入了 `_.memoize` 包装器，非常简洁。

## 错误处理 ##

对于 API 客户端，你应考虑操作可能失败的可能性。如果我们的内存实现已缓存了被拒绝的 `Promise` ，则所有将来的调用都将以同样的失败 `Promise` 被拒绝！

幸运的是，memoizee(`https://www.npmjs.com/package/memoizee`) 库支持此功能。我们的最后一个示例变为：

import memoize from 'memoizee';
    
    const getUserById = memoize(async (userId: string): Promise<User> => {
      const user = await request.get(`https://users-service/${userId}`);
      return user;
    }, { promise: true});

本文完。

![99a006c25e052d92390265853ec8632a.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![57d21eed31ebd80eb0b2c62acf204112.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[12467b520765301250e2c2a3d48a2968.png]: /images/20221023/2b337befb1ba4ee3ab68e978c7ee077f.png
[99a006c25e052d92390265853ec8632a.gif]: /images/20221023/655195ad38b04a84a61e2b07b2dc9238.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[57d21eed31ebd80eb0b2c62acf204112.gif]: /images/20221023/e7057c35c9f24a9792ccd1be470e61de.png