从互联网上获取数据

2024-07-12 19:23| 来源: 网络整理| 查看: 265

编辑本页提Issue 从互联网上获取数据

从大多数应用程序都需要从互联网上获取数据，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: 2. 发起网络请求

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

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

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

Future是与异步操作一起工作的核心Dart类。它用于表示未来某个时间可能会出现的可用值或错误。 http.Response类包含一个成功的HTTP请求接收到的数据 3. 将响应转换为自定义Dart对象

虽然发出网络请求很简单，但如果要使用原始的Future并不简单。为了让我们可以开开心心的写代码，我们可以将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 json) { return new Post( userId: json['userId'], id: json['id'], title: json['title'], body: json['body'], ); } } 将http.Response 转换成一个Post对象

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

使用dart:convert package将响应内容转化为一个json Map。使用fromJson工厂函数，将json Map 转化为一个Post对象。 Future 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可以很容易与异步数据源一起工作。

我们需要提供两个参数：

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

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

new FutureBuilder( 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 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 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( 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(); }, ), ), ), ); } }

【本文地址】

从互联网上获取数据

从互联网上获取数据

今日新闻

推荐新闻