fs项目---->async/await的学习(一)
2018-07-11号,我来到了fs项目组担任后端开发的角色。这是我来thoughtworks以来首个的正式项目,不管是在技术还是在敏捷的实践中都是受益匪浅。来感受tw特殊的文化的同时,我希望自己能够学到更多的东西。不忘初心,坚持总结。这篇博客主要记载的是async/await在Array中使用遇到的一些问题。
一、async/await在Array.forEach中不work
我们想在forEach中执行操作再执行下面的操作,但是运行并没有生效。下面看一下forEach的事例
const waitFor = (ms) => new Promise(r => setTimeout(r, ms));
const start = async () => {
const array = [10, 20, 30];
array.forEach(async (item) => {
await waitFor(item);
console.log(item);
});
console.log('done');
}
start();
在nodejs(v10.6.0)中运行,可以看到如下的结果
done
10
20
30
原因的分析可以参考一下forEach的实现,这里暂时不做说明:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Polyfill. 下面提供两种提供的方案
- 不使用forEach,使用fori的循环,同步执行
const start = async () => {
const array = [10, 20, 30];
for (let i = 0; i < array.length; i++) {
await waitFor(array[i]);
console.log(array[i]);
}
console.log('done');
}
- 使用Promise.all和map的实现,异步执行
const start = async () => {
const array = [10, 20, 30];
await Promise.all(array.map(async num => {
await waitFor(num);
console.log(num);
}));
console.log('done');
}
最终得到我们想要的运行结果
10
20
30
done
二、async/await在Array.filter中不work
我们写一个js的例子,nodejs的版本是v10.6.0。代码如下
const filterOperate = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const start = async () => {
let array = [10, 20, 30];
array = array.filter(async (item) => {
await filterOperate(item);
return item === 20;
});
console.log(array);
console.log('done');
}
start();
运行的结果并不是我们想要的,如下:
[ 10, 20, 30 ]
done
我们需要改进filter,用我们定义的asyncFilter方法。定义如下:
const filterOperate = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const asyncFilter = async (arr, callback) => {
const fail = Symbol();
return (await Promise.all(arr.map(async item => (await callback(item)) ? item : fail))).filter(i => i !== fail);
};
const start = async () => {
let array = [10, 20, 30];
array = await asyncFilter(array, async (item) => {
await filterOperate(item);
return item == 20;
})
console.log(array);
console.log('done');
}
start();
打印的结果如下:
[ 20 ]
done
三、async/await在Array.map中不work
我们写一个js的例子,代码如下:
const promise = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const start = async () => {
let array = [10, 20, 30];
array = await array.map(async (item) => {
await promise(item);
return item * 2;
})
console.log(array);
console.log('done');
}
start();
运行的结果如下:
[ Promise { <pending> },
Promise { <pending> },
Promise { <pending> } ]
done
我们改进代码,使它返回正确的结果。只要在外面包含一层Promise.all就可以。如下
const promise = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const start = async () => {
let array = [10, 20, 30];
array = await Promise.all(array.map(async item => {
await promise(item);
return item * 2;
}));
console.log(array);
console.log('done');
}
start();
运行的结果如下:
[ 20, 40, 60 ]
done
作者:
huhx
出处: www.cnblogs.com/huhx
格言:你尽力了,才有资格说自己的运气不好。
版权:本文版权归作者huhx和博客园共有,欢迎转载。未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
出处: www.cnblogs.com/huhx
格言:你尽力了,才有资格说自己的运气不好。
版权:本文版权归作者huhx和博客园共有,欢迎转载。未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。