Fork me on GitHub

ES7 Async/Await 陷阱

什么是Async/Await

ES6新增了Promise函数用于简化项目代码流程。然而在使用promise时,我们仍然要使用callback,并且并不知道程序要干什么,例如:

function doSomething() {
    let i = 0;
    waitOneSecond() // 返回一个Promise对象
        .then(() => console.log(i));
    i = 5;
}

最终console.log(i) 的结果是5,并不是0

为此,ES7引入了async函数,前面的例子可以改写这样:

async function doSomething() {
    let i = 0;
    await waitOneSecond();// 等待1秒
    console.log(i);
    i = 5;
}

这段代码片段中console.log(i)的结果是0。其中关键字await停止当前函数的执行,直到waitOneSecond()返回的promise对象状态变更为fulfilled(完成),并产生其返回值。

当返回的promise对象的状态变更为rejected(失败),错误信息会被 try/catch 代码块所捕获。

 

常见陷阱

效率损失:

乱用async/await,可能导致低效的设计模式。例如,假设我们想从数据库中获得一些用户他们的年龄平均。我们会这样做的:

async function getUserAge(userId) {
    await waitOneSecond();// 等待1秒
    return 7;  
}
async function getAverageAge(userIds) {
    let sumOfAges = 0;
    let numOfUsers = userIds.length;
    for (let userId of userIds) {
        sumOfAges += await getUserAge(userId);
    }
    return sumOfAges / numOfUsers;
}

 显而易见,这是错误的,假设我们有5个用户,上面的代码片段会轮训所有的用户并且等待每一个单独调用数据库,所以最终整个函数的等待时间是5秒。

为了更好的性能,降低等待时间,修改如下:

async function getAverageAge(userIds) {
    let sumOfAges = 0;
    let numOfUsers = userIds.length;
    let agesPromises = userIds.map(getUserAge);//将每个用户对应的promise对象封装到数组中
    let ages = await Promise.all(agesPromises);//使用Promise.all调用
    for (let age of ages) {
        sumOfAges += age;
    }
    return sumOfAges / numOfUsers;
}

 修改之后,代码变得复杂了一些,但是所有的数据库调用,都是同时进行的。无论你有多少用户,这个方法的等待时间只需要1秒。

在使用async/await函数时,当函数体内需要使用await多次调用外部函数并且函数返回值彼此无依赖关系时,使用Promise.all降低函数整体的等待时间。

 

变量污染:

当使用async函数时,会令代码更易阅读,但是他们并不是真正的将你的代码变为同步,只是promise的语法糖而已,看下面这个例子

let currentUserId = 0;
async function getInfoAboutUser() {
    currentUserId++; // 令每个用户id均唯一
    let data = await waitTenSeconds(); // 获取某些其他数据,等待时间10秒
    return { id: currentUserId , data };
}
async function registerUser() {
    let user = await getInfoAboutUser();
    await storeUser(user);
}

现在假设,有2个不同的用户接连注册,getInfoAboutUser 函数将被接连执行,当10秒的等待时间结束后,2个用户的id都是相同的。

在这个例子中,我们可以很简单的避免这个问题:

async function getInfoAboutUser() {
    let data = await waitTenSeconds(); // 获取某些其他数据,等待时间10秒
    currentUserId++; //令每个用户id均唯一
    return { id: currentUserId };
}

 

 

结语

async/await函数的出现,极大的提高了javascript代码的可读性,但是他们并不是魔法,依然有很多未知的问题等待我们去发现。

我希望你喜欢这篇文章,并认为它游泳。如果有其他的陷阱,或者有任何疑问,请在评论中让我知道

 

posted @ 2017-08-22 17:05  云中桥  阅读(1292)  评论(0编辑  收藏  举报