开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

前言

相信这两个关键字学习过JavaScript的朋友一定不陌生。如果说Future机制有点像JavaScript的Promise的话，那await和async那基本就是完全一样了。

下面我们开始将await与async。

正文

1. JavaScript版

首先我们先来看看JavaScript的await和async。

async的函数在执行后都会自动返回一个Promise对象，对于有无具体的返回值，则是根据标有async的函数中有无return值。
await必须在async函数里使用，不能单独使用。
await后面需要跟Promise对象，不然就没有意义。
await后面的Promise对象不必写then，因为await就是用来获取后面Promise对象成功状态传递出来的参数值。

function ajax(url) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(Math.random() + url)
        }, 1000);
    })
}

async function request() {
    const res1 = await ajax('url1')
    const res2 = await ajax(`url2?random=${res1}`)
    const res3 = await ajax(`url3?random=${res2}`)
    const res4 = await ajax(`url4?random=${res3}`)
    //    do something
    console.log(res4);
}

综上，在JavaScript中，async/await作用是用同步方式，执行异步操作。

而本质上，async与await是JavaScript中ES7语法中的生成器的语法糖而已。

具体什么是JS中的生成器，大家可以了解这一篇文章，这里不再赘述。简单来说JS中的Promise与生成器就是用来解决回掉地狱的。

2.Flutter版

Flutter版本与JavaScript版本的await用法其实差不多。

Future getUser() async {
    return Future.delay(...{
        return ...;
    });
}

Future getData(User user) async {
    return Future.delay(...{
        return ...;
    });
}

void main(){
    /// 回调使用
    getUser().then(value=>{
        getData(value).then(()=>{...});
    });
}

假如你了解Flutter中Future的基本用法，你会发现假如一直用then那些可以链式调用的函数来处理返回值存在一个问题：使用链式调用的方式把多个Future连接在一起，会严重降低代码的可读性。（可以参考上面的代码）。

与Js一样，我们可以使用async和await关键字实现异步的功能。async和await可以帮助我们像写同步代码一样编写异步代码。其本质上也是语法糖。

Future getUser() async {
    return Future.delay(...{
        return ...;
    });
}

Future getData(User user) async {
    return Future.delay(...{
        return ...;
    });
}

void main(){
    /// await用法
    User user = await getUser();
    Data data = await getData(user);
}

Dart | await 与 async的理解（对比Js）

前言

正文

1. JavaScript版

2.Flutter版