Promise、async、await 同步等待

        Promise 是异步调用工具类，其目的是简化异步调用，使异步调用和同步调用一样简单，其调用逻辑图如下

 

每个 Promise 对象有 pending、fulfilled、rejected 三种状态。Promise 构造函数，提供 resolve 和 reject 两个函数来修改Promise 对象状态。

对象构造初始状态为 pending，调用 resolve 函数后，状态改为 fulfilled，而调用 reject 函数，状态改为 rejected。示例如下：

<script>
      function afterResolve(data) {
        console.log('通过')
      }
      function afterReject(info) {
        console.log('不通过')
      }

      new Promise((resolve, reject) => {
　　　　 var score = 90
        if (score >= 60) {
          resolve(data)
        } else if (0 <= score && score < 60) {
          reject(new Date())
        } else {
          throw 'score exception'
        }
      })
        .then(afterResolve)
        .catch(afterReject)

      console.log('我可能在 afterResolve 和 afterReject 前执行')
</script>

结果如下：

我可能在 afterResolve 和 afterReject 前执行
通过 小明z

这里 console.log('我可能在 afterResolve 和 afterReject 前执行') 先执行，这是因为 Promise 是异步调用，有延迟。为了达到同步效果，可以使用 async、await 关键字，

并对代码进行如下修改

      function afterResolve(data) {
        console.log('通过 ')
      }
      function afterReject(info) {
        console.log('不通过 ')
      }

      function getPromise() {
        return new Promise((resolve, reject) => {
          if (score >= 60) {
            resolve(data)
          } else if (0 <= score && score < 60) {
            reject(new Date())
          } else {
            throw 'score exception'
          }
        })
          .then(afterResolve)
          .catch(afterReject)
      }

      async function testAwait() {
        await getPromise()
        console.log('我等在 afterResolve 和 afterReject 后执行')
      }

      testAwait()

await 需要和 async 共同使用，不可单独使用。 await 会等待 Promise 对象执行完，再继续执行。getPromise() 函数返回 Promise 对象， await 等待 Promise 对象处理完全部逻辑后，才继续执行打印，输出

通过 小明
我等在 afterResolve 和 afterReject 后执行

promise 支持链式调用，链式调用可以简化同步逻辑，不必使用 async 和 await

 

<script>
      // 构造 Promise
      var p1 = new Promise((resolve, reject) => {
        var score = 50
        if (score >= 60) {
          resolve('通过')
        } else {
          reject('拒绝')
        }
      })

      // 由于 score = 50，p1 状态变为 rejected
      // 抛出异常
      var p2 = p1.then(
        function (data) {
          return Promise.resolve('p1 fulfilled ' + data)
        },
        function (data) {
          throw new Error('p1 rejected ' + data)
        }
      )

      // 输出 p2 rejected Error: p1 rejected 拒绝
      // “Error: p1 rejected 拒绝” 是 p1.then 抛出的异常
      var p3 = p2.then(
        function (data) {
          console.log('p2 fulfilled ' + data)
        },
        function (data) {
          console.log('p2 rejected ' + data)
        }
      )

      // p2.then 没有抛出异常，也没有参数下传
      // 故输出 p3 fulfilled undefined
      var p4 = p3.then(
        function (data) {
          console.log('p3 fulfilled ' + data)
        },
        function (data) {
          console.log('p3 rejected ' + data)
        }
      )

      console.log('主流程走完')
    </script>

利用 async 和 await 等待一段时间：

<script type="text/javascript">
      function doWait(waitTime) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve('finish')
          }, waitTime)
        })
      }

      async function wait(waitTime) {
        var promiseInfo = await doWait(waitTime)
        console.log('after wait')    // 这行代码，需要等待 waitTime 时间后，才能执行
      }

      wait(5000)

 </script>