如何轮询HTTP请求直到获取有效结果，避免while循环导致浏览器崩溃？

• JavaScript采用单线程事件循环执行模型，同步任务执行优先级高于所有异步回调。你代码中的while循环属于同步逻辑，而http.get请求的subscribe成功/失败回调是异步任务，必须等待当前所有同步代码执行完毕后才会被调度运行。
• 这就导致shouldCall变量永远不会被异步回调修改为false，while进入死循环，瞬间发起成千上万的HTTP请求，快速占满浏览器请求队列、内存资源，最终触发浏览器崩溃。

你需要用异步轮询的逻辑替代同步while循环，以下两种方案都可以实现需求：

方案1：RxJS操作符实现（适配你当前使用的Angular HttpClient场景） #

利用RxJS自带的重试、延迟操作符，代码最简洁，还能直接配置重试间隔、最大重试次数避免资源浪费：

// 先导入需要的操作符
import { retry } from 'rxjs/operators';

this.http.get(`http://localhost:44301/consentinitiation/${this.qid}`)
  .pipe(
    retry({
      count: 30, // 配置最大重试次数，示例为最多重试30次
      delay: 1000 // 配置每次重试的间隔时间，单位为毫秒，示例为间隔1秒
    })
  )
  .subscribe(
    s => {
      console.log('请求成功：', s);
    },
    error => {
      // 超过最大重试次数仍失败的兜底处理
      console.error('多次重试后仍无法获取数据：', error);
    }
  );

方案2：通用递归轮询实现（不依赖RxJS也可使用） #

通过递归+定时器的方式实现，每次请求结束后再判断是否需要发起下一次，不会出现死循环问题：

let retryTimes = 0;
const maxRetryTimes = 30; // 最大重试次数，避免无限请求
const REQUEST_INTERVAL = 1000; // 请求间隔，单位毫秒

const poll = () => {
  // 超过最大重试次数直接终止，加一层兜底保护
  if (retryTimes >= maxRetryTimes) {
    console.error('已达到最大重试次数，停止请求');
    return;
  }
  retryTimes++;

  this.http.get(`http://localhost:44301/consentinitiation/${this.qid}`)
    .subscribe(
      s => {
        console.log('请求成功：', s);
      },
      error => {
        // 请求失败，等待指定间隔后发起下一次请求
        setTimeout(poll, REQUEST_INTERVAL);
      }
    );
};

// 启动轮询
poll();

内容的提问来源于stack exchange，提问作者moris62