ES7初步 Async/Await 之于异步编程

在前端的业务中经常出现一种场景:我们先执行promise1,然后根据返回值,作为参数传入promise2,之后再根据这两个Promises得值,执行promise3。

如果使用Promise

const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return promise2(value1)
.then(value2 => {
// do something
return promise3(value1, value2)
})
})
}

Promise.all可以来避免很深的嵌套。

const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return Promise.all([value1, promise2(value1)])
})
.then(([value1, value2]) => {
// do something
return promise3(value1, value2)
})
}

使用async/await会非常简单:

const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}

async 函数的用法:

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。下面的例子,指定多少毫秒后输出一个值。

function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}

async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value)
}

asyncPrint(‘hello world’, 50);

上面代码指定50毫秒以后,输出”hello world”。

如果希望多个请求并发执行,可以使用 Promise.all 方法:

async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));

let results = [];
for (let promise of promises) {
results.push(await promise);
}
console.log(results);
}
还有些注意的地方: await 命令只能用在 async 函数之中,如果用在普通函数,就会报错。