JavaScript中的异步资源管理和Promise竞态条件 - 方鹿的瞎玩日志∠( ᐛ 」∠)

方鹿

Code and learn for fun!

公告

网站已转为使用 Mizuki 模板！

Learn More

标签

站点统计

文章

14

分类

11

标签

30

总字数

15,731

运行时长

0 天

最后活动

0 天前

1307 字

7 分钟

JavaScript中的异步资源管理和Promise竞态条件

2026-06-01

Javascript

/

Promise

/

异步

最常见的资源管理#

一个非常常见的资源管理的想法是这样的。用一个字符串获取资源的值。实现也很简单，新建一个Map，然后它包装到一个类里面。

1
class ResourceManager {
2
  constructor() {
3
    // string key -> resource
4
    this.resourceMap = new Map();
5
  }
6

7
  getResource(key) {
8
    return this.resourceMap.get(key);
9
  }
10

11
  insert(key, value) {
12
    this.resourceMap.set(key, value);
13
  }
14
}

资源加载#

资源来源主要有两个部分：其一是向网络中请求，其二是读取本地文件。这两种来源都是IO操作。所以一般使用 Promise 加载（而不是万恶的无限回调 QwQ）。这是我们在本文下面会用到的一个函数，它包装了setTimeout，把它变成一个Promise。

1
// Promise版本的setTimeout，返回一个Promise，将会在time毫秒后resolve。结果是time
2
function waitfor(time) {
3
  return new Promise((resolve) => setTimeout(resolve, time, time));
4
}

那么如何把结果正确且可靠地塞到我们刚刚看到的ResourceManager对象里？第一反应是在加载某某某的函数最后面把读到的资源放到ResourceManager里面。下面是这个想法的一个例子：

1
async function loadProfileKaltsit() {
2
  // 等待一会，装作我们正在通过网络请求老猞猁的档案
3
  await waitfor(1000);
4
  const resource = { name: "Kal'tsit", age_atleast: 13000 };
5
  // 塞到ResourceManager里面
6
  resourceManager.insert("profile1", resource);
7
  return resource;
8
}
9

10
function outputKaltsit() {
11
  return new Promise((resolve) => {
12
    console.log(resourceManager.getResource("profile1"));
13
    resolve();
14
  });
15
}
16

17
const [loadP, outputP] = [loadProfileKaltsit(), outputKaltsit()];
18
await loadP;
19
await outputP;

输出：

1
undefined

因为Promise是异步的。在第17行新建这两个Promise的时候，两个Promise的执行顺序不一定，这取决于调度器（比如在NodeJS环境中，将会取决于libuv~~的心情~~）。

你可能会说按照顺序正确await两个不就可以了吗：

1
await loadProfileKaltsit();
2
await outputKaltsit();

没错，在这个例子中确实能正常工作。但是在实际情况中，这两个函数的其中一个可能在WebSocket或者其他什么东西的消息回调里。那样根本无法预测顺序。

想法一#

一个想法是给ResourceManager新加一个方法，使用资源的时候如果管理器里面没有，就加载。

1
class ResourceManager {
2
  // ...
3

4
  // loader是一个接受ResourceManager对象的函数。
5
  // 它加载资源，把资源放到ResourceManager里面，然后返回一个带有结果的Promise。
6
  require(key, loader) {
7
    if (this.getResource(key) === undefined) {
8
      return loader(this);
9
    } else {
10
      return Promise.resolve(this.get(key));
11
    }
12
  }
13
}
14

15
async function loadProfileKaltsit(resourceManager) {
16
  console.log("加载老猞猁的档案");
17
  // 等待一会，装作我们正在通过网络请求老猞猁的档案
18
  // ...
19
  console.log("老猞猁的档案加载完成");
20
  return resource;
21
}
22

23
// step是编号（A或B）
24
async function outputKaltsit(step) {
25
  console.log(`${step} 调用`);
26
  const profile = await resourceManager.require("profile1", loadProfileKaltsit);
27
  console.log(profile);
28
}
29

30
const b = outputKaltsit("B");
31
await waitfor(100);
32
const a = outputKaltsit("A");
33

