在使用puppeteer爬取数据时，遇到了个报错问题，才发现了这个forEach与await的问题。
一、问题
利用搜集到的url，再去爬去对应数据时，我采用了forEach循环爬取，去遇到提示如下：UnhandledPromiseRejectionWarning: Error: Navigation Failed because browser has disconnected!，换句话说就是，还没爬，浏览器就关闭了，大概就是异步问题了。
简化下问题的过程，先创建个简单的sleep函数假装处理业务逻辑，
- async function sleep(time = 1000) {
- return new Promise((resolve) => {
- setTimeout(() => {
- resolve();
- },time);
- });
- }
主体函数：
- (async () => {
- await sleep();
- console.log('start');
- [0,1,2].forEach(async () => {
- await sleep();
- console.log(1111);
- });
- console.log('finish');
- })();
用node运行下，实际，forEach中的await并没有阻挡 finish 字符的输出，并且forEach创造出来的函数之间也并没有先后关联，三个1111几乎同时输出。
二、原因
为什么会造成这种原因呢？
再看下async与await的关系，只有在同一个async函数中，await才会按照对应的执行顺序依次执行，我们都知道forEach创造了独立的async函数（闭包问题），他内部的await已经与最外层的自执行async函数没有关联了（因为forEach并不是async函数），因此，循环出的三个方法也没有关联，都是各自等待1s就输出。
三、解决方法
使用for循环
既然这样，我们就是用不新建函数的循环，
- for (let i = 0; i < 3; ++i) {
- await sleep();
- console.log(1111);
- }
改造forEach
修改原型上的forEach方法，不推荐，你可以新写个each方法，
- Array.prototype.forEach = async function(fn) {
- let len = this.length;
- for (let i = 0; i < len; ++i) {
- await fn.call(this[i],i);
- }
- };
这样就可以了，最后，使用await写异步真是太爽了。
附上demo：await与foreach。