首页 > web前端 > js教程 > 正文

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

Patricia Arquette
发布: 2024-11-02 17:10:02
原创
820 人浏览过

How to Avoid the Single-Threaded Trap in 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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!