Flutter – 使用 HTTP 获取 JSON 数据

在移动应用程序中，获取和处理数据是非常常见的需求。Flutter 提供了很多种方法来获取数据，其中使用 HTTP 请求获取 JSON 数据是最常见的方法之一。

在本篇文章中，我们将学习如何通过 HTTP 请求获取 JSON 数据，并将其转换为可用于 Flutter 中的 Dart 对象。

步骤

以下是获取 JSON 数据的基本步骤：

1. 导入 http 包

在 pubspec.yaml 中，将 http 包添加到依赖列表：

dependencies:
  http: ^0.13.2

在 Dart 代码中，导入 http 包并使用 get 方法发送 GET 请求。

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

2. 发送 HTTP 请求并获取响应

发送 GET 请求并获取响应的基本语法：

var response = await http.get(Uri.parse(url));

此代码将使用 http 包中的 get 方法向指定的 URL 发送 GET 请求，并返回一个 Response 对象。

我们可以使用 statusCode 属性获取服务器响应的状态码：

print(response.statusCode);

3. 解析 JSON 数据

我们需要使用 dart:convert 包中的 jsonDecode 方法将 JSON 数据转换为 Dart 对象。

import 'dart:convert';

// ...

var data = jsonDecode(response.body);

此代码将使用 jsonDecode 方法将服务器响应的 body 字符串转换为 Dart 对象。

4. 将 JSON 数据转换为 Dart 对象

为了更好地处理数据，我们需要将 JSON 数据转换为 Dart 对象。这可以通过创建一个模型类来实现。

下面是一个示例模型类：

class Post {
  final int id;
  final String title;
  final String body;

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

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

在此模型类中，我们定义了三个属性：id、title 和 body。我们还实现了一个名为 fromJson 的工厂方法，该方法将 JSON 数据转换为 Post 对象。

5. 使用转换后的数据

现在我们已经将 JSON 数据转换为 Dart 对象，我们可以像使用任何其他 Dart 对象一样使用它。

var post = Post.fromJson(data);
print(post.title);

此代码将打印 post 对象的 title 属性。

示例代码

以下是一个完整的示例程序，演示了获取 JSON 数据并将其转换为 Post 对象。该程序在从 JSONPlaceholder 下载的示例数据中运行。

import 'dart:convert';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter – 使用 HTTP 获取 JSON 数据',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter – 使用 HTTP 获取 JSON 数据'),
        ),
        body: Center(
          child: FutureBuilder<Post>(
            future: fetchPost(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data!.title);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }

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

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return Post.fromJson(data);
    } else {
      throw Exception('获取数据失败');
    }
  }
}

class Post {
  final int id;
  final String title;
  final String body;

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

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

结论

在本文中，我们学习了如何使用 HTTP 请求获取 JSON 数据，并将其转换为可用于 Flutter 中的 Dart 对象。使用 http 包和 dart:convert 包中的工具，以及创建模型类和使用 FutureBuilder 小部件来获取和处理数据是非常简单的。