虽然循环阻止承诺解决[重复]答案

【问题标题】：While loop blocking promise from resolving [duplicate]虽然循环阻止承诺解决[重复]
【发布时间】：2020-04-09 07:48:18
【问题描述】：

我有以下 JavaScript 代码：

async function awaitFetch(urlString) {
    try {
      let status = await fetch(urlString);
      return status;
    } catch(e) {
        alert(e);
    }
}

let response = null; 
let url = 'https://stackoverflow.com';
awaitFetch(url).then(function (resolve) { response = resolve.status });
while (response === null) {};
console.log(response);

while 循环永远运行，我发现 response 永远不会从 null 改变，因为 promise 永远不会解决。为什么我的代码会这样？我希望当异步代码将response 变为200 或你有什么（null 之外的东西）时循环停止执行，但这永远不会发生。循环永远执行，我的console.log() 永远不会运行。这是为什么呢？

我真正想做的就是暂停执行，直到response 得到实际响应，然后记录它。我也有不能将console.log() 放在.then() 中的限制。如果事件循环被我的 while 循环阻塞，有什么方法可以暂停执行直到 response 更新而不将我的 console.log() 放入 async 函数或 .then()??

【问题讨论】：

请记住，异步并不意味着多线程。如果你想要你的 JS 多线程，你可以使用 Web Workers。异步只是意味着代码将一次运行一点点，其他代码介于两者之间，直到它完成并稳定下来。在两者之间运行的 while 循环永远不会结束，因此它无法返回检查异步代码，并且您会得到一个无限阻塞循环。

标签： javascript asynchronous fetch-api

【解决方案1】：

JavaScript 是单线程的，所以 while 循环会阻塞所有处理。异步任务的完成后逻辑仍然必须在同一个线程上运行。

如果您想等待 Promise，而不是执行自旋循环，请使用 await：

async function() {
  let url = 'https://stackoverflow.com';
  const { status: response } = await awaitFetch(url);
  console.log(response);
}

...或将您的逻辑放入.then 回调中。

awaitFetch('https://stackoverflow.com')
  .then(function (resolve) { 
    const response = resolve.status 
    console.log(response);
  });

【讨论】：

我的 console.log() 不能放在 .then() 或异步函数中。实际上，我的日志函数代表了需要等待我得到响应的数千行代码。由于各种原因，它们需要是独立的。
JavaScript 中的异步代码无法避免使用回调函数或await。也许你可以用更多细节来解释这个问题，为什么你不能为此使用异步函数。几乎可以肯定，您确实可以使用异步函数。

【解决方案2】：

您可以尝试将 awaitFetch 调用放在您的 while 循环块中吗？

【讨论】：

这会很棒