Flutter REST API

📌 相关文章

📜 Flutter REST API

📅 最后修改于: 2021-01-02 05:31:06 🧑 作者: Mango

在本节中，我们将学习如何在Flutter应用程序中访问REST API。如今，大多数应用程序都使用API使用远程数据。因此，对于那些希望在Flutter中成为其载体的开发人员来说，本节将是重要的部分。

Flutter提供了http包以使用http资源。 http程序包使用await和async功能，并提供许多高级方法，例如从远程位置发送和接收数据的read，get，post，put，head和delete方法。这些方法简化了基于REST的移动应用程序的开发。

http软件包的核心方法的详细说明如下：

读取：此方法用于读取或检索资源的表示形式。它使用get方法请求指定的url，并将响应作为Future 返回。

Get：此方法从get方法请求指定的url，并以Future 的形式返回响应。在此，响应是一个类，其中包含响应信息。

发布：此方法用于将数据提交到指定的资源。它通过发布给定的数据来请求指定的url，并以Future 的形式返回响应。

放置：此方法用于更新功能。它使用请求有效负载更新目标资源的所有当前表示形式。此方法请求指定的url并以Future >的形式返回响应。

头：它类似于Get方法，但是没有响应主体。

删除：此方法用于删除所有指定的资源。

http包还提供了支持持久连接的标准http客户端类。当在特定服务器上发出大量请求时，此类非常有用。应该使用close ()方法正确关闭它。否则，它将作为http类。以下代码对其进行了更清晰的说明。

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

要从Internet上获取数据，您需要执行以下必要步骤：

步骤1：安装最新的http软件包并将其添加到项目中。

要安装http包，请在您的项目文件夹中打开pubspec.yaml文件，然后在“依赖项”部分中添加http包。您可以在此处获取最新的http软件包，然后将其添加为：

dependencies:
  http:

您可以将http包导入为：

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

步骤2：接下来，使用http包发出网络请求。

在此步骤中，您需要使用http.get()方法发出网络请求

Future 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 json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      description: json['description'],
    );
  }
}

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

Future 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 {
  Future post;

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

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

FutureBuilder(
  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 {
Future 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(
            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 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 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" 
   }
]