关于async await

最新推荐文章于 2025-12-21 13:28:14 发布

原创最新推荐文章于 2025-12-21 13:28:14 发布 · 206 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

情况一：后接函数，函数是同步代码

async function foo() {
  console.log('foo start')
  console.log('foo end')
}

async function main() {
  await foo()
  console.log('after foo')
}

main()
console.log('outside')

foo start --foo end --outside -- after foo
🧠 为啥结果是这样嘞？

用了await 关键字函数并不是异步函数他会先执行函数，再把await 后面的代码转化成微任务

等价于

javascript
复制代码
function foo() {
  console.log('foo start');
  console.log('foo end');
  return Promise.resolve();
}

function main() {
  return foo().then(() => {
    console.log('after foo');
  });
}

main();
console.log('outside');

情况二：后接函数函数是异步代码

  async promisifyRemoteLoad(src) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = src
      document.body.appendChild(script)

      script.onload = () => {
        resolve()
      }
      script.onerror = (e) => {
        reject(e)
      }
    })
  }

await 后面函数如果是异步函数，要返回一个新的new Promise--resolve()/reject()

情况三：后面是数字被包装成promise.resolve()

async function main() {
  await 123
  console.log('after foo')
}

main()
console.log('outside')

输出：outside -- after foo
上述代码等价于

function main() {
  return Promise.resolve(123).then(() => {
    console.log('after foo');
  });
}

main();
console.log('outside');

总之：只要使用await 本行下的都会被推到微任务队列等待执行--如果当前函数是异步，需要resolve/reject

什么时候await后面的代码不会被触发呢？？？

✅ 如何避免这个问题？