Web Locks API 是一种浏览器提供的机制，通过互斥锁协调同源下页面与 Worker 对共享资源的访问。它不锁定硬件资源，而是提供逻辑同步，确保关键代码串行执行，避免竞态条件。核心方法为 navigator.locks.request(lockName, options?, callback)，其中锁名相同则互斥，回调函数执行完毕或其返回的 Promise 完成后自动释放锁。支持配置选项：mode: ‘exclusive’（默认，独占）或 ‘shared’（共享，允许多个读操作）；signal 可传入 AbortSignal 实现超时取消；ifAvailable 表示仅在无冲突时获取，否则立即跳过。典型应用场景包括防止重复初始化、协调 IndexedDB 操作、安全写入 Cache Storage 以及多个标签页间的并发控制。例如使用 AbortController 设置 3 秒超时请求锁，避免无限等待。合理使用可有效管理前端并发，需注意锁名唯一性和避免长时间占用。
Web Locks API 提供了一种机制，让同一浏览器上下文中多个任务（如页面、Worker）协调对共享资源的访问，避免竞态条件。它适用于需要串行执行操作的场景，比如操作 IndexedDB、缓存或内存状态。
什么是 Web Locks API？
Web Locks API 是一个浏览器 API，允许 JavaScript 获取互斥锁（mutex），确保在锁定期间只有单个任务能执行特定代码块。它不锁定真实硬件资源，而是提供逻辑上的同步控制。
这个 API 特别适合处理同源下页面与 Worker 之间的并发问题。
基本使用方法
通过 navigator.locks.request() 请求一个锁，传入锁名称和回调函数。回调执行完毕或返回的 Promise 完成后，锁会自动释放。
第一个参数是锁的名字，相同名字的锁会互斥 第二个参数是异步回调函数，执行需要保护的操作
示例：防止重复初始化
navigator.locks.request('init-lock', async (lock) => { const stored = localStorage.getItem('initialized'); if (!stored) { await slowInitialization(); // 模拟耗时操作 localStorage.setItem('initialized', 'true'); }});
控制锁的行为选项
request() 支持第三个参数，用于配置超时或共享模式。
mode: ‘shared’ 允许多个持有者同时访问（读锁），默认为 ‘exclusive’（写锁） signal 可传入 AbortSignal 实现主动取消请求 ifAvailable 表示只在无冲突时获取，否则跳过
带超时的锁请求：
const controller = new AbortController();setTimeout(() => controller.abort(), 3000);try { await navigator.locks.request('data-sync', { signal: controller.signal }, async () => { await syncUserData(); });} catch (err) { console.warn('未能及时获得锁：', err);}
实际应用场景
常见用途包括：避免多个标签页同时发送重复请求、协调后台同步任务、保护本地缓存更新过程。
例如，在 Service Worker 中安全写入 Cache Storage：
navigator.locks.request('cache-write', async () => { const cache = await caches.open('v1'); await cache.put('/data.json', response.clone());});
基本上就这些。只要注意锁名唯一性、避免长时间占用，就能有效管理前端并发。
以上就是如何用Web Locks API管理资源并发访问？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528021.html
微信扫一扫 
支付宝扫一扫 
