Web Locks API通过request方法提供命名的排他或共享锁，用于协调同源页面、Worker间的资源访问。使用mode区分读写操作，结合AbortSignal可防阻塞，确保关键逻辑原子性，但仅限客户端生效。
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);
});
处理超时与异常情况
长时间持有锁可能阻塞其他任务。可以通过 AbortSignal 设置超时：
const controller = new AbortController();setTimeout(() => controller.abort(), 5000); // 5秒超时
try {
await navigator.locks.request('critical-resource', { signal: controller.signal }, async (lock) => {
// 处理资源
});
} catch (err) {
if (err.name === 'AbortError') {
console.log('获取锁超时');
}
}
这能避免死锁或长时间等待影响用户体验。
基本上就这些。Web Locks API 不复杂但容易忽略，合理使用能让前端并发更可控。注意它只作用于当前 origin 的 JavaScript 执行环境，不能替代后端锁机制。
