从互联网上获取数据 - Flutter网络请求

从大多数应用程序都需要从互联网上获取数据，Dart和Flutter提供了相关工具！

注：本篇示例官方使用的是用http package发起简单的网络请求，但是http package功能较弱，很多常用功能都不支持。我们建议您使用dio 来发起网络请求，它是一个强大易用的dart http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载……详情请查看github dio .

步骤

1. 添加`http` package依赖
2. 使用`http` package发出网络请求
3. 将响应转为自定义的Dart对象
4. 获取并显示数据

1. 添加http package

http package提供了从互联网获取数据的最简单方法。

dependencies:
  http: <latest_version>

2. 发起网络请求

在这个例子中，我们将使用http.get 从JSONPlaceholder REST API中获取示例文章。

Future<http.Response> fetchPost() {
  return http.get('https://jsonplaceholder.typicode.com/posts/1');
}

http.get方法返回一个包含一个Response的Future。

• Future是与异步操作一起工作的核心Dart类。它用于表示未来某个时间可能会出现的可用值或错误。
• http.Response类包含一个成功的HTTP请求接收到的数据

3. 将响应转换为自定义Dart对象

虽然发出网络请求很简单，但如果要使用原始的Future<http.Response>并不简单。为了让我们可以开开心心的写代码，我们可以将http.Response转换成我们自己的Dart对象。

创建一个Post类

首先，我们需要创建一个Post类，它包含我们网络请求的数据。它还将包括一个工厂构造函数，它允许我们可以通过json创建一个Post对象。

手动转换JSON只是一种选择。有关更多信息，请参阅关于JSON和序列化的完整文章。

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

将http.Response 转换成一个Post对象

现在，我们将更新fetchPost函数以返回一个Future<Post>。为此，我们需要：

1. 使用dart:convert package将响应内容转化为一个json Map。
2. 使用fromJson工厂函数，将json Map 转化为一个Post对象。

Future<Post> fetchPost() async {
  final response = await http.get('https://jsonplaceholder.typicode.com/posts/1');
  final json = JSON.decode(response.body); 
  return new Post.fromJson(json); 
}

Hooray! 现在我们有一个函数，我们可以调用它从互联网上获取一篇文章！

4. 获取并显示数据

为了获取数据并将其显示在屏幕上，我们可以使用FutureBuilder widget！FutureBuilder Widget可以很容易与异步数据源一起工作。

我们需要提供两个参数：

1. future参数是一个异步的网络请求，在这个例子中，我们传递调用fetchPost()函数的返回值(一个future)。

2. 一个 builder 函数，这告诉Flutter在future执行的不同阶段应该如何渲染界面。

   new FutureBuilder<Post>(
     future: fetchPost(),
     builder: (context, snapshot) {
       if (snapshot.hasData) {
         return new Text(snapshot.data.title);
       } else if (snapshot.hasError) {
         return new Text("${snapshot.error}");
       }
       // By default, show a loading spinner
       return new CircularProgressIndicator();
     },
   );

   译者注：其中snapshot.data即为Future的结果。

完整的例子

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');
  final responseJson = json.decode(response.body);
  return new Post.fromJson(responseJson);
}
class Post {
  final int userId;
  final int id;
  final String title;
  final String body;
  Post({this.userId, this.id, this.title, this.body});
  factory Post.fromJson(Map<String, dynamic> json) {
    return new Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Fetch Data Example',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Fetch Data Example'),
        ),
        body: new Center(
          child: new FutureBuilder<Post>(
            future: fetchPost(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return new Text(snapshot.data.title);
              } else if (snapshot.hasError) {
                return new Text("${snapshot.error}");
              }
              // By default, show a loading spinner
              return new CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}