34
await randomDelay();
35
await b;
36
await randomDelay();
37
await a;

然后查看输出，你会发现加载器被错误调用了两遍：

1
B 调用
2
加载老猞猁的档案
3
A 调用
4
加载老猞猁的档案
5
老猞猁的档案加载完成
6
{ name: "Kal'tsit", age_atleast: 13000 }
7
老猞猁的档案加载完成
8
{ name: "Kal'tsit", age_atleast: 13000 }

在这个例子中，两次加载结果完全一样，对实际影响可能不大（除了浪费服务器流量以外）。但是实际中如果要加载的资源每次都有差别程序有可能爆炸。

这是因为，输出编号为A的那次调用在最开始的时候发现老猞猁的档案不存在，于是调用加载器。但是与此同时B的加载器刚好调用到半截。于是最终加载器被调用了两次。

解决方案#

在ResourceManager内部再准备一个Map存放这个资源对应的正在运行Promise。如果在资源Map里面没有找到这个资源。就在Promise的Map里面找，如果有，返回这个Promise，否则再真正创建一个Promise进行加载。

下面是一个实现：

1
class ResourceManager {
2
  //...
3

4
  // loader是一个接受ResourceManager对象的函数。
5
  // 它加载资源，把资源放到ResourceManager里面，然后返回一个带有结果的Promise。
6
  require(key, loader) {
7
    if (this.resourceMap.has(key)) {
8
      return Promise.resolve(this.resourceMap.get(key));
9
    }
10
    if (this.pendingMap.has(key)) {
11
      return this.pendingMap.get(key);
12
    }
13
    const promise = loader(this)
14
      .then((result) => {
15
        this.pendingMap.delete(key);
16
        return result;
17
      })
18
      .catch((error) => {
19
        this.pendingMap.delete(key);
20
        throw error;
21
      });
22
    this.pendingMap.set(key, promise);
23
    return promise;
24
  }
25
}
26

27
async function loadProfileKaltsit() {
28
  console.log("加载老猞猁的档案");
29
  await waitfor(1000);
30
  const resource = { name: "Kal'tsit", age_atleast: 13000 };
31
  console.log("老猞猁的档案加载完成");
32
  return resource;
33
}
34

35
async function outputKaltsit(step) {
36
  console.log(`${step} 调用`);
37
  const profile = await resourceManager.require("profile1", loadProfileKaltsit);
38
  console.log(profile);
39
  return profile;
40
}

输出：

1
B 调用
2
加载老猞猁的档案
3
A 调用
4
老猞猁的档案加载完成
5
{ name: "Kal'tsit", age_atleast: 13000 }
6
{ name: "Kal'tsit", age_atleast: 13000 }

可以看到结果正确了。

更新：改进#

Promise会存储结果，所以不用存储结果到一个专门的Map里面，可以直接存Promise。

1
class ResourceManager {
2
  constructor() {
3
    // string key -> Promise
4
    this.pendingMap = new Map();
5
  }
6

7
  require(key, loader) {
8
    if (this.pendingMap.has(key)) {
9
      return this.pendingMap.get(key);
10
    } else {
11
      const promise = loader(this).catch((error) => {
12
        this.pendingMap.delete(key);
13
        throw error;
14
      });
15
      this.pendingMap.set(key, promise);
16
      return promise;
17
    }
18
  }
19
}
20

21
async function loadProfileKaltsit() {
22
  console.log("加载老猞猁的档案");
23
  await waitfor(1000);
24
  const resource = { name: "Kal'tsit", age_atleast: 13000 };
25
  console.log("老猞猁的档案加载完成");
26
  return resource;
27
}
28

29
const b = outputKaltsit("B");
30
await waitfor(100);
31
const a = outputKaltsit("A");
32

33
await randomDelay();
34
const br = await b;
35
await randomDelay();
36
const ba = await a;

两次await的结果是一样的，它们都是同一个对象：

1
console.log(ba === br); // true

部分信息可能已经过时

Bevy Engine 中的 ECS（延迟更改、查询操作）