async/await 使用方法

200 阅读1分钟
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  // 1.async用于封装Promise,它返回的结果是是一个Promise对象
  async function fnResolve () {
    return Promise.resolve(100)
  }
  async function fnReject () {
    return Promise.reject(101)
  }
  // 2.await 相当于处理Promise 返回resolve的情况
  // await 后面是一个Promise对象

              // (1)await 后面接async函数
              !(async function () {
                const res1 = await fnResolve() //fnResolve()返回的是promise对象
                console.log(res1);//res1=100
              })()

              !(async function () {
                const res11 = await fnReject() //fnReject()返回的是rejected的promise对象
                console.log(res11);//该行不会被执行
              })()

              // (2)await 后面接直接数值,那么此时会将该数值进行封装,封装为Promise对象
              !(async function () {
                const res2 = await 200 //相当于await Promise.resolve(200)
                console.log(res2);//res2=100
              })()

              // (3)await 后面接Promise对象

              !(async function () {
                const res3 = await Promise.resolve(300)
                console.log(res3);//res3=100
              })()

  // 3.try...catch类似于Promise中的catch,用于处理rejected 的Promise
  !(async function () {
    try {
      const res4 = await fnReject()
      console.log(res4) //该行不会被执行
    } catch (err) {
      console.log(err) //101
    }
  })()
</script>

</html>