JS `Web Locks API` 与 `IndexedDB` 事务的并发冲突解决

大家好，我是今天的主讲人，很高兴和大家一起聊聊 JavaScript 中的 Web Locks API 和 IndexedDB 事务这两位冤家，以及如何让他们和平共处，避免并发冲突。咱们今天的目标是：让你的代码像一位经验丰富的交警，能疏导交通，避免撞车事故，而不是像个新手司机，一脚油门下去，啥都管不了。

第一部分：欢迎来到并发世界！

首先，我们要认清一个残酷的现实：JavaScript 虽然是单线程的，但它并不意味着你的代码永远不会面临并发问题。现代 Web 应用大量使用异步操作，比如 setTimeout、fetch、Promise 等等，这些操作可能会在你意想不到的时候同时修改共享资源，就像一群熊孩子同时抢一个玩具。

Web Locks API 和 IndexedDB 事务，就是两个典型的可能引发并发冲突的场景。它们都涉及到对共享资源的访问和修改，如果不加以控制，就会导致数据损坏、应用崩溃等问题。

第二部分：Web Locks API：给资源加把锁

想象一下，你有一个非常重要的变量，比如用户的积分。多个 JavaScript 代码片段都想修改这个积分，如果没有保护措施，就可能出现以下情况：

代码片段 A 读取了积分，假设是 100。
代码片段 B 也读取了积分，也是 100。
代码片段 A 将积分加 10，写回，现在积分是 110。
代码片段 B 也将积分加 20，写回，现在积分是 120。

理想情况下，积分应该是 100 + 10 + 20 = 130，但由于并发修改，结果变成了 120。这就是典型的“丢失更新”问题。

Web Locks API 提供了一种机制，允许你给资源（比如一个变量、一个文件、甚至数据库中的一条记录）加一把锁，确保同一时刻只有一个代码片段可以访问和修改它。

使用方法非常简单：

navigator.locks.request('my-resource', async lock => {
  // 在这里安全地访问和修改 'my-resource'
  console.log('获得了锁！');
  // 模拟一些耗时操作
  await new Promise(resolve => setTimeout(resolve, 2000));
  console.log('释放了锁！');
});

这段代码做了什么？

navigator.locks.request('my-resource', ...)：请求一个名为 ‘my-resource’ 的锁。如果当前没有其他代码持有这个锁，那么 request 会立即执行回调函数。如果已经有代码持有锁，那么 request 会等待锁释放，然后才执行回调函数。
async lock => { ... }：这是一个异步回调函数，只有在获得锁之后才会执行。回调函数接收一个 lock 对象，虽然这个对象本身并没有太多可操作的方法，但它的存在表明你已经获得了锁。当回调函数执行完毕时（或者抛出异常时），锁会自动释放。
await new Promise(resolve => setTimeout(resolve, 2000));：这只是一个模拟耗时操作，用来演示锁的作用。在实际应用中，这里应该是访问和修改共享资源的代码。

锁的类型：独占锁和共享锁

Web Locks API 支持两种类型的锁：

独占锁 (Exclusive Lock)：这是最常见的锁类型。当一个代码片段持有独占锁时，其他任何代码片段都无法获得同一个资源的任何锁（包括独占锁和共享锁）。
共享锁 (Shared Lock)：允许多个代码片段同时持有同一个资源的共享锁。但是，如果已经有代码片段持有独占锁，那么其他代码片段就无法获得共享锁。反之，如果已经有代码片段持有共享锁，那么其他代码片段就无法获得独占锁。

什么时候使用共享锁？当你需要允许多个代码片段同时读取资源，但不允许任何代码片段修改资源时，可以使用共享锁。比如，多个代码片段可以同时读取用户的个人资料，但只有一个代码片段可以修改用户的个人资料。

如何请求共享锁？

navigator.locks.request('my-resource', { mode: 'shared' }, async lock => {
  // 在这里安全地读取 'my-resource'
  console.log('获得了共享锁！');
  // 模拟一些耗时操作
  await new Promise(resolve => setTimeout(resolve, 2000));
  console.log('释放了共享锁！');
});

注意 request 方法的第二个参数：{ mode: 'shared' }。它告诉浏览器我们要请求一个共享锁。

锁的范围：持久锁和会话锁

Web Locks API 还支持两种范围的锁：

持久锁 (Persistent Lock)：即使浏览器关闭或页面刷新，锁仍然有效。持久锁通常用于保护存储在持久化存储中的数据，比如 IndexedDB。需要注意的是，持久锁需要用户授权才能使用，因为它们可能会影响用户的隐私和安全。
会话锁 (Session Lock)：当浏览器关闭或页面刷新时，锁会自动释放。会话锁通常用于保护存储在内存中的数据，比如 JavaScript 变量。会话锁不需要用户授权。

默认情况下，navigator.locks.request 方法创建的是会话锁。要创建持久锁，你需要使用 navigator.locks.request({ mode: 'exclusive', ifAvailable: true, steal: true }) 并检查返回值。

代码示例：使用 Web Locks API 保护用户积分

async function updateUserPoints(userId, pointsToAdd) {
  const lockName = `user-points-${userId}`; // 为每个用户创建一个锁

  try {
    await navigator.locks.request(lockName, async lock => {
      console.log(`用户 ${userId} 获得了锁！`);
      // 1. 从 IndexedDB 中读取用户积分
      const db = await openDatabase();
      const transaction = db.transaction(['users'], 'readwrite');
      const store = transaction.objectStore('users');
      const user = await store.get(userId);

      if (!user) {
        console.error(`用户 ${userId} 不存在！`);
        return;
      }

      // 2. 修改用户积分
      user.points += pointsToAdd;

      // 3. 将修改后的用户积分写回 IndexedDB
      await store.put(user);
      await transaction.complete;
      console.log(`用户 ${userId} 的积分已更新为 ${user.points}！`);
    });
  } catch (error) {
    console.error(`更新用户 ${userId} 积分时发生错误：`, error);
  } finally {
    console.log(`用户 ${userId} 释放了锁！`);
  }
}

