如何避免 JavaScript 中的单线程陷阱

JavaScript 通常被描述为 单线程，这意味着它一次执行一项任务。但这是否意味着每段代码都完全隔离运行，在等待 HTTP 响应或数据库请求等异步操作时无法处理其他任务？答案是不！事实上，JavaScript 的事件循环和 Promise 允许它在其他代码继续运行的同时高效地处理异步任务。

事实是 javascript 确实是单线程的，但是，误解其工作原理可能会导致常见的陷阱。其中一个陷阱是管理 API 请求等异步操作，尤其是在尝试控制对共享资源的访问而不引起竞争条件时。让我们探索一个现实世界的示例，看看糟糕的实施如何导致严重的错误。

我在应用程序中遇到一个错误，需要登录后端服务才能更新数据。登录后，应用程序将收到具有指定到期日期的访问令牌。一旦过期日期过去，我们需要在向更新端点发出任何新请求之前重新进行身份验证。出现这一挑战是因为登录端点被限制为每五分钟最多一个请求，而更新端点需要在同一五分钟窗口内更频繁地调用。逻辑正常运行至关重要，但登录端点偶尔会在五分钟间隔内多次触发，导致更新端点无法工作。虽然有时一切都按预期运行，但这种间歇性错误带来了更严重的风险，因为它一开始可能会给人一种错误的安全感，让人觉得系统运行正常。_

为了说明此示例，我们使用一个非常基本的 NestJS 应用程序，其中包含以下服务：

• AppService：充当控制器来模拟两个变体 - 坏版本，有时有效，有时无效，好的版本，保证始终正常运行。
• BadAuthenticationService：错误版本的实现。
• GoodAuthenticationService：良好版本的实现。
• AbstractAuthenticationService：负责维护 GoodAuthenticationService 和 BadAuthenticationService 之间共享状态的类。
• LoginThrottleService：模拟后端服务登录端点的限流机制的类。
• MockHttpService：帮助模拟 HTTP 请求的类。
• MockAwsCloudwatchApiService：模拟对 AWS CloudWatch 日志系统的 API 调用。

我不会在这里展示所有这些类的代码；您可以直接在 GitHub 存储库中找到它。相反，我将特别关注逻辑以及需要更改哪些内容才能使其正常工作。

糟糕的方法：

@Injectable()
export class BadAuthenticationService extends AbstractAuthenticationService {
  async loginToBackendService() {
    this.loginInProgress = true; // this is BAD, we are inside a promise, it's asynchronous. it's not synchronous, javascript can execute it whenever it wants

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com/login`, {
          password: 'password',
        }),
      );

      return response;
    } finally {
      this.loginInProgress = false;
    }
  }

  async sendProtectedRequest(route: string, data?: unknown) {
    if (!this.accessToken) {
      if (this.loginInProgress) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        return this.sendProtectedRequest(route, data);
      }

      try {
        await this.awsCloudwatchApiService.logLoginCallAttempt();
        const { data: loginData } = await this.loginToBackendService();
        this.accessToken = loginData.accessToken;
      } catch (e: any) {
        console.error(e?.response?.data);
        throw e;
      }
    }

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com${route}`, data, {
          headers: {
            Authorization: `Bearer ${this.accessToken}`,
          },
        }),
      );

      return response;
    } catch (e: any) {
      if (e?.response?.data?.statusCode === 401) {
        this.accessToken = null;
        return this.sendProtectedRequest(route, data);
      }
      console.error(e?.response?.data);
      throw e;
    }
  }
}

为什么这是一个糟糕的方法：

在BadAuthenticationService中，loginToBackendService方法在发起登录请求时将this.loginInProgress设置为true。但由于该方法是异步的，因此并不能保证登录状态会立即更新。这可能会导致在限制范围内对登录端点进行多个并发调用。
当 sendProtectedRequest 检测到访问令牌不存在时，它会检查登录是否正在进行。如果是，该函数将等待一秒钟，然后重试。但是，如果在此期间收到另一个请求，则可能会触发额外的登录尝试。这可能会导致对登录端点的多次调用，该端点被限制为每分钟只允许一次调用。因此，更新端点可能会间歇性失败，从而导致不可预测的行为，并在系统有时看似正常运行时产生错误的安全感。

总而言之，问题在于异步操作处理不当，这会导致潜在的竞争条件，从而破坏应用程序的逻辑。

好方法：

