怎样利用Web Locks API管理资源并发访问？-js教程-PHP中文网

怎样利用Web Locks API管理资源并发访问？

夢幻星辰

发布： 2025-09-29 15:28:02

原创

125人浏览过

Web Locks API通过request方法提供命名的排他或共享锁，用于协调同源页面、Worker间的资源访问。使用mode区分读写操作，结合AbortSignal可防阻塞，确保关键逻辑原子性，但仅限客户端生效。

怎样利用web locks api管理资源并发访问？

Web Locks API 提供了一种在单个浏览器上下文中协调对共享资源的访问方式，特别适用于多个任务或页面同时运行时避免冲突。它不解决跨浏览器或服务端并发问题，但在同一页面、Worker 或同源 iframe 之间非常有用。

理解 Web Locks API 的核心概念

Web Locks API 允许你请求一个命名锁，这个锁可以是排他性的（exclusive）或共享的（shared）。只有持有锁的代码才能执行特定操作，其他请求会被排队或等待。

主要方法是 navigator.locks.request()，它接收锁名称、选项和回调函数：

锁名称：字符串，标识资源
mode：'exclusive'（默认）或 'shared'
signal：可选的 AbortSignal，用于取消请求
回调函数：获得锁后执行，返回 Promise，自动释放锁

使用排他锁保护关键操作

当你需要确保某段逻辑不会被并发执行时（比如更新 localStorage 或 IndexedDB 记录），使用排他锁。

例如，防止多个异步任务同时写入同一数据：

navigator.locks.request('user-profile', async (lock) => {
  const data = await loadFromStorage('profile');
  data.lastVisit = Date.now();
  await saveToStorage('profile', data);
}); // 锁在此处自动释放

即使多个地方调用这段代码，它们会依次执行，避免数据竞争。

乾坤圈新媒体矩阵管家

新媒体账号、门店矩阵智能管理系统

查看详情

使用共享锁实现读写控制

如果你有高频读操作但低频写操作，可以用共享锁提升性能。

读操作使用 mode: 'shared'，允许多个同时进行
写操作使用默认 'exclusive' 模式，独占访问

示例：多个读取者可以同时读取缓存，但写入时必须独占：

// 读取使用共享锁
navigator.locks.request('cache-data', { mode: 'shared' }, async (lock) => {
return readCache();
});

// 写入使用排他锁
navigator.locks.request('cache-data', async (lock) => {
await updateCache(newData);
});