從網際網路擷取資料

本教學所實作的整體架構模式稱為 Model-View-ViewModel，簡稱 MVVM。 MVVM 是一種用於用戶端應用程式的架構模式 (architectural pattern)， 它將你的應用程式分為三個層次：

• Model：負責資料操作。
• View：負責顯示使用者介面。
• ViewModel：負責管理狀態並連接前兩者。

MVVM（以及許多其他模式）的核心原則是關注點分離 (separation of concerns)。 在獨立的類別中管理狀態（在 UI 元件 (Widget) 之外）， 可以讓你的程式碼更易於測試、重用，以及維護。

你應用程式中的每個功能都包含 MVVM 的三個組成部分。 在本教學中，除了 Flutter 的元件之外， 你還會建立 ArticleModel、ArticleViewModel 以及 ArticleView。

Model 是應用程式資料的唯一真實來源，並負責低層次的任務， 例如發出 HTTP 請求、快取資料，或管理 Flutter 插件 (plugin) 所使用的系統資源。 Model 通常不需要匯入 Flutter 函式庫。

在你的 main.dart 檔案中建立一個空的 ArticleModel 類別：

class ArticleModel {
  // Properties and methods will be added here.
}

Wikipedia 提供了一個 REST API，可回傳有關文章的 JSON 資料。 在這個應用程式中，你將使用回傳隨機文章摘要的端點 (endpoint)。

https://en.wikipedia.org/api/rest_v1/page/random/summary

新增一個方法來擷取隨機的 Wikipedia 文章摘要：

class ArticleModel {
  Future<Summary> getRandomArticleSummary() async {
    final uri = Uri.https(
      'en.wikipedia.org',
      '/api/rest_v1/page/random/summary',
    );
    final response = await get(uri);
​
    // TODO: Add error handling and JSON parsing.
    throw UnimplementedError();
  }
}

使用 async 與 await 關鍵字來處理非同步 (asynchronous) 操作。 async 關鍵字將方法標記為非同步， 而 await 則等待回傳 Future 的運算式完成。

Uri.https 建構式透過處理編碼和格式化，能安全地建置 URL。 這種方式比字串串接更可靠， 尤其是在處理特殊字元或查詢參數時。

發出 HTTP 請求時，請務必處理錯誤。 狀態碼 200 表示成功，其他代碼則表示發生錯誤。 若狀態碼不是 200，Model 就會拋出錯誤，讓 UI 顯示給使用者。

class ArticleModel {
  Future<Summary> getRandomArticleSummary() async {
    final uri = Uri.https(
      'en.wikipedia.org',
      '/api/rest_v1/page/random/summary',
    );
    final response = await get(uri);
​
    if (response.statusCode != 200) {
      throw const HttpException('Failed to update resource');
    }
​
    // TODO: Parse JSON and return Summary.
    throw UnimplementedError();
  }
}

Wikipedia API 回傳 JSON 資料， 你需要將其解碼為 Summary 類別。 完成 getRandomArticleSummary 方法：

class ArticleModel {
  Future<Summary> getRandomArticleSummary() async {
    final uri = Uri.https(
      'en.wikipedia.org',
      '/api/rest_v1/page/random/summary',
    );
    final response = await get(uri);
​
    if (response.statusCode != 200) {
      throw const HttpException('Failed to update resource');
    }
​
    return Summary.fromJson(jsonDecode(response.body) as Map<String, Object?>);
  }
}

Summary 類別定義在 summary.dart 中。 若你對 JSON 解析不熟悉， 請參閱 Getting started with Dart 教學。