Flutter进阶篇（4）-- Flutter的Future异步详解

Posted 2023-02-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter进阶篇（4）-- Flutter的Future异步详解相关的知识，希望对你有一定的参考价值。

参考技术A

本文首发在公众号 Flutter那些事，欢迎大家多多关注。

工具安装：

Flutter基础篇：

Flutter进阶篇：

Dart语法基础篇：

Dart语法进阶篇：

说明：本文中的所有函数的引用在 main 函数中：

这里的执行结果是：

Futue直接new就可以了。我这里没有具体的返回数据，所以就用匿名函数代替了， Future future = new Future(() => null); 相当于 Future<Null> future = new Future(() => null); 泛型如果为null可以省略不写，为了便于维护和管理，开发中建议加上泛型。

输出结果是：

future里面有几个函数：
then ：异步操作逻辑在这里写。
whenComplete ：异步完成时的回调。
catchError ：捕获异常或者异步出错时的回调。

因为这里面的异步操作过程中没有遇到什么错误，所以catchError回调不会调用。

我们可以看到执行结果是：

我们可以看到输出结果是： 2 1 3 和我们创建Future对象的先后顺序完全一致。

我们可以看到结果为 1 2 3 ，和我们调用then的先后顺序无关。：

当then回调函数里面还有then回调的时候，这时候的流程跟前面就不太一样了，也是一个大坑，也是面试经常会被问到的一个知识点。

我们可以看到执行结果如下：

结果还是一样的：

运行结果是：

这里再次证明了上面我的猜想： 执行顺序和和创建Future的先后顺序有关，如果有多个then嵌套执行，先执行外面的then，然后执行里面的then。

执行结果如下，我们可以看到then内部创建的Future要等到then执行完了，最后再去执行的：

根据上文总结的特点，我们可以不用运行也能推断出输出结果：

为了验证我们的猜想，我们打印一下输出结果，果然我们的证明是正确的。

我们重点看看 then函数的文档说明：

then 注册在 Future 完成时调用的回调。
当这个 Future 用一个 value 完成时，将使用该值调用 onValue 回调。
如果 Future 已经完成，则不会立即调用回调，而是将在稍后的 microtask（微任务）中调度。
如果回调返回 Future ，那么 then 返回的 future 将与 callback 返回的 future 结果相同。

onError 回调必须接受一个参数或两个参数，后者是[StackTrace]。

如果 onError 接受两个参数，则使用错误和堆栈跟踪时调用它，否则仅使用错误对象时候调用它。

onError 回调必须返回一个可用于完成返回的future的值或future，因此它必须是可赋值给 FutureOr <R> 的东西。

返回一个新的 Future ，该 Future 是通过调用 onValue (如果这个Future是通过一个value完成的)或\' onError (如果这个Future是通过一个error完成的)的结果完成的。

如果调用的回调抛出异常，返回的 future 将使用抛出的错误和错误的堆栈跟踪完成。在 onError 的情况下，如果抛出的异常与 onError 的错误参数“相同(identical)”，则视为重新抛出，并使用原始堆栈跟踪替代

如果回调返回 Future ，则 then 返回的 Future 将以与回调返回的 Future 相同的结果完成。

如果未给出 onError ，并且后续程序走了刚出现了错误，则错误将直接转发给返回的 Future 。

在大多数情况下，单独使用 catchError 更可读，可能使用 test 参数，而不是在单个 then 调用中同时处理 value 和 error 。

请注意，在添加监听器(listener)之前， future 不会延迟报告错误。如果第一个 then 或 catchError 调用在 future 完成后发生 error ，那么 error 将报告为未处理的错误。

Flutter 知识点总结-进阶篇

文章目录

喜欢记得点个赞哟，我是王睿，很高兴认识大家！

1、http get请求数据、post提交数据、以及渲染动态数据

效果图：

导入： http: ^0.12.0+2库

Http_Back.dart

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

class HttpDemo extends StatefulWidget {
  HttpDemo({Key key}) : super(key: key);

  _HttpDemoState createState() => _HttpDemoState();
}

class _HttpDemoState extends State<HttpDemo> {

