剑鸣秋朔

Appearance

章节导航

Future 与 FutureBuilder 实用技巧 ​

什么是 Future ​

  • Future 表示在接下来的某个时间的值或错误，借助 Future 我们可以在 Flutter 实现异步操作。
  • 它类似于 ES6 中的 Promise，提供 then 和 catchError 的链式调用；
  • Future是dart:async包中的一个类，使用它时需要导入 dart:async 包，Future 有两种状态：
    pending - 执行中；
    completed - 执行结束，分两种情况要么成功要么失败；

Future 的常见用法 ​

  • 使用 future.then 获取 future 的值与捕获 future 的异常
  • 结合 async,await
  • future.whenComplete
  • future.timeout

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

shell
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 的原型 ​

shell
Future<R> then<R>(FutureOr<R> onValue(T value), {Function onError});

第一个参数会成功的结果回调，第二个参数onError可选表示执行出现异常。

示例 ​

结合 async await ​

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

shell
import 'dart:async';

test() async {
  int result = await Future.delayed(const 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。

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

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

future.timeout ​

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

shell
import 'dart:async';

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

什么是 FutureBuilder ​

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

FutureBuilder 的构造方法 ​

shell
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；
    none：当前未连接到任何异步计算；
    waiting：连接到异步计算并等待交互；
    active：表示异步计算还在进行中；
    done：表示异步计算完成；
  • data - 异步计算接收的最新数据；
  • error - 异步计算接收的最新错误对象；

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

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

FutureBuilder 的使用代码示例 ​

shell
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_net_storage/data_model.dart';
import 'package:http/http.dart' as http;

///Future与FutureBuilder实战应用
class FutureStudy extends StatefulWidget {
  const FutureStudy({super.key});

  @override
  State<StatefulWidget> createState() => _FutureStudyState();
}

class _FutureStudyState extends State<FutureStudy> {
  String showResult = '';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: false),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Future与FutureBuilder实用技巧'),
        ),
        body: FutureBuilder<DataModel>(
            future: fetchGet(),
            builder: (BuildContext context, AsyncSnapshot<DataModel> snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return const Text('state none');
                case ConnectionState.waiting:
                  return const Center(child: CircularProgressIndicator());
                case ConnectionState.active:
                  return const Text('state active');
                case ConnectionState.done:
                  if (snapshot.hasError) {
                    return Text(
                      '${snapshot.error}',
                      style: const TextStyle(color: Colors.red),
                    );
                  } else {
                    return Column(children: <Widget>[
                      Text('code:${snapshot.data?.code}'),
                      Text('requestPrams:${snapshot.data?.data?.requestPrams}'),
                    ]);
                  }
              }
            }),
      ),
    );
  }

  Future<DataModel> fetchGet() async {
    var uri =
        Uri.parse("https://api.geekailab.com/uapi/test/test?requestPrams=11");
    final response = await http.get(uri);
    Utf8Decoder utf8decoder = const Utf8Decoder(); //fix 中文乱码
    var result = json.decode(utf8decoder.convert(response.bodyBytes));
    return DataModel.fromJson(result);
  }
}