前言
如果不了解使用的可参考 async 函数,这里不再赘述。
想要看原理的童鞋,需要了解下 Generator函数
原理
async实现就是将 Generator
函数和自动执行器,包装在一个函数里。
async function fn(args) {
// ...
}
function fn(args) {
return spawn(function* () {
// ...
})
}
所有的 async
函数都可以写成上面的第二种形式,其中 spawn
函数就是自动执行器。
function spawn(genF) {
return new Promise(function(resolve, reject) {
const gen = genF();
function step(nextF) {
let next;
try {
next = nextF();
} catch(e) {
return reject(e);
}
if(next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v); });
}, function(e) {
step(function() { return gen.throw(e); });
});
}
step(function() { return gen.next(undefined); });
});
}
常见面试题
- 实现一个sleep
- 实现一个红绿灯: 红灯2秒,黄灯1秒,绿灯3秒
- 使用 async 实现 Promise.all()的效果
实现一个 sleep: 每隔1秒输出 1, 2, 3, 4, 5
function sleep(interval) {
return new Promise(resolve => {
setTimeout(resolve, interval);
})
}
// 用法
async function one2FiveInAsync() {
for (let i = 1; i <= 5; i++) {
console.log(i);
await sleep(1000);
}
}
one2FiveInAsync();
实现一个红绿灯: 红灯2秒,黄灯1秒,绿灯3秒
function sleep(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration);
})
}
async function changeColor(color, duration) {
console.log('当前颜色', color);
await sleep(duration);
}
async function main() {
await changeColor('红色', 2000);
await changeColor('黄色', 1000);
await changeColor('绿色', 3000);
}
main();
使用 async 实现 Promise.all()的效果
async function test() {
const getFoo = (i) => {
return new Promise(resolve => setTimeout(() => {
resolve(i)
}, 1000))
}
// 写法一
// let values = await Promise.all([getFoo(1), getFoo(2), getFoo(3), getFoo(4)]);
// 写法二
const f1 = getFoo(1)
const f2 = getFoo(2)
const f3 = getFoo(3)
const f4 = getFoo(4)
let values = [await f1, await f2, await f3, await f4]
console.log('values', values)
}
test()