跳到主要内容

第9章：网络请求与数据解析

简要说明​

在现代移动应用开发中，网络请求和数据解析是不可或缺的一部分。Flutter提供了强大的工具和库，使得开发者能够轻松地进行网络请求并处理返回的数据。本章将介绍如何在Flutter中使用http库进行网络请求，以及如何解析和序列化JSON数据。此外，我们还将探讨如何处理异步数据，以确保应用在等待网络响应时仍能保持流畅的用户体验。

关键知识点​

1. 使用http库进行网络请求​

http库是Flutter中用于进行网络请求的常用库。它提供了简单易用的API，使得开发者能够轻松地发送HTTP请求并处理响应。

示例：发送GET请求​

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

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

  if (response.statusCode == 200) {
    // 请求成功，处理响应数据
    print('Response data: ${response.body}');
  } else {
    // 请求失败，处理错误
    print('Request failed with status: ${response.statusCode}.');
  }
}

2. JSON数据的解析与序列化​

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛应用于网络通信中。Flutter提供了多种方式来解析和序列化JSON数据。

手动解析JSON​

import 'dart:convert';

void parseJson(String jsonString) {
  final Map<String, dynamic> jsonData = jsonDecode(jsonString);
  print('Post title: ${jsonData['title']}');
}

使用json_serializable自动生成解析代码​

为了简化JSON解析过程，可以使用json_serializable库来自动生成解析代码。

  1. 添加依赖：
dependencies:
  json_annotation: ^4.8.0

dev_dependencies:
  build_runner: ^2.3.3
  json_serializable: ^6.6.0
  1. 创建数据模型类：
import 'package:json_annotation/json_annotation.dart';

part 'post.g.dart';

@JsonSerializable()
class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

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

  factory Post.fromJson(Map<String, dynamic> json) => _$PostFromJson(json);
  Map<String, dynamic> toJson() => _$PostToJson(this);
}
  1. 生成解析代码：
flutter pub run build_runner build
  1. 使用生成的代码解析JSON：
void parseJsonWithModel(String jsonString) {
  final Map<String, dynamic> jsonData = jsonDecode(jsonString);
  final post = Post.fromJson(jsonData);
  print('Post title: ${post.title}');
}

3. 异步数据处理​

在Flutter中，网络请求通常是异步的，这意味着我们需要使用Future和async/await来处理异步操作。

示例：异步获取并解析数据​

Future<void> fetchAndParseData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

  if (response.statusCode == 200) {
    final Map<String, dynamic> jsonData = jsonDecode(response.body);
    final post = Post.fromJson(jsonData);
    print('Post title: ${post.title}');
  } else {
    print('Request failed with status: ${response.statusCode}.');
  }
}

总结​

本章介绍了如何在Flutter中进行网络请求并解析数据。我们学习了如何使用http库发送HTTP请求，如何手动和自动解析JSON数据，以及如何处理异步操作。这些知识是构建现代移动应用的基础，掌握它们将帮助你在Flutter开发中更加得心应手。

在下一章中，我们将探讨如何在Flutter中管理应用的状态，确保应用在不同页面和组件之间能够高效地共享和更新数据。