一、前言
前两天在项目中用for遍历的时候遇到了一个坑,花了一天的时间解决。这里就记一下。
二、问题
首先引一个很简单题目:给一个数组,每隔1s打印出来.这里我把我一开始在项目中的代码贴出来.(当然这里完全和业务无关的)
const _ = require('lodash');
const echo = async (i) => {
setTimeout(() => {
console.log('i===>', i);
}, 5000);
}
let arrs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const task = async () => {
_.forEach(arrs, async (i) => {
await echo(i);
})
}
const run = async () => {
console.log('run-start====>date:', new Date().toLocaleDateString())
await task() ;
console.log('run-end====>date:', new Date().toLocaleDateString())
}
(async () => {
console.log('start...')
await run();
console.log('end...')
})()
// start...
// run-start====>date: 2018-8-25
// run-end====>date: 2018-8-25
// end...
// i===> 1
// i===> 2
// i===> 3
// i===> 4
// i===> 5
// i===> 6
// i===> 7
// i===> 8
// i===> 9
上面的代码和输出已经给出了,很奇怪,这里的await并没有其效果.一开始因为是加了业务,是我的业务代码出了问题,然后我就把代码抽出来了,还是不起作用,当时我是真的对对await怀疑了。
最后还是给出问题的答案:
lodash的forEach和[].forEach不支持await,如果非要一边遍历一边执行await,可使用for-of
这里给出正确的代码:
const _ = require('lodash');
const echo = async (i) => {
return new Promise((resolve,reject)=>{
setTimeout(() => {
console.log('i===>', i,new Date().toLocaleTimeString());
resolve(i) ;
}, 2000);
})
}
let arrs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const task = async () => {
// _.forEach(arrs, async (i) => {
// await echo(ji) ;
// })
// arrs.forEach(async (i )=> {
// await echo(i) ;
// });
for (const i of arrs) {
await echo(i) ;
}
}
const run = async () => {
console.log('run-start====>date:', new Date().toLocaleDateString())
await task() ;
console.log('run-end====>date:', new Date().toLocaleDateString())
}
(async () => {
console.log('start...')
await run();
console.log('end...')
})()
// 输出
start...
run-start====>date: 2018-8-26
i===> 1 20:51:29
i===> 2 20:51:31
i===> 3 20:51:33
i===> 4 20:51:35
i===> 5 20:51:37
i===> 6 20:51:39
i===> 7 20:51:42
i===> 8 20:51:44
i===> 9 20:51:46
i===> 10 20:51:48
run-end====>date: 2018-8-26
end...
三、总结
当解决问题的时候,有时候可以使用排除法,比方说在这个例子中,我们知道await这个机制肯定是没问题的,如果真的有问题肯定不会轮到我测出来,那么其实剩下来的问题只能是for遍历的原因了.因为我一开始是用lodash实现的,那么就可以想是不是lodash的forEach没有作(或者做了多余)await处理,此时就可以换种方式试试了,总的来说还是经验的问题吧。
最后附上微信公众号,才开始准备在公众号写文章,排版什么的都不咋样,希望能够坚持下去,慢慢做好。