async/await 踩坑记录

一般表达:

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // 等待，直到 promise resolve (*)

  alert(result); // "done!"
}

总结以下两点:

1.await 跟的是 promise 类型的函数

(当然后面也允许不是promise类型的函数,代码还是能执行,这样的情况暂且不讨论,详情看MDN)

2.await 要在 async function 里使用,不然会报错

例外: 框架中 - vue3

在vue3 setup 中如果直接写await(即顶部await),这个组件会自动变成异步组件.

不会报错!这是正确的表达!😓

写vue3用setup语法糖时要注意,不然就容易在这里出现问题,特别是异步本就是难点

//一个.vue文件
<script setup>
const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>

<template>
 .....
</template>

<style>
  ....
</style>

ECMAScript 2022

事情又发生了变化!

最新规范允许顶部await这种表达了🤪

const resp = await fetch('https://....');