使用Dio在Flutter中联网-六虎

运用开发的一个关键部分是高雅地处理网络恳求。网络回来的呼应或许包括意想不到的成果，为了有一个良好的用户体验，你需求提前处理好边际状况。

在这篇文章中，咱们将看看怎么运用Dio包在Flutter中处理REST API恳求。

什么是Dio？

Dio是Dart的一个强壮的HTTP客户端。它支持拦截器、大局配置、FormData 、恳求取消、文件下载和超时等等。Flutter供给了一个http包，关于履行根本的网络使命很好，但在处理一些高档功能时，运用起来相当令人生畏。相比之下，Dio供给了一个直观的API，能够轻松地履行高档网络使命。

开端运用

让咱们从创立一个新的Flutter项目开端。运用下面的指令。

flutter create dio_networking

你能够用你喜爱的IDE翻开这个项目，但在这个比如中，我将运用VS Code。

code dio_networking

将Dio包添加到你的pubspec.yaml 文件中。

dependencies:
  dio: ^4.0.0

用以下内容替换你的main.dart 文件的内容。

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dio Networking',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

咱们将在获取网络数据后界说HomePage 类。

现在，让咱们看一下咱们将用于演示的网络数据。

用API数据进行测验

咱们将运用REQ | RES来测验咱们的网络数据，由于它为你供给了一个由样本用户数据组成的保管REST API，并答应你进行各种网络操作测验。

咱们将首要做一个简略的GET恳求来获取Single User 数据。这需求的端点是。

GET https://reqres.in/api/users/<id>

留意这儿<id> ，有必要用一个整数值来代替，这个整数值对应于并用于寻找一个特定的用户。

下面是恳求成功后的JSON呼应样本的样子。

{
    "data": {
        "id": 2,
        "email": "janet.weaver@reqres.in",
        "first_name": "Janet",
        "last_name": "Weaver",
        "avatar": "https://reqres.in/img/faces/2-image.jpg"
    }
}

界说一个模型类

假如你想轻松地处理从REST API恳求中回来的数据，你会想界说一个模型类。

现在，咱们仅仅界说一个简略的类来存储单个用户的数据。你能够替换运用纯Dart代码或一个库，而不需求在同一个示例运用程序中做任何其他改动。咱们将像这样手动界说一个模型类。

class User {
  User({
    required this.data,
  });
  Data data;
  factory User.fromJson(Map<String, dynamic> json) => User(
        data: Data.fromJson(json["data"]),
      );
  Map<String, dynamic> toJson() => {
        "data": data.toJson(),
      };
}
class Data {
  Data({
    required this.id,
    required this.email,
    required this.firstName,
    required this.lastName,
    required this.avatar,
  });
  int id;
  String email;
  String firstName;
  String lastName;
  String avatar;
  factory Data.fromJson(Map<String, dynamic> json) => Data(
        id: json["id"],
        email: json["email"],
        firstName: json["first_name"],
        lastName: json["last_name"],
        avatar: json["avatar"],
      );
  Map<String, dynamic> toJson() => {
        "id": id,
        "email": email,
        "first_name": firstName,
        "last_name": lastName,
        "avatar": avatar,
      };
}

为了防止手动界说时或许呈现的不被留意的过错，你能够运用JSON序列化并自动生成工厂办法。

为此，你将需求以下包。

