Flutter REST API介绍和使用

在本节中, 我们将学习如何在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.srcmini02.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;

  @override
  void 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;

  @override
  void initState() {
    super.initState();
    post = fetchPost();
  }

  @override
  Widget 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'], );
  }
}

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" 
   }
]