Flutter异步加载

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

前言

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

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

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

三种方式

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