[json_serializable](https://pub.dev/packages/json_serializable)
[json_annotation](https://pub.dev/packages/json_annotation)
[build_runner](https://pub.dev/packages/build_runner)

将它们添加到你的pubspec.yaml 文件中。

dependencies:
  json_annotation: ^4.0.1
dev_dependencies:
  json_serializable: ^4.1.3
  build_runner: ^2.0.4

将用户和数据类分离成两个Dart文件–user.dart 和data.dart ，并修正其内容。

User 类的内容将如下。

import 'package:json_annotation/json_annotation.dart';
import 'data.dart';
part 'user.g.dart';
@JsonSerializable()
class User {
  User({
    required this.data,
  });
  Data data;
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

Data 类的内容将如下。

import 'package:json_annotation/json_annotation.dart';
part 'data.g.dart';
@JsonSerializable()
class Data {
  Data({
    required this.id,
    required this.email,
    required this.firstName,
    required this.lastName,
    required this.avatar,
  });
  int id;
  String email;
  @JsonKey(name: 'first_name')
  String firstName;
  @JsonKey(name: 'last_name')
  String lastName;
  String avatar;
  factory Data.fromJson(Map<String, dynamic> json) => _$DataFromJson(json);
  Map<String, dynamic> toJson() => _$DataToJson(this);
}

fromJson 和toJson 办法将由json_serializable 包生成。一些类的特点被注释为@JsonKey ，由于在地图中界说的称号（以及由API恳求回来的称号）与它们的特点称号不同。

你能够运用以下指令来触发代码生成。

flutter pub run build_runner build

坚持代码生成器在服务器中运转，这样对类的任何新的改动都会自动触发代码生成。运用下面的指令来做到这一点。

flutter pub run build_runner serve --delete-conflicting-outputs

--delete-conflicting-outputs 标志有助于在发现任何冲突时重新生成生成类的一部分。

初始化Dio

你能够创立一个单独的类，包含履行网络操作的办法。这有助于将功能逻辑与用户界面代码分开。

要做到这一点，创立一个包含DioClient 类的新文件dio_client.dart 。

class DioClient {
  // TODO: Set up and define the methods for network operations
}

你能够用以下办法初始化Dio。

import 'package:dio/dio.dart';
class DioClient {
  final Dio _dio = Dio();
}

界说API服务器的根本URL。

import 'package:dio/dio.dart';
class DioClient {
  final Dio _dio = Dio();
  final _baseUrl = 'https://reqres.in/api';
  // TODO: Add methods
}

现在，咱们能够界说履行网络恳求所需的办法。

界说GET恳求

咱们将界说一个办法，经过传递一个id ，从API检索单个用户的数据。

Future<User> getUser({required String id}) async {
    // Perform GET request to the endpoint "/users/<id>"
    Response userData = await _dio.get(_baseUrl + '/users/$id');
    // Prints the raw data returned by the server
    print('User Info: ${userData.data}');
    // Parsing the raw JSON data to the User class
    User user = User.fromJson(userData.data);
    return user;
}

上述办法是可行的，但假如这儿有任何编码过错，当你运转它时，运用程序就会崩溃。

一个更好、更有用的办法是用一个try-catch 块来包裹get() 办法。

Future<User?> getUser({required String id}) async {
  User? user;
  try {
    Response userData = await _dio.get(_baseUrl + '/users/$id');
    print('User Info: ${userData.data}');
    user = User.fromJson(userData.data);
  } on DioError catch (e) {
    // The request was made and the server responded with a status code
    // that falls out of the range of 2xx and is also not 304.
    if (e.response != null) {
      print('Dio error!');
      print('STATUS: ${e.response?.statusCode}');
      print('DATA: ${e.response?.data}');
      print('HEADERS: ${e.response?.headers}');
    } else {
      // Error due to setting up or sending the request
      print('Error sending request!');
      print(e.message);
    }
  }
  return user;
}

在这个比如中，咱们还使User 为空，以便在呈现任何过错时，服务器将回来null ，而不是任何实践的用户数据。

为了显现用户数据，咱们有必要树立HomePage 类。创立一个名为home_page.dart 的新文件，并在其间添加以下内容。

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  final DioClient _client = DioClient();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Info'),
      ),
      body: Center(
        child: FutureBuilder<User?>(
          future: _client.getUser(id: '1'),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              User? userInfo = snapshot.data;
              if (userInfo != null) {
                Data userData = userInfo.data;
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Image.network(userData.avatar),
                    SizedBox(height: 8.0),
                    Text(
                      '${userInfo.data.firstName} ${userInfo.data.lastName}',
                      style: TextStyle(fontSize: 16.0),
                    ),
                    Text(
                      userData.email,
                      style: TextStyle(fontSize: 16.0),
                    ),
                  ],
                );
              }
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

在_HomePageState 类中，首要实例化DioClient 。然后，在build 办法里边，用一个FutureBuilder 来检索和显现用户数据。在获取成果的一起，将显现一个CircularProgressIndicator 。

界说POST恳求

你能够运用POST恳求来向API发送数据。让咱们试着发送一个恳求并创立一个新的用户。

首要，我将界说另一个模型类，由于这个JSON数据的特点将与从前界说的User 模型类不同，用于处理咱们要发送的用户信息。

import 'package:json_annotation/json_annotation.dart';
part 'user_info.g.dart';
@JsonSerializable()
class UserInfo {
  String name;
  String job;
  String? id;
  String? createdAt;
  String? updatedAt;
  UserInfo({
    required this.name,
    required this.job,
    this.id,
    this.createdAt,
    this.updatedAt,
  });
  factory UserInfo.fromJson(Map<String, dynamic> json) => _$UserInfoFromJson(json);
  Map<String, dynamic> toJson() => _$UserInfoToJson(this);
}

在DioClient 类中指定一个办法来创立一个新的用户。

Future<UserInfo?> createUser({required UserInfo userInfo}) async {
  UserInfo? retrievedUser;
  try {
    Response response = await _dio.post(
      _baseUrl + '/users',
      data: userInfo.toJson(),
    );
    print('User created: ${response.data}');
    retrievedUser = UserInfo.fromJson(response.data);
  } catch (e) {
    print('Error creating user: $e');
  }
  return retrievedUser;
}

这需求一个UserInfo 目标作为参数，然后将其发送到API的/users 端点。它回来一个包含新创立的用户信息以及创立日期和时刻的呼应。

界说PUT恳求

你能够经过运用PUT恳求来更新API服务器中的数据。

为了在DioClient 类中界说一个更新用户的新办法，咱们有必要把更新的UserInfo 目标和咱们要运用更新的用户的id 一起传给他。

Future<UserInfo?> updateUser({
  required UserInfo userInfo,
  required String id,
}) async {
  UserInfo? updatedUser;
  try {
    Response response = await _dio.put(
      _baseUrl + '/users/$id',
      data: userInfo.toJson(),
    );
    print('User updated: ${response.data}');
    updatedUser = UserInfo.fromJson(response.data);
  } catch (e) {
    print('Error updating user: $e');
  }
  return updatedUser;
}

上面的代码将发送一个PUT恳求到端点/users/<id> ，以及UserInfo 数据。然后它回来更新的用户信息和更新的日期和时刻。

界说DELETE恳求

你能够经过运用DELETE恳求从服务器上删去一些数据。

在DioClient 类中界说一个新的办法，经过传递用户的id ，从API服务器上删去一个用户。

Future<void> deleteUser({required String id}) async {
  try {
    await _dio.delete(_baseUrl + '/users/$id');
    print('User deleted!');
  } catch (e) {
    print('Error deleting user: $e');
  }
}

选择和界说你的根底

与其每次都经过baseUrl 来传递端点，你能够在BaseOptions 中界说它，并在实例化Dio 时传递一次。

要做到这一点，你要按以下办法初始化Dio 。

final Dio _dio = Dio(
  BaseOptions(
    baseUrl: 'https://reqres.in/api',
    connectTimeout: 5000,
    receiveTimeout: 3000,
  ),
);

这个办法也供给了各种其他的定制–在这个相同的比如中，咱们已经为恳求界说了connectTimeout 和receiveTimeout 。

上传文件

Dio使向服务器上传文件的过程变得愈加简略。它能够处理多个一起上传的文件，并有一个简略的回调来盯梢它们的进展，这使得它比http 包更简单运用。

你能够运用FormData 和Dio轻松地将文件上传到服务器。下面是一个向API发送图像文件的比如，看起来像什么。

String imagePath;
FormData formData = FormData.fromMap({
  "image": await MultipartFile.fromFile(
    imagePath,
    filename: "upload.jpeg",
  ),
});
Response response = await _dio.post(
  '/search',
  data: formData,
  onSendProgress: (int sent, int total) {
    print('$sent $total');
  },
);

拦截器

你能够经过运用then 或catchError 在处理Dio恳求、呼应和过错之前拦截它们。在实践场景中，拦截器关于运用JSON Web Tokens(JWT)进行授权、解析JSON、处理过错以及轻松调试Dio网络恳求非常有用。

你能够经过掩盖三个地方的回调来运转拦截器：onRequest,onResponse, 和onError 。

关于咱们的比如，咱们将界说一个简略的拦截器来记载不同类型的恳求。创立一个名为Logging 的新类，该类扩展自Interceptor 。

import 'package:dio/dio.dart';
class Logging extends Interceptor {
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    print('REQUEST[${options.method}] => PATH: ${options.path}');
    return super.onRequest(options, handler);
  }
  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    print(
      'RESPONSE[${response.statusCode}] => PATH: ${response.requestOptions.path}',
    );
    return super.onResponse(response, handler);
  }
  @override
  void onError(DioError err, ErrorInterceptorHandler handler) {
    print(
      'ERROR[${err.response?.statusCode}] => PATH: ${err.requestOptions.path}',
    );
    return super.onError(err, handler);
  }
}

在这儿，咱们重写了由Dio恳求触发的各种回调，并在每个回调中添加了一个打印句子，以便在操控台中记载恳求。

在初始化过程中把拦截器添加到Dio 。

final Dio _dio = Dio(
    BaseOptions(
      baseUrl: 'https://reqres.in/api',
      connectTimeout: 5000,
      receiveTimeout: 3000,
    ),
  )..interceptors.add(Logging());

在Debug操控台中记载的成果会是这样的。

定论

在Flutter中运用Dio进行联网感觉很轻松，它能够高雅地处理许多边际状况。Dio使得处理多个一起进行的网络恳求变得愈加简单，所有这些都有一个先进的过错处理技能的保障。它还答应你避免运用http 包来盯梢任何文件上传进展所需的模板代码。还有其他各种高档定制，你能够运用Dio包来完结，这超出了咱们在这儿的范围。

谢谢你阅览这篇文章!假如你对这篇文章或比如有任何建议或问题，请随时在Twitter或LinkedIn上与我联络。你也能够在我的GitHub上找到示例运用程序的存储库。

The postNetworking in Flutter using Dioappeared first onLogRocket Blog.

使用Dio在Flutter中联网

什么是Dio？

开端运用

用API数据进行测验

界说一个模型类

初始化Dio

界说GET恳求

界说POST恳求

界说PUT恳求

界说DELETE恳求

选择和界说你的根底

上传文件

拦截器

定论

作者信息

推广

使用Dio在Flutter中联网

什么是Dio？

开端运用

用API数据进行测验

界说一个模型类

初始化Dio

界说GET恳求

界说POST恳求

界说PUT恳求

界说DELETE恳求

选择和界说你的根底

上传文件

拦截器

定论

相关文章

【安卓音视频开发OpenGLES】 开发入门（三）：绘制一个3D立方体

Spring 6 的新特性：HTTP Interface

ChatGPT Plugins插件的开发原来就这么简单，看完就会

安卓Kotlin开发学习——接着看高阶函数

作者信息

推广

【安卓音视频开发OpenGLES】开发入门（三）：绘制一个3D立方体