使用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": "[email protected]",
        "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.