时间戳

首页 > 解决方案 > 为什么 Await 不阻塞下一行代码？

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

问题描述

我正在使用异步函数来启动服务器，检查 url 是否返回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 变量是从Promise.resolve()我的checkUrl函数中返回的消息。

val回来未定义。

标签： javascriptpromiseasync-awaitaxios

解决方案

问题是，setTimeout在 catch 块中。这是异步的，但 catch 块会立即返回。因为它没有任何东西要返回，所以它返回 undefined。要解决此问题（并保持您期望的等待行为），您可以执行以下操作：

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。

推荐阅读