js - for await of 用法

function fn1() {
    return new Promise((resolve => {
        setTimeout(() => {
            resolve(1);
        }, 1000);
    }))
}
function fn2() {
    return new Promise((resolve => {
        setTimeout(() => {
            resolve(2);
        }, 3000);
    }))
}
function fn3() {
    return new Promise((resolve => {
        setTimeout(() => {
            resolve(3);
        }, 2000);
    }))
}


const arr = [fn1(), fn2(), fn3()];

!(async function () {
    for await (const value of arr) {
        console.log(value);
    }
})();

众所周知 for of可以遍历获取可迭代对象的value，
那么当一个数组里全是Promise对象的时候，我们在遍历的时候如何获取每个Promise的value呢？
那么就要使用 for await of 方法，如上图
上述代码的执行结果：
// 1 (1秒钟后)
// 2 (3秒钟后)
// 3 (2秒钟后)
上述代码在遍历时是同步的，也就是说是fn1执行后立即执行fn2，fn2执行后立即执行fn3
但是其中的定时器所设置的时间是1,3,2秒，但是打印的结果并不是1,3,2，
是因为输出的结果也是按照执行的顺序来输出的，
因此是循环后一秒钟输出1,再过2秒输出2,3；

和Promise.all的区别
如果结果都是成功：
for await of 会把所有的结果依次输出
Promise.all 输出一个成功的数组，包含所有成功的返回
如果结果存在失败：
for await of 会把所有的结果依次输出，失败的输出Uncaught(in promise) error
Promise.all 输出失败的返回值