async与await暂停作用

1.

    async function Request () {
      await new Promise(res => {
        setTimeout(() => {
          console.log(1)
          res()
        }, 1000)
      })
      console.log(4);
      new Promise(res => {
        setTimeout(() => {
          res()
          console.log(2);

        }, 1000)
      }).then(() => console.log(2))
      console.log(5);
      new Promise(res => {
        setTimeout(() => {
          console.log(3)
          res()
        }, 1000)
      }).then(() => console.log(3))

    }
    Request()
// 只有第一个promise暂停了函数的执行
// 因此执行顺序为 1s后打印1,再过1s后打印22 33
// 执行顺序为 等待第一个promise返回结果 =>   **打印45**  ,执行第二个promise,不等待 => 执行第三个promise,不等待 => 第二个promise执行完成,第三个promise执行完成

2.

    async function Request () {
      await new Promise(res => {
        setTimeout(() => {
          console.log(1)
          res()
        }, 1000)
      })
      await new Promise(res => {
        setTimeout(() => {
          res()
          console.log(2);

        }, 1000)
      }).then(() => console.log(2))
      new Promise(res => {
        setTimeout(() => {
          console.log(3)
          res()
        }, 1000)
      }).then(() => console.log(3))

    }
    Request()
// 此时执行为 1s后打印1,再过1s打印22,再过1s打印 33 和三个await结果一致
// 执行顺序为 等待第一个promise返回结果 => *** 打印4 ** 执行第二个promise,等待返回结果 => ** 打印5 **执行第三个promise => 第三个promise执行完成

3.

    async function Request () {
      await new Promise(res => {
        setTimeout(() => {
          console.log(1)
          res()
        }, 1000)
      })
      await new Promise(res => {
        setTimeout(() => {
          res()
          console.log(2);

        }, 1000)
      }).then(() => console.log(2))
      await new Promise(res => {
        setTimeout(() => {
          console.log(3)
          res()
        }, 1000)
      }).then(() => console.log(3))

    }
    Request()
// 此时执行为 1s后打印1,再过1s打印22 再过1s打印33
// 执行顺序为 等待第一个promise返回结果 => 执行第二个promise,等待返回结果 => 执行第三个promise => 等待第三个promise执行完成

同步打印的4,5可以看出函数执行是否被暂停,如果未暂停同步代码会一直执行完,而暂停后会等暂停处,执行完毕才继续执行同步代码
简单来说就是,await会阻塞其后的代码在awit出有结果之后才会继续往后执行.

4. 不同层级嵌套async await

当async进行嵌套之后则可能不会按照自己想要的顺序执行
同层级异步先执行完成,然后是下一层级的异步,依然是按照一个特定顺序

      let request = (data, time = 1000) =>
        new Promise(resolve => {
          setTimeout(() => {
            console.log('执行promise', data) // zdz-log
            resolve(data)
          }, time)
        })
      let res = ''
      async function getDetailData() {
        let resArr = []
        ;[(1, 2, 3)].forEach(async key => {
          res = (await request(key, 1000 + 100 * key)) + 'handle' + key
          resArr.push(res)
        })
        return resArr
      }
      async function getDetailDataNew() {
        return await new Promise(resolve => {
          let resArr = []
          let idArr = [1, 2, 3]
          idArr.forEach(async key => {
            res = (await request(key, 1000 + 100 * key)) + 'handle' + key
            resArr.push(res)
            if (resArr.length === idArr.length) {
              resolve(resArr)
            }
          })
        })
      }
      async function getDetailDataNew1() {
        let resArr = []
        let idArr = [1, 2, 3]
        let requestQueue = []
        idArr.forEach(key => {
          requestQueue.push(request(key))
        })
        return await Promise.all(requestQueue)
      }
      let deleteArea = async () => {
        let resArr = await getDetailData()
        await request(resArr)
      }
      let deleteAreaNew = async () => {
        let resArr = await getDetailDataNew()
        console.log(resArr, 'promise 改造后') // zdz-log
      }
      let deleteAreaNew1 = async () => {
        let resArr = await getDetailDataNew1()
        console.log(resArr, 'promise all 改造后') // zdz-log
      }
      deleteArea()
      setTimeout(() => {
        deleteAreaNew()
      }, 1000)
      setTimeout(() => {
        deleteAreaNew1()
      }, 2000)

image.png
image.png