Async Await.md

Posted on | In

#Async Await ES2017 (这一块除了基础使用部分， 还要重新看一次)

Async Function

在ES6里， 我们有了Promise,这让我们的callback hell的处境又所好转， 但是， Promise依旧还是一个回调地狱.

1
2
3
4
5
6
7
8
9
10
fetchCurrentUser().then(function onUser (user) {
    return Promise.all([
        fetchArchivedOrders( user.id ),
        fetchCurrentOrders( user.id )
    ]);
}).then(function onOrder([
    archivedOrders, currentOrders
]){
    // do something
})

所以我们有了async/await.一种同步语法写异步的操作.

在我们了解async/await的时候，让我们从generators开始， 在各种node写的server端的库都有类似的一个runner函数， 你用generators产生了一个promise, 然后等待这个promise完成后， 给你返回值， 然后再往下走。感受一下， 这个是不是很像我们的async/await语法。

1
2
3
4
5
6
7
8
9
10
runner(function *main() {
    var user = yield fetchCurrentUser();

    var [ archivedOrders, currentOrders ] = yield Promise.all([
        fetchArchivedOrders( user.id ), 
        fetchCurrentOrders( user.id )
    ])

    // ....
})

接下来看一下async/await

1
2
3
4
5
6
7
8
9
10
11
12
async function main() {
    var user = await fetchCurrentUser();

    var [ archivedOrders, currentOrders ] = await Promise.all([
        fetchArchivedOrders( user.id ),
        fetchCurrentOrders( user.id )
    ])

    // ... 
}

main();

Async Iteration

我们平常使用的map， forEach函数都是基于同步的循环。他们遇到promise不知道怎么处理。

当我们在循环里嵌套await其实是存在问题的。基于我们的练习， 你可能会写出这样的代码

1
2
3
4
5
6
7
8
async fuction fetchFiles (files) {
    var prs = files.map(getFile);

    // 发现问题了吗？回调函数并不是一个async函数
    Prs.forEach( function each(pr) {
        console.log(await pr);
    })
}

Async Function Problems —(不是很懂， 要回去再看一次)

Async Generators with yield

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function fetchURLs() {
    var result = [];

    for(let url of urls) {
        let resp = await fetch( url );
        if(resp.status == 200) {
            let text = await resp.text();
            result.push( text.toUpperCase() );
        }else{
            result.push(undefined);
        }
    }

    return result;
}