從網際網路獲取資料

對於大多數應用而言，從網際網路獲取資料是必需的。幸運的是，Dart 和 Flutter 提供了諸如 http 包之類的工具來完成這類工作。

本示例將採取以下步驟

新增 `http` 包。
使用 http 包發起網路請求。
將響應轉換為自定義 Dart 物件。
使用 Flutter 獲取並顯示資料。

http 包提供了從網際網路獲取資料的最簡單方式。

要將 http 包新增為依賴項，請執行 flutter pub add。

flutter pub add http

匯入 http 包。

dart

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

如果你部署到 Android，請編輯 `AndroidManifest.xml` 檔案以新增網際網路許可權。

xml<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

同樣，如果你部署到 macOS，請編輯 `macos/Runner/DebugProfile.entitlements` 和 `macos/Runner/Release.entitlements` 檔案以包含網路客戶端授權。

xml<!-- Required to fetch data from the internet. -->
<key>com.apple.security.network.client</key>
<true/>

本教程將介紹如何使用 http.get() 方法從 JSONPlaceholder 獲取示例專輯。

dartFuture<http.Response> fetchAlbum() {
  return http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
}

http.get() 方法返回一個包含 Response 的 Future。

Future 是一個核心的 Dart 類，用於處理非同步操作。一個 Future 物件代表一個潛在的值或錯誤，它將在未來的某個時間可用。
`http.Response` 類包含成功 http 呼叫接收到的資料。

雖然進行網路請求很簡單，但直接處理原始的 `Future<http.Response>` 並不是很方便。為了簡化開發，請將 `http.Response` 轉換為 Dart 物件。

首先，建立一個 `Album` 類來包含網路請求中的資料。它包含一個工廠建構函式，用於從 JSON 建立 `Album` 物件。

使用模式匹配轉換 JSON 只是其中一種選項。更多資訊，請參閱關於 JSON 和序列化的完整文章。

dartclass Album {
  final int userId;
  final int id;
  final String title;

  const Album({required this.userId, required this.id, required this.title});

  factory Album.fromJson(Map<String, dynamic> json) {
    return switch (json) {
      {'userId': int userId, 'id': int id, 'title': String title} => Album(
        userId: userId,
        id: id,
        title: title,
      ),
      _ => throw const FormatException('Failed to load album.'),
    };
  }
}

現在，按照以下步驟更新 fetchAlbum() 函式，使其返回一個 Future<Album>

使用 `dart:convert` 包將響應體轉換為 JSON `Map`。
如果伺服器返回狀態碼為 200 的 OK 響應，則使用 fromJson() 工廠方法將 JSON Map 轉換為 Album。
如果伺服器沒有返回狀態碼為 200 的 OK 響應，則丟擲異常。（即使在“404 Not Found”伺服器響應的情況下，也要丟擲異常。不要返回 null。這在檢查 snapshot 中的資料時很重要，如下所示。）

dartFuture<Album> fetchAlbum() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
  );

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

太棒了！現在你已經有了一個從網際網路獲取專輯的函式。

在 initState() 或 didChangeDependencies() 方法中呼叫 fetchAlbum() 方法。

initState() 方法只被呼叫一次，之後就再也不會被呼叫。如果你想在 InheritedWidget 改變時重新載入 API，則將呼叫放入 didChangeDependencies() 方法中。有關更多詳細資訊，請參閱 State。

dartclass _MyAppState extends State<MyApp> {
  late Future<Album> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }
  // ···
}

此 Future 將在下一步中使用。

要在螢幕上顯示資料，請使用 FutureBuilder 小部件。FutureBuilder 小部件隨 Flutter 提供，可以輕鬆處理非同步資料來源。

你必須提供兩個引數

你想要處理的 Future。在本例中，是 fetchAlbum() 函式返回的 future。
一個 `builder` 函式，它根據 `Future` 的狀態（載入中、成功或錯誤）告訴 Flutter 要渲染什麼。

請注意，snapshot.hasData 僅在 snapshot 包含非空資料值時返回 true。

因為 fetchAlbum 只能返回非空值，所以即使在“404 Not Found”伺服器響應的情況下，該函式也應該丟擲異常。丟擲異常會將 snapshot.hasError 設定為 true，這可以用於顯示錯誤訊息。

否則，將顯示旋轉載入器。

dartFutureBuilder<Album>(
  future: futureAlbum,
  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 const CircularProgressIndicator();
  },
)

雖然方便，但建議不要將 API 呼叫放在 build() 方法中。

每當 Flutter 需要更改檢視中的任何內容時，它都會呼叫 build() 方法，這種情況發生的頻率令人驚訝。如果將 fetchAlbum() 方法放在 build() 中，它會在每次重建時重複呼叫，導致應用程式變慢。

將 fetchAlbum() 的結果儲存在狀態變數中，可以確保 Future 只執行一次，然後快取起來以供後續重建使用。

有關如何測試此功能的資訊，請參閱以下教程：

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

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

Future<Album> fetchAlbum() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
  );

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Album.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

class Album {
  final int userId;
  final int id;
  final String title;

  const Album({required this.userId, required this.id, required this.title});

  factory Album.fromJson(Map<String, dynamic> json) {
    return switch (json) {
      {'userId': int userId, 'id': int id, 'title': String title} => Album(
        userId: userId,
        id: id,
        title: title,
      ),
      _ => throw const FormatException('Failed to load album.'),
    };
  }
}

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late Future<Album> futureAlbum;

  @override
  void initState() {
    super.initState();
    futureAlbum = fetchAlbum();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Fetch Data Example')),
        body: Center(
          child: FutureBuilder<Album>(
            future: futureAlbum,
            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 const CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }

}

此頁面內容有幫助嗎？

感謝你的反饋！

提供詳情

感謝你的反饋！請告訴我們如何改進。

提供詳情

除非另有說明，本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2025-02-12。檢視原始碼或報告問題。

從網際網路獲取資料

1. 新增 `http` 包

2. 發起網路請求

3. 將響應轉換為自定義的 Dart 物件

建立一個 `Album` 類

將 `http.Response` 轉換為 `Album` 物件

4. 獲取資料

5. 顯示資料

為什麼在 initState() 中呼叫 fetchAlbum()？

測試

完整示例