// 模拟并发更新用户积分
updateUserPoints(123, 10);
updateUserPoints(123, 20);

在这个例子中，我们为每个用户创建一个锁，锁的名称是 user-points-${userId}。这样可以确保同一时刻只有一个代码片段可以修改同一个用户的积分。

第三部分：IndexedDB 事务：要么全做，要么全不做

IndexedDB 事务是 IndexedDB 中用于执行一系列数据库操作的机制。事务保证了原子性、一致性、隔离性和持久性 (ACID)，这意味着：

原子性 (Atomicity)：事务中的所有操作要么全部成功，要么全部失败。不会出现部分操作成功，部分操作失败的情况。
一致性 (Consistency)：事务必须保证数据库从一个有效状态转换到另一个有效状态。事务不能破坏数据库的完整性约束。
隔离性 (Isolation)：并发执行的事务之间应该相互隔离，一个事务的执行不应该受到其他事务的影响。
持久性 (Durability)：一旦事务提交，对数据库的修改就会永久保存。

IndexedDB 事务可以避免数据损坏，确保数据的完整性。

IndexedDB 事务的并发问题

虽然 IndexedDB 事务本身具有隔离性，但它仍然可能与其他 JavaScript 代码片段发生并发冲突，特别是当多个事务同时访问和修改同一个数据时。

例如，假设有两个 IndexedDB 事务：

事务 A：读取用户的信息，然后更新用户的积分。
事务 B：读取用户的积分，然后更新用户的等级。

如果事务 A 和事务 B 同时执行，并且都修改了用户的积分，那么就可能出现 “丢失更新” 问题。

第四部分：Web Locks API + IndexedDB 事务：完美搭档

Web Locks API 和 IndexedDB 事务可以完美地结合在一起，解决并发冲突问题。我们可以使用 Web Locks API 来保护 IndexedDB 中的数据，确保同一时刻只有一个事务可以访问和修改特定的数据。

代码示例：使用 Web Locks API 保护 IndexedDB 数据

async function updateUserData(userId, updateFunction) {
  const lockName = `user-data-${userId}`;

  try {
    await navigator.locks.request(lockName, async lock => {
      console.log(`用户 ${userId} 获得了锁！`);

      // 1. 创建 IndexedDB 事务
      const db = await openDatabase();
      const transaction = db.transaction(['users'], 'readwrite');
      const store = transaction.objectStore('users');

      // 2. 读取用户数据
      const user = await store.get(userId);

      if (!user) {
        console.error(`用户 ${userId} 不存在！`);
        return;
      }

      // 3. 使用 updateFunction 修改用户数据
      updateFunction(user);

      // 4. 将修改后的用户数据写回 IndexedDB
      await store.put(user);
      await transaction.complete;

      console.log(`用户 ${userId} 的数据已更新！`);
    });
  } catch (error) {
    console.error(`更新用户 ${userId} 数据时发生错误：`, error);
  } finally {
    console.log(`用户 ${userId} 释放了锁！`);
  }
}

// 示例：更新用户积分
updateUserData(123, user => {
  user.points += 10;
});

// 示例：更新用户等级
updateUserData(123, user => {
  user.level = Math.floor(user.points / 100);
});

在这个例子中，我们使用 Web Locks API 来保护对用户数据的访问和修改。 updateUserData 函数接收一个 updateFunction 参数，该函数负责修改用户数据。这样可以确保不同的代码片段可以使用不同的方式修改用户数据，而不会发生并发冲突。

第五部分：注意事项和最佳实践

锁的粒度：锁的粒度是指锁保护的资源的范围。锁的粒度越小，并发性能越高，但实现起来也越复杂。锁的粒度越大，并发性能越低，但实现起来也越简单。你需要根据你的应用场景选择合适的锁粒度。通常，你应该尽量选择最小的锁粒度，以提高并发性能。
死锁：死锁是指两个或多个代码片段互相等待对方释放锁，导致所有代码片段都无法继续执行的情况。要避免死锁，你需要确保锁的获取顺序是一致的。例如，如果代码片段 A 需要先获取锁 X，再获取锁 Y，那么代码片段 B 也应该按照同样的顺序获取锁 X 和锁 Y。
锁的超时：如果一个代码片段持有锁的时间过长，可能会导致其他代码片段长时间等待。为了避免这种情况，你可以设置锁的超时时间。如果代码片段在超时时间内没有释放锁，那么锁会自动释放。 Web Locks API 并没有提供直接设置锁超时时间的功能，你需要自己实现超时机制。
错误处理：在使用 Web Locks API 时，你需要注意错误处理。如果获取锁失败，或者在持有锁的过程中发生错误，你需要及时释放锁，避免资源被永久锁定。
不要过度使用锁：锁虽然可以解决并发问题，但是过度使用锁会降低并发性能。只有在确实需要保护共享资源时才应该使用锁。

第六部分：总结

Web Locks API 和 IndexedDB 事务是 JavaScript 中处理并发问题的两个重要工具。通过合理地使用它们，你可以构建出健壮、可靠的 Web 应用。

希望今天的讲座对你有所帮助。记住，并发编程是一门艺术，需要不断学习和实践才能掌握。祝你在并发的世界里玩得开心！

发表回复 取消回复

发表回复取消回复