面试题：for await...of 有什么作用？

答案

• for await...of 用于遍历多个Promise
• 是Promise.all的代替品，只不过Promise.all是api形式并在then中获取数组结果，而for await of是循环形式，能快速在列表中把结果取出来

代码示例

• createPromise函数：

  function createPromise(val) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(val)
      }, 1000)
    })
  }

• 最基础调用：

  (async function () {
    const p1 = createPromise(100)
    const p2 = createPromise(200)
    const p3 = createPromise(300)

    const res1 = await p1
    console.log(res1)
    const res2 = await p2
    console.log(res2)
    const res3 = await p3
    console.log(res3)
    //同时出现 100 //200 //300
  })()

• Promise.all调用：

(async function () {
        const p1 = createPromise(100)
        const p2 = createPromise(200)
        const p3 = createPromise(300)
        // 以上三个一开始全部调用
        const list = [p1, p2, p3]
         Promise.all(list).then((res) => {
           console.log(res) //[100, 200, 300]
         })
      })()

• for await of调用:

  (async function () {
    const p1 = createPromise(100)
    const p2 = createPromise(200)
    const p3 = createPromise(300)

    const list = [p1, p2, p3]

    const list = [p1, p2, p3]
    for await (let res of list) {
      console.log(res) //同时出现 100 //200 //300
    }
  })()

• 扩展: 如何实现顺序出现res1 res2 res3?

    const res1 = await createPromise(100)
    console.log(res1)
    // 什么时候用什么时候创建（实现顺序调用）
    const res2 = await createPromise(200)
    console.log(res2)
    const res3 = await createPromise(300)
    console.log(res3)
    // 各隔一秒后顺序出现 --1s-- 100 --1s-- 200 --1s-- 300

• 实现循环

    const arr = [10,20,30]
    for(let num of arr){
      const res = await createPromise(num)
      console.log(res);
    }
 // 各隔一秒后顺序出现 --1s-- 100 --1s-- 200 --1s-- 300