详解在Flutter中如何使用dio

应用程序开发的一个关键部分是优雅地处理网络请求。网络返回的响应可能包含意想不到的结果，为了获得良好的用户体验，您需要提前处理边缘情况。本文将详细为大家介绍Flutter如何使用dio，需要的可以参考一下

初始化 Dio

您可以创建一个单独的类，其中包含用于执行网络操作的方法。这有助于将功能逻辑与用户界面代码分开。

为此，请创建一个新的文件：dio_client.dart包含DioClient

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 请求

我们将定义一个通过传递一个从 API 检索单个用户数据的方法id：

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;
}

上述方法有效，但如果这里有任何编码错误，应用程序会在您运行时崩溃。

一种更好、更实用的方法是用块包装方法：get()``try-catch

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类中定义一个新方法，用于通过传递用户的来从 API 服务器中删除id用户。

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包更容易使用。

您可以使用FormDataDio轻松地将文件上传到服务器。以下是向 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处理 Dio 请求、响应错误之前拦截它们catchError。在实际场景中，拦截器可用于使用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());

调试控制台中记录的结果将如下所示：

结论

在 Flutter 中使用 Dio网络感觉简直不要太爽，它可以优雅地处理许多边缘情况。Dio 可以更轻松地处理多个同时发生的网络请求，同时具有高级错误处理能力。它还允许您避免使用http包跟踪任何文件上传进度所需的样板代码。您还可以使用 Dio 包进行各种其他高级自定义，这些自定义超出了我们在此处介绍的内容。

以上就是详解在Flutter中如何使用dio的详细内容，更多关于Flutter使用dio的资料请关注北冥有鱼其它相关文章！

您可能感兴趣的文章:

详解Flutter中网络框架dio的二次封装
Flutter网络请求Dio库的使用及封装详解
Flutter网络请求库DIO的基本使用
Flutter Dio二次封装的实现

详解在Flutter中如何使用dio

目录

初始化 Dio

定义 GET 请求

定义 POST 请求

定义 PUT 请求

定义 DELETE 请求

选择和定义您的请求头

上传文件

拦截器

结论

相关推荐

android自动登录如何实现

android中smarttable的用法是什么

android中smarttable的优缺点是什么

android中smarttable的作用是什么

android中smarttable的功能有哪些

android中smarttable使用要注意什么

android中tablelayout怎么合并单元格

android中tablelayout如何连接数据库