  List _list=[];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._getData();
  }
  _getData() async{
    var apiUrl="http://a.itying.com/api/productlist";
    var result=await http.get(apiUrl);
    if(result.statusCode==200){
      print(result.body);
      setState(() {
       this._list=json.decode(result.body)["result"];

      /*
      {
        "result": [{
            "_id": "5ac0896ca880f20358495508",
            "title": "精选热菜",
            "pid": "0",		
          }, {
            "_id": "5ac089e4a880f20358495509",
            "title": "特色菜",
            "pid": "0",
            
          }
        ]
      }

      */

      });
    }else{
      print("失败${result.statusCode}");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("请求数据Demo"),
      ),
      body: this._list.length>0?ListView(
        children: this._list.map((value){
            return ListTile(
              title: Text(value["title"]),
            );
        }).toList(),
      ):Text("加载中...")
    );
  }
}

请求数据

  //请求数据
  _getData() async{

    var apiUrl="http://192.168.0.5:3000/news";

    var result=await http.get(apiUrl);
    if(result.statusCode==200){
      // print(json.decode(result.body));
      setState(() {
         this._news=json.decode(result.body)["msg"]; 
      });
    }else{
      print(result.statusCode);
    }
  }

提交数据

  _postData() async{
    var apiUrl="http://192.168.0.5:3000/dologin";

    var result=await http.post(apiUrl, body: {'username': '张三', 'age': '20'});
    if(result.statusCode==200){
      print(json.decode(result.body));      
    }else{
      print(result.statusCode);
    }
  }

2、Dio库实现网络请求以及动态渲染数据

导入第三方库：Dio库

请求数据

  _getData() async{
      var apiUrl="http://192.168.0.5:3000/news";    
      Response response = await Dio().get(apiUrl);
      print(response.data);
  }

提交数据

 _postData() async{
      Map jsonData={
        "username":"哈哈哈",
        "age":20
      };
      var apiUrl="http://192.168.0.5:3000/dologin";
      Response response = await Dio().post(apiUrl,data:jsonData);
      print(response.data);
  }

Dio Get请求数据、渲染数据

import 'dart:convert';

import 'package:flutter/material.dart';

import 'package:dio/dio.dart';

class HttpDemo extends StatefulWidget {
  HttpDemo({Key key}) : super(key: key);

  _HttpDemoState createState() => _HttpDemoState();
}

class _HttpDemoState extends State<HttpDemo> {
  
  List _list=[];

  @override
  void initState() { 
    super.initState();
    this._getData();
  }

  _getData() async{
    var apiUrl="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    Response result=await Dio().get(apiUrl);

    // print(json.decode(result.data)["result"]);
    setState(() {
     this._list=json.decode(result.data)["result"]; 
    });  
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("请求数据Dio Demo"),
      ),
      body: this._list.length>0?ListView(
        children: this._list.map((value){
          return ListTile(
            title: Text(value["title"]),
          );
        }).toList(),
      ):Text("加载中...")
    );
  }
}

3、下拉刷新上拉分页加载更多

效果图：

学习之前需要导入Dio库，具体用法与导入连接请查看我的博客
Flutter进阶第2篇：Dio库实现网络请求以及动态渲染数据

News.dart

import 'package:flutter/material.dart';

import 'dart:convert';
import 'package:dio/dio.dart';

class NewsPage extends StatefulWidget {
  NewsPage({Key key}) : super(key: key);

  _NewsPageState createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage> {
  List _list = [];
  int _page = 1;
  bool hasMore = true; //判断有没有数据
  ScrollController _scrollController = new ScrollController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this._getData();

    //监听滚动条事件
    _scrollController.addListener(() {
      print(_scrollController.position.pixels); //获取滚动条下拉的距离

      print(_scrollController.position.maxScrollExtent); //获取整个页面的高度

      if (_scrollController.position.pixels >
          _scrollController.position.maxScrollExtent - 40) {
        this._getData();
      }
    });
  }

  void _getData() async {
    if (this.hasMore) {
      var apiUrl =
          "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=${_page}";

      var response = await Dio().get(apiUrl);
      var res = json.decode(response.data)["result"];   

      setState(() {
        this._list.addAll(res);  //拼接
        this._page++;
      });
      //判断是否是最后一页
      if (res.length < 20) {
        setState(() {
          this.hasMore = false;
        });
      }
    }
  }

