从互联网获取数据

本教程实现的总体模式称为 模型-视图-视图模型 (Model-View-ViewModel) 或 MVVM。 MVVM 是一种用于客户端应用的架构模式，它将应用分为三层：

• Model：处理数据操作。

• View：显示 UI。

• ViewModel：管理状态并连接前两者。

MVVM（及许多其他模式）的核心原则是 关注点分离。在单独的类中管理状态（在 UI widget 之外）使代码更易测试、复用和维护。

应用中的单个功能包含 MVVM 的每个组件。在本教程中，除了 Flutter widget 外，你还将创建 ArticleModel、ArticleViewModel 和 ArticleView。

Model 是应用数据的唯一真实来源，负责底层任务，例如发起 HTTP 请求、缓存数据，或管理 Flutter 插件等使用的系统资源。 Model 通常不需要导入 Flutter 库。

在 main.dart 文件中创建一个空的 ArticleModel 类：

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

Wikipedia 提供返回文章 JSON 数据的 REST API。在本应用中，你将使用返回随机文章摘要的端点。

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 关键字处理异步操作。 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 教程。