Flutter 高效自學筆記（三）——網路請求

方應杭在飢人谷發表於2019-05-30
Flutter筆記

log

首先我要知道如何打 log，搜一下 flutter log 就得到了答案——print() / debugPrint()

也可以使用另一個包

import 'dart:developer';
log('data: $data');
複製程式碼

請求網路

然後搜尋 flutter make http request，就搜尋到 Flutter 關於 http 的文件

flutter.dev/docs/cookbo…

  1. 安裝依賴，然後 flutter packages get
  2. import 'package:http/http.dart' as http;

然後核心邏輯大概是這樣

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

Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');
  if (response.statusCode == 200) {
    return Post.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load post');
  }
}
複製程式碼

看起來非常像 TypeScript 程式碼。

呼叫時機

那麼什麼時候呼叫 fetchPost 呢？

文件說不建議在 build 裡呼叫。

也對，我們一般也不在 React 的 render 裡面呼叫 axios。

文件推薦的一種方法是在 StatefulWidget 的 initState 或 didChangeDependencies 生命週期函式裡發起請求。

class _MyAppState extends State<MyApp> {
  Future<Post> post;

  @override
  void initState() {
    super.initState();
    post = fetchPost();
  }
  ...
複製程式碼

另一種方式就是先請求，然後把 Future 例項傳給一個 StatelessWidget

如何用 FutureBuilder 展示資料

FutureBuilder<Post>(
  future: fetchPost(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data.title);
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }

    // By default, show a loading spinner
    return CircularProgressIndicator();
  },
);
複製程式碼

FutureBuilder 接受一個 future 和 一個 builder，builder 會根據 snapshot 的內容，渲染不同的部件。

完整程式碼

import 'dart:async';
import 'dart:convert';

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

// 資料如何請求
Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    return Post.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load post');
  }
}

// 建模
class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({this.userId, this.id, this.title, this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

// 一開始就發起請求
void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget {
  final Future<Post> post;

  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>( // 這裡的 FutureBuilder 很方便
            future: post,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.title); // 獲取 title 並展示
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
                
              // 載入中
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}
複製程式碼

看起來只有 FutureBuilder 需要特別關注一下。

下節我將請求 LeanCloud 上的自定義資料，並且嘗試渲染在列表裡。

未完待續……

相關文章