使用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恳求

选择和界说你的根底

上传文件

拦截器

定论

相关文章

读懂3大核心数据，助力提高用户留存

Combine | (V) Combine 中的错误处理和 Scheduler

中文多模态模型问世！IDPChat生成图像文字，只需5步+单GPU

Jetpack Compose | 可组合项生命周期及其常见处理Effect副作用API

作者信息