  //下拉刷新
  Future<void> _onRefresh() async {
    await Future.delayed(Duration(milliseconds: 2000), () {
      print('请求数据完成');
      _getData();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新闻列表"),
      ),
      body: this._list.length > 0
          ? RefreshIndicator(
              onRefresh: _onRefresh,
              child: ListView.builder(
                controller: _scrollController,
                itemCount: this._list.length, //20
                itemBuilder: (context, index) {//19                  
                  if (index == this._list.length-1) {   //列表渲染到最后一条的时候加一个圈圈
                    //拉到底
                     return Column(
                      children: <Widget>[
                        ListTile(
                          title: Text("${this._list[index]["title"]}",
                              maxLines: 1),
                        ),
                        Divider(),
                        _getMoreWidget()
                      ],
                    );

                  } else {
                    return Column(
                      children: <Widget>[
                        ListTile(
                          title: Text("${this._list[index]["title"]}",
                              maxLines: 1),
                        ),
                        Divider()
                      ],
                    );
                  }
                },
              ))
          : _getMoreWidget(),
    );
  }

  //加载中的圈圈
  Widget _getMoreWidget() {

    if(hasMore){
      return Center(
        child: Padding(
          padding: EdgeInsets.all(10.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(
                '加载中...',
                style: TextStyle(fontSize: 16.0),
              ),
              CircularProgressIndicator(
                strokeWidth: 1.0,
              )
            ],
          ),
        ),
      );
    }else{
       return Center(
         child: Text("--我是有底线的--"),
       );
    }
  }
}

4、实现简单的新闻系统渲染新闻详情数据以及用flutter_html解析html

效果图：

点击这三个新闻列表的内容，即可进入新闻详情

学习之前需要导入Dio库，具体用法与导入连接请查看我的博客
Flutter进阶第2篇：Dio库实现网络请求以及动态渲染数据

还需要导入解析HTML代码的第三方库：
flutter_html

新闻列表代码：

import 'package:flutter/material.dart';

import 'dart:convert';
import 'package:dio/dio.dart';

class NewsPage extends StatefulWidget {
  NewsPage({Key key}) : super(key: key);

  _NewsPageState createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage> {
  List _list = [];
  int _page = 1;
  bool hasMore = true; //判断有没有数据
  ScrollController _scrollController = new ScrollController();

  @override
  void initState() {    
    super.initState();
    this._getData();

    //监听滚动条事件
    _scrollController.addListener(() {
      print(_scrollController.position.pixels); //获取滚动条下拉的距离

      print(_scrollController.position.maxScrollExtent); //获取整个页面的高度

      if (_scrollController.position.pixels >
          _scrollController.position.maxScrollExtent - 40) {
        this._getData();
      }
    });
  }

  void _getData() async {
    if (this.hasMore) {
      var apiUrl =
          "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=${_page}";

      var response = await Dio().get(apiUrl);
      var res = json.decode(response.data)["result"];   
      setState(() {
        this._list.addAll(res);  //拼接
        this._page++;
      });
      //判断是否是最后一页
      if (res.length < 20) {
        setState(() {
          this.hasMore = false;
        });
      }
    }
  }

  //下拉刷新
  Future<void> _onRefresh() async {
    await Future.delayed(Duration(milliseconds: 2000), () {
      print('请求数据完成');
      _getData();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("新闻列表"),
      ),
      body: this._list.length > 0
          ? RefreshIndicator(
              onRefresh: _onRefresh,
              child: ListView.builder(
                controller: _scrollController,
                itemCount: this以上是关于Flutter进阶篇（4）-- Flutter的Future异步详解的主要内容，如果未能解决你的问题，请参考以下文章 
 Flutter 开发手册
 重走Flutter状态管理之路—Riverpod进阶篇
 重走Flutter状态管理之路—Riverpod进阶篇
 Flutter -- 进阶Packages
 Flutter -- 进阶国际化
 Flutter入门篇

Flutter进阶篇（4）-- Flutter的Future异步详解

Flutter 知识点总结-进阶篇

文章目录

1、http get请求数据、post提交数据、以及渲染动态数据

2、Dio库实现网络请求以及动态渲染数据

3、下拉刷新 上拉分页加载更多

4、实现简单的新闻系统渲染新闻详情数据以及用flutter_html解析html

3、下拉刷新上拉分页加载更多