@Injectable()
export class GoodAuthenticationService extends AbstractAuthenticationService {
  async loginToBackendService() {
    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com/login`, {
          password: 'password',
        }),
      );

      return response;
    } finally {
      this.loginInProgress = false;
    }
  }

  async sendProtectedRequest(route: string, data?: unknown) {
    if (!this.accessToken) {
      if (this.loginInProgress) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        return this.sendProtectedRequest(route, data);
      }

      // Critical: Set the flag before ANY promise call
      this.loginInProgress = true;

      try {
        await this.awsCloudwatchApiService.logLoginCallAttempt();
        const { data: loginData } = await this.loginToBackendService();
        this.accessToken = loginData.accessToken;
      } catch (e: any) {
        console.error(e?.response?.data);
        throw e;
      }
    }

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com${route}`, data, {
          headers: {
            Authorization: `Bearer ${this.accessToken}`,
          },
        }),
      );

      return response;
    } catch (e: any) {
      if (e?.response?.data?.statusCode === 401) {
        this.accessToken = null;
        return this.sendProtectedRequest(route, data);
      }
      console.error(e?.response?.data);
      throw e;
    }
  }
}

为什么这是一个好方法：

在 GoodAuthenticationService 中，loginToBackendService 方法的结构是为了有效地处理登录逻辑。关键的改进是 loginInProgress 标志的管理。它是在确认访问令牌不存在之后以及在任何异步操作开始之前设置的。这确保一旦发起登录尝试，就不能同时进行其他登录调用，从而有效防止对受限制的登录端点的多个请求。

演示说明

克隆存储库：

@Injectable()
export class BadAuthenticationService extends AbstractAuthenticationService {
  async loginToBackendService() {
    this.loginInProgress = true; // this is BAD, we are inside a promise, it's asynchronous. it's not synchronous, javascript can execute it whenever it wants

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com/login`, {
          password: 'password',
        }),
      );

      return response;
    } finally {
      this.loginInProgress = false;
    }
  }

  async sendProtectedRequest(route: string, data?: unknown) {
    if (!this.accessToken) {
      if (this.loginInProgress) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        return this.sendProtectedRequest(route, data);
      }

      try {
        await this.awsCloudwatchApiService.logLoginCallAttempt();
        const { data: loginData } = await this.loginToBackendService();
        this.accessToken = loginData.accessToken;
      } catch (e: any) {
        console.error(e?.response?.data);
        throw e;
      }
    }

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com${route}`, data, {
          headers: {
            Authorization: `Bearer ${this.accessToken}`,
          },
        }),
      );

      return response;
    } catch (e: any) {
      if (e?.response?.data?.statusCode === 401) {
        this.accessToken = null;
        return this.sendProtectedRequest(route, data);
      }
      console.error(e?.response?.data);
      throw e;
    }
  }
}

安装必要的依赖项：

@Injectable()
export class GoodAuthenticationService extends AbstractAuthenticationService {
  async loginToBackendService() {
    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com/login`, {
          password: 'password',
        }),
      );

      return response;
    } finally {
      this.loginInProgress = false;
    }
  }

  async sendProtectedRequest(route: string, data?: unknown) {
    if (!this.accessToken) {
      if (this.loginInProgress) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        return this.sendProtectedRequest(route, data);
      }

      // Critical: Set the flag before ANY promise call
      this.loginInProgress = true;

      try {
        await this.awsCloudwatchApiService.logLoginCallAttempt();
        const { data: loginData } = await this.loginToBackendService();
        this.accessToken = loginData.accessToken;
      } catch (e: any) {
        console.error(e?.response?.data);
        throw e;
      }
    }

    try {
      const response = await firstValueFrom(
        this.httpService.post(`https://backend-service.com${route}`, data, {
          headers: {
            Authorization: `Bearer ${this.accessToken}`,
          },
        }),
      );

      return response;
    } catch (e: any) {
      if (e?.response?.data?.statusCode === 401) {
        this.accessToken = null;
        return this.sendProtectedRequest(route, data);
      }
      console.error(e?.response?.data);
      throw e;
    }
  }
}

运行应用程序：

git clone https://github.com/zenstok/nestjs-singlethread-trap.git

模拟请求：

• 要使用错误版本模拟两个请求，请调用：

cd nestjs-singlethread-trap
npm install

要使用好的版本模拟两个请求，请调用：

npm run start

结论：避免 JavaScript 的单线程陷阱

虽然 JavaScript 是单线程的，但它可以使用 Promise 和事件循环有效地处理异步任务，例如 HTTP 请求。然而，对这些承诺的不当处理，特别是在涉及共享资源（如令牌）的场景中，可能会导致竞争条件和重复操作。
关键要点是同步登录等异步操作，以避免此类陷阱。始终确保您的代码了解正在进行的进程，并以保证正确排序的方式处理请求，即使 JavaScript 在幕后执行多任务也是如此。

如果您还没有加入 Rabbit Byte Club，那么现在您有机会加入由软件爱好者、技术创始人和非技术创始人组成的蓬勃发展的社区。我们一起分享知识，互相学习，并准备建立下一个大型初创公司。今天加入我们，成为激动人心的创新和成长之旅的一部分！

以上是如何避免 JavaScript 中的单线程陷阱的详细内容。更多信息请关注PHP中文网其他相关文章！