前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >高级 Promise 模式 - Promise缓存

高级 Promise 模式 - Promise缓存

作者头像
ConardLi
发布2021-01-28 15:07:37
1.5K0
发布2021-01-28 15:07:37
举报
文章被收录于专栏:code秘密花园code秘密花园

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

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

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

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

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

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

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

非常简单。

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

我们可能要添加缓存,该怎么做?

简单的解决方案

代码语言:javascript
复制
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 中解析了用户详细信息之后将结果填充到内存中的缓存中。

并发场景

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

代码语言:javascript
复制
await Promise.all([
  getUserById('user1'),
  getUserById('user1')
]);

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

如果我们缓存结果的 Promise 而不是结果本身,该怎么办?代码如下:

代码语言:javascript
复制
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,我们可以将最后一个解决方案简化为:

代码语言:javascript
复制
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) 库支持此功能。我们的最后一个示例变为:

代码语言:javascript
复制
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});
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-01-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 code秘密花园 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一个例子:缓存异步请求结果
  • 简单的解决方案
  • 并发场景
  • Promise 缓存
  • 错误处理
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档