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 输出失败的返回值
js - for await of 用法
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 建议：阅读本篇需要对Promise有一定的认识 1.含义和用法 async 是一个修饰符，被它定义的函数会默认的返...
- 1.含义和用法async 是一个修饰符，被它定义的函数会默认的返回一个 Promise 的 resolve的值。因...
- 经常遇到这样的需求，循环请求数据渲染页面，光写循环请求包裹请求实体达不到想要的目的，那么要怎么做？首先要知道循环的...
