当前位置：首页 > 文章列表 > 文章 > 前端 > WebLocksAPI控制异步资源顺序

WebLocksAPI控制异步资源顺序

2025-10-03 23:18:31 0浏览收藏

**Web Locks API：保障异步资源访问顺序，避免竞态条件** Web Locks API 是一种轻量级的浏览器 API，用于协调同一浏览器上下文中的多个异步操作，确保对共享资源的访问顺序，有效避免竞态条件的发生。通过 `navigator.locks.request()` 方法申请命名锁，并在回调函数中执行关键操作，回调函数返回的 Promise 解析后锁自动释放。API 支持并发请求的排队机制，确保任务按顺序执行，适用于 localStorage、IndexedDB 等多种场景。合理设计锁粒度，避免过粗阻塞或过细难以维护。使用时应注意避免死锁，并可结合 AbortSignal 实现超时控制，保障单浏览器环境下的数据一致性。了解 Web Locks API，提升 Web 应用的稳定性和数据准确性。

Web Locks API通过命名锁协调异步操作，确保共享资源访问的串行化。使用navigator.locks.request('lockName', callback)申请锁，回调执行完毕后自动释放。多个请求按顺序排队，前一个释放后下一个获得锁，避免竞态。适用于localStorage或IndexedDB等场景，如计数器递增时保证顺序执行。合理设计锁粒度，避免过粗阻塞或过细难维护，不同资源用不同锁名。不建议在锁内请求其他锁以防死锁，可结合AbortSignal实现超时控制。API轻量但需注意持有时间与嵌套逻辑，保障单浏览器环境下的数据一致性。

如何通过 Web Locks API 管理多个异步操作对同一资源的访问顺序？

Web Locks API 可以协调同一浏览器上下文中多个异步操作对共享资源的访问顺序，避免竞态条件。它通过申请和释放命名锁来控制执行流程，确保关键代码段按预期串行执行。

获取锁并执行关键操作

使用 navigator.locks.request() 方法申请一个命名锁。只有当锁可用时，回调函数才会执行，并且该回调返回的 Promise 解析后，锁才会自动释放。

调用 request(lockName, callback)，其中 lockName 是字符串标识符
callback 中执行需要独占访问的操作，例如修改 localStorage 或 IndexedDB 记录
callback 返回的 Promise 决议后，锁自动释放

示例：

navigator.locks.request('user-data-lock', async (lock) => {
  const data = await loadUserData();
  await saveUserData({ ...data, lastVisit: Date.now() });
});

处理并发请求的排队机制

当多个异步任务请求同一个锁名时，浏览器会自动将它们排队。前一个锁释放后，下一个请求立即获得锁并执行。

后续请求不会被丢弃或拒绝，而是等待前一个完成
适用于频繁更新的场景，如计数器递增或多标签页数据同步
可结合 AbortSignal 实现超时或取消机制

例如两个异步函数同时运行：

async function updateCounter() {
  return navigator.locks.request('counter-lock', async () => {
    let count = localStorage.getItem('count') || 0;
    await delay(100); // 模拟异步延迟
    localStorage.setItem('count', ++count);
  });
}

无论哪个先调用，都会按顺序执行，最终结果正确递增。