Flutter REST API介绍和使用 FlutterRESTAPI|Flutter

在本节中, 我们将学习如何在Flutter应用程序中访问REST API。如今, 大多数应用程序都使用API??使用远程数据。因此, 对于那些希望在Flutter中成为其载体的开发人员来说, 本节将是重要的部分。
Flutter提供了http包以使用http资源。 http程序包使用了await和async功能, 并提供了许多高级方法, 例如从远程位置发送和接收数据的read, get, post, put, head和delete方法。这些方法简化了基于REST的移动应用程序的开发。
http软件包的核心方法的详细说明如下：
读取：此方法用于读取或检索资源的表示形式。它使用get方法请求指定的url, 并将响应作为Future < String> 返回。
Get：此方法从get方法请求指定的url, 并以Future < response> 的形式返回响应。在此, 响应是一个类, 其中包含响应信息。
发布：此方法用于将数据提交到指定的资源。它通过发布给定的数据来请求指定的url, 并以Future < response> 的形式返回响应。
放置：此方法用于更新功能。它使用请求有效负载更新目标资源的所有当前表示形式。此方法请求指定的url, 并以Future < response> 的形式返回响应。
头：它类似于Get方法, 但没有响应主体。
删除：此方法用于删除所有指定的资源。
http包还提供了支持持久连接的标准http客户端类。当要在特定服务器上进行大量请求时, 此类非常有用。应该使用close()方法正确关闭它。否则, 它将作为http类。以下代码对其进行了更清晰的说明。

var client = new http.Client(); try { print(await client.get('https://www.srcmini.com/')); } finally { client.close(); }

要从Internet上获取数据, 你需要执行以下必要步骤：
步骤1：安装最新的http软件包并将其添加到项目中。
要安装http包, 请在你的项目文件夹中打开pubspec.yaml文件, 然后在“依赖项”部分中添加http包。你可以在此处获取最新的http软件包, 并添加如下内容：

dependencies:http: < latest_version>

你可以将http包导入为：

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

步骤2：接下来, 使用http包发出网络请求。
在此步骤中, 你需要使用http.get()方法发出网络请求

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

在上面的代码中, Future是一个包含对象的类。该对象表示潜在值或错误。
步骤3：现在, 将来自网络请求的响应转换为自定义Dart对象。
首先, 你需要创建一个Post类。 Post类从网络请求中接收数据, 并包括一个工厂构造函数, 该构造函数从JSON创建Post。你可以创建一个Post类, 如下所示：

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

现在, 你必须将http.response转换为Post。以下代码更新了fetchPost()函数以返回Future < Post> 。

Future< Post> fetchPost() async {final response = await http.get( Give the link of JSON file'); if (response.statusCode == 200) {// If the server returns an OK response, then parse the JSON.return Post.fromJson(json.decode(response.body)); } else {// If the response was umexpected, throw an error.throw Exception('Failed to load post'); }}

步骤4：现在, 用Flutter获取数据。你可以在initState()中调用fetch方法。以下代码说明了如何获取数据。

class _MyAppState extends State< MyApp> {Future< Post> post; @overridevoid initState() {super.initState(); post = fetchPost(); }

步骤5：最后, 显示数据。你可以使用FutureBuilder小部件显示数据。这个小部件可以轻松地与异步数据源一起使用。

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

让我们看完整的代码, 以了解Flutter如何与REST API一起从网络中获取数据。你可以从这里详细了解更多。

import 'dart:async'; import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() => runApp(MyApp()); class MyApp extends StatefulWidget {MyApp({Key key}) : super(key: key); @override_MyAppState createState() => _MyAppState(); }class _MyAppState extends State< MyApp> {Future< Post> post; @overridevoid initState() {super.initState(); post = fetchPost(); }@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter REST API Example', theme: ThemeData(primarySwatch: Colors.green, ), home: Scaffold(appBar: AppBar(title: Text('Flutter REST API Example'), ), body: Center(child: FutureBuilder< Post> (future: post, builder: (context, abc) {if (abc.hasData) {return Text(abc.data.title); } else if (abc.hasError) {return Text("${abc.error}"); }// By default, it show a loading spinner.return CircularProgressIndicator(); }, ), ), ), ); }}Future< Post> fetchPost() async {final response = await http.get('Give your JSON file web link.'); if (response.statusCode == 200) {// If the call to the server was successful (returns OK), parse the JSON.return Post.fromJson(json.decode(response.body)); } else {// If that call was not successful (response was unexpected), it throw an error.throw Exception('Failed to load post'); }}class Post {final int userId; final int id; final String title; final String description; Post({this.userId, this.id, this.title, this. description}); factory Post.fromJson(Map< String, dynamic> json) {return Post(userId: json['userId'], id: json['id'], title: json['title'], description: json[' description'], ); }}

【Flutter REST API介绍和使用】JSON文件如下所示。

[ { "userId": 01, "id": 1, "title": "iPhone", "description": "iPhone is the very stylist phone ever"}, { "userId": 02, "id": 2, "title": "Pixel", "description": "Pixel is the most feature phone ever"}, { "userId": 03, "id": 3, "title": "Laptop", "description": "Laptop is most popular development tool"}, { "userId": 04, "id": 4, "title": "Tablet", "description": "Tablet is the most useful device used for meeting" }]