Flutter Android iOS

Flutter异步编程Future与FutureBuilder的实用技巧

Posted by CrazyCodeBoy的技术博客官网 on May 6, 2019

Flutter异步编程Future与FutureBuilder的实用技巧

为大家倾力打造的课程《Flutter从入门到进阶-实战携程网App》上线了，解锁Flutter开发新姿势，一网打尽Flutter核心技术 点我Get！！！

在这篇文章中，将向大家分享异步编程Future与FutureBuilder的一些实用知识和技巧，首先会带着大家认识什么是Future？、Future的常见用法？、以及什么是FutureBuilder？，以及FutureBuilder常见的用法？等。

  • 在大家Flutter开发环境过程中遇到无法解决的问题可以在课程问答区进行提问，课程老师会对你进行辅导和帮助；

目录

  • 什么是Future？
  • Future的常见用法？
    • 获取Future的结果？
    • 捕获Future的异常？
    • 结合async，await？
    • future.whenComplete？
    • future.timeout？
  • 什么是FutureBuilder？
  • FutureBuilder常见的用法？

什么是Future？

Future表示在接下来的某个时间的值或错误，借助Future我们可以在Flutter实现异步操作。

它类似于ES6中的Promise，提供then和catchError的链式调用；

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

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

Future的常见用法？

使用future.then获取future的值与捕获future的异常

import 'dart:async';

Future<String> testFuture() {
//   throw new Error();
  return Future.value('success');
//   return Future.error('error');
}

main() {
  testFuture().then((s) {
    print(s);
  }, onError: (e) {
    print('onError:');
    print(e);
  }).catchError((e) {
    print('catchError:');
    print(e);
  });
}

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

Future的then的原型：

Future<R> then<R>(FutureOr<R> onValue(T value), {Function 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());
}

练一练

future.whenComplete

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

import 'dart:async';
import 'dart:math';

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!');
  });
}

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);
}

运行上述代码会看到：TimeoutException after 0:00:02.000000: Future not completed。

练一练

什么是FutureBuilder？

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

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中的数据或错误返回不同的窗口小部件。

https://flutter-academy.com/async-in-flutter-futurebuilder/

FutureBuilder的使用？

...
class _MyAppState extends State<MyApp> {
  String showResult = '';

  Future<CommonModel> fetchPost() async {
    final response = await http
        .get('https://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(),
            builder:
                (BuildContext context, AsyncSnapshot<CommonModel> snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return new Text('Input a URL to start');
                case ConnectionState.waiting:
                  return new Center(child: new CircularProgressIndicator());
                case ConnectionState.active:
                  return new Text('');
                case ConnectionState.done:
                  if (snapshot.hasError) {
                    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'],
    );
  }
}

查看全部完整代码。

  • 本节学习过程中遇到无法解决的问题可以在课程问答区进行提问，课程老师会对你进行辅导和帮助；
  • 欢迎加入课程官方群：795410523 和讲师以及其他师兄弟们一起学习交流；

参考资料

CATALOG
    FEATURED TAGS
    Java 设计模式 Android 教程 Tools React Native 心得 总结 React Native实战教程 iOS 开源项目 GitHub 统计 分享 第三方登录 适配 开发指导 前端 Flutter react-navigation React Navigation Redux开发实用教程 Flutter教程 Dart iOS、Android Flutter更新
    FRIENDS