Future

Future是dart:async包中的一个类，使用它时需要导入dart:async包，Future有两种状态：

pending - 执行中；
completed - 执行结束，分两种情况要么成功要么失败；

testFuture().then((s) {}, onError: (e){}).catchError((e) {})

如果catchError与onError同时存在，则会只调用onError；

结合async await

Future是异步的，如果我们要将异步转同步，那么可以借助async await来完成

import 'dart:async';

test() async {
    int result = await Future.delayed(Duration(milliseconds: 2000), () {
        return Future.value(123);
    });
    print('t3:'+ DateTime.now().toString());
    print(result);
}

main() {
    print('t1:' + DateTime.now().toString());
    test();
    print('t2:' + DateTime.now().toString());
}

// t1 t2 t3 123

future.whenComplete

有时候我们需要在Future结束的时候做些事情，我们知道then().catchError()的模式类似于try-catch，try-catch有个finally代码块，而future.whenComplete就是Future的finally

import 'dart:async';

test() async {
    int result = await Future.delayed(Duration(milliseconds: 2000), () {
        return Future.value(123);
    });
    print('t3:'+ DateTime.now().toString());
    print(result);
}

void main() {
    var random = Random();
    Future.delayed(Duration(seconds: 3), () {
        if (random.nextBool()) {
            return 100;
        } else {
            throw 'boom!';
        }
    }).then(print).catchError(print).whenComplete(() {
        print('done!');
    });
}

// 100
// done!

future.timeout

完成一个异步操作可能需要很长的时间，比如：网络请求，但有时我们需要为异步操作设置一个超时时间，那么，如何为Future设置超时时间呢

import 'dart:async';

void main() {
    new Future.delayed(new Duration(seconds: 3), () {
        return 1;
    }).timeout(new Duration(seconds: 2)).then(print).catchError(print);
}

运行需要3秒，2秒超时。则会打印错误TimeoutException after 0:00:02.000000:Future not completed

FutureBuilder

FutureBuilder是一个将异步操作和异步UI更新结合在一起的类，通过它我们可以将网络请求，数据库读取等的结果更新的页面上。

与react web端程序类似。

function Home(props) {
    const [data, setData] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        setIsLoading(true)
        const res = await getData();
        if (res.status === 200) {
            setData(res.data)
        } else {
            setData(res.msg)
        }
        setIsLoading(false)
    }, [])

    return (
        <div>
            {isLoading ? <Spin></Spin>: <div>{data}</div>}
        </div>
    )
}

FutureBuilder的构造方法

FutureBuilder({Key key, Future<T> future, T initialData, @required AsyncWidgetBuilder<T> builder })

future： Future对象表示此构建器当前连接的异步计算；
initialData：表示一个非空的Future完成前的初始化数据；
builder： AsyncWidgetBuilder类型的回到函数，是一个基于异步交互构建widget的函数

这个builder函数接受两个参数BuildContext context与 AsyncSnapshot<T> snapshot，它返回一个widget。AsyncSnapshot包含异步计算的信息，它具有以下属性：

connectionState - 枚举ConnectionState的值，表示与异步计算的连接状态，ConnectionState有四个值：none，waiting，active和done；
data - 异步计算接收的最新数据；
error - 异步计算接收的最新错误对象；

AsyncSnapshot还具有hasData和hasError属性，以分别检查它是否包含非空数据值或错误值。

现在我们可以看到使用FutureBuilder的基本模式。在创建新的FutureBuilder对象时，我们将Future对象作为要处理的异步计算传递。在构建器函数中，我们检查connectionState的值，并使用AsyncSnapshot中的数据或错误返回不同的窗口小部件。

使用FutureBuilder

import 'dart:convert';
 
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
 
void main() => runApp(new MyApp());
 
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();
}
 
class _MyAppState extends State<MyApp> {
  String showResult = '';
 
  Future<CommonModel> fetchPost() async {
    final response = await http.get('http://www.devio.org/io/flutter_app/json/test_common_model.json');
    Utf8Decoder utf8decoder = Utf8Decoder(); //fix 中文乱码
    var result = json.decode(utf8decoder.convert(response.bodyBytes));
    return CommonModel.fromJson(result);
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Future与FutureBuilder实用技巧'),
        ),
        body: FutureBuilder<CommonModel>(
            future: fetchPost(),
            initialData: '',
            builder:
                (BuildContext context, AsyncSnapshot<CommonModel> snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return new Text('Input a URL to start');
                case ConnectionState.waiting:
                  // 类似react的isLoading
                  return new Center(child: new CircularProgressIndicator());
                case ConnectionState.active:
                  return new Text('');
                case ConnectionState.done:
                  if (snapshot.hasError) {
                    // 类似react的status不是200
                    return new Text(
                      '${snapshot.error}',
                      style: TextStyle(color: Colors.red),
                    );
                  } else {
                    return new Column(children: <Widget>[
                      Text('icon:${snapshot.data.icon}'),
                      Text('statusBarColor:${snapshot.data.statusBarColor}'),
                      Text('title:${snapshot.data.title}'),
                      Text('url:${snapshot.data.url}')
                    ]);
                  }
              }
            }),
      ),
    );
  }
}
 
class CommonModel {
  final String icon;
  final String title;
  final String url;
  final String statusBarColor;
  final bool hideAppBar;
 
  CommonModel(
      {this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar});
 
  factory CommonModel.fromJson(Map<String, dynamic> json) {
    return CommonModel(
      icon: json['icon'],
      title: json['title'],
      url: json['url'],
      statusBarColor: json['statusBarColor'],
      hideAppBar: json['hideAppBar'],
    );
  }
}

Flutter异步通过数据渲染视图之Future和FutureBuilder