Flutter-异步加载（Future，async/await）

红豆生南国，春来发几枝
劝君多采撷，此物最相思

前言

先去JSONPlaceholder网站上找到一个接口：http://jsonplaceholder.typico...
返回的数据为json格式

安装一个HTTP插件：
http: ^0.12.0+2

在页面中导入：
import 'package:http/http.dart' as http;

概念

Future对象表示异步操作的结果，我们通常通过then（）来处理返回的结果
async用于标明函数是一个异步函数，其返回值类型是Future对象
await用来等待耗时操作的返回结果，这个操作会阻塞到后面的代码

三种方式

async/await
Future
FutureBuilder

async/await

被async修饰的函数，会返回一个Futured对象

    final String url = 'http://jsonplaceholder.typicode.com/posts';
    
      @override
      void initState() {
        super.initState();
        _getData();
      }
    
      _getData() async{
        // http.get返回的是一个Future
        var response = await http.get(url);
        print(response.body);
      }

Future

顾名思义就是指在不远的将来去执行，不会立刻去执行

这里的.then和Promise中的.then极其类似

    final String url = 'http://jsonplaceholder.typicode.com/posts';
    
      @override
      void initState() {
        super.initState();
        _getData();
      }
    
      _getData() {
        // http.get返回的是一个Future,当拿到数据后在.then中返回
        http.get(url).then((response){
          print(response.body);
        });
      }

FutureBuilder

    final String url = 'http://jsonplaceholder.typicode.com/posts';
    
      @override
      void initState() {
        super.initState();
      }
    
      _getData() {
        return http.get(url);
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('首页'),),
            body: FutureBuilder(future: _getData(), builder: (context, snap){
              if(!snap.hasData) {
                return Container();
              }
              var response = snap.data;
              print(response.body);
              return Container();
            })
        );
      }