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