javascript - 为什么 Await 不阻塞下一行代码？

Question

我正在使用异步函数启动服务器，检查网址是否返回 200，然后运行测试，但我的 checkUrl 函数未完成在运行下一行代码之前。

我正在使用 axios 包来 ping 状态代码的 url，并且我一直在尝试 async/await 和 Promise.resolve() 的几种变体.

function checkUrl(url) {
  console.log(`Checking for ${url}`);

  return axios
    .get(url)
    .then(function(res) {
      const message = `${url} is status code: ${res.status}`;

      return res;
    })
    .catch(function(err) {
      console.log("Will check again in 5 seconds");
      setTimeout(() => {
        return checkUrl(url);
      }, 5000);
    });
}

async function init() {
  let val;

  console.log("Running tests:::");
  // start server in react-integration directory
  shell.exec("BROWSER=none yarn start", {
    cwd: "sampleIntegration/react-integration",
    async: true
  });
  // check server has started
  val = await checkUrl("http://localhost:3000");

  console.log(`value from checkUrl promise: ${val}`);
}

我期望 val 变量是从我的 checkUrl 函数中的 Promise.resolve() 返回的消息。

val 返回未定义。

Answer 1

问题是 catch block 中的 setTimeout 。这是异步的，但 catch block 会立即返回。由于它没有任何可返回的内容，因此返回未定义。要解决此问题(并保持您期望的等待行为)，您可以执行以下操作:

function checkUrl(url) {
  console.log(`Checking for ${url}`);

  return axios.get(url)
    .then(res => {
      const message = `${url} is status code: ${res.status}`;
      return res;
    })
    .catch(err => {
      console.log('Will check again in 5 seconds');
      return new Promise((resolve) => {
         setTimeout(resolve, 5000);
      }).then(() => checkUrl(url));
    });
}

这将产生一个 Promise，它会在 5 秒后解析，并在解析时调用 checkUrl。