Flutter网络请求清理响应数据插件dio_clean_http_response的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter网络请求清理响应数据插件dio_clean_http_response的使用

1. 简介

dio_clean_http_response 是一个Dart包,旨在简化在使用Dio库时处理HTTP响应的过程。它提供了干净、结构化且可定制的错误处理机制,适用于各种HTTP失败场景。通过这个插件,您可以更轻松地将Dio HTTP响应转换为成功的结果或详细的错误信息。

2. 主要特性

  • 简洁的API集成:无缝集成到Dio请求中,使错误管理更加健壮和易于维护。
  • 结构化的错误处理:使用HttpFailure密封类的不同子类型来轻松管理Dio异常,每个子类型代表一个特定的HTTP失败场景。
  • 本地化支持:自定义不同场景下的错误消息,支持多语言实现。

3. 安装

pubspec.yaml文件中添加以下依赖:

dependencies:
  dio_clean_http_response: ^2.0.0
  dio: ^5.4.0

然后运行以下命令来安装依赖:

pub get

4. 使用示例

以下是一个完整的示例,展示了如何使用dio_clean_http_response进行网络请求并处理响应数据。

示例代码
import 'package:dio/dio.dart';
import 'package:dio_clean_http_response/src/dio_clean_http_response_extension.dart';

// 定义PostModel类,用于表示从API获取的帖子数据
class PostModel {
  final int id;
  final int userId;
  final String title;
  final String body;

  const PostModel({
    required this.id,
    required this.userId,
    required this.title,
    required this.body,
  });

  // 从JSON映射创建PostModel实例
  factory PostModel.fromJson(Map<String, dynamic> json) {
    return PostModel(
      id: json["id"] as int,
      userId: json["userId"] as int,
      title: json["title"] as String,
      body: json["body"] as String,
    );
  }

  [@override](/user/override)
  String toString() =>
      '🟩\nPOST $id \nuserId: $userId \ntitle: $title \nbody:$body\n';
}

void main() async {
  // 创建Dio客户端,并设置基础URL
  final httpClient = Dio(
    BaseOptions(
      baseUrl: 'https://jsonplaceholder.typicode.com',
      validateStatus: (status) => status != 400, // 自定义状态码验证逻辑
    ),
  );

  // 获取单个帖子数据
  final postModelOrFailure = await httpClient
      .get('/posts/1')
      .fromJson(PostModel.fromJson); // 使用fromJson方法解析单个对象

  // 处理结果,使用fold方法处理Either类型的返回值
  postModelOrFailure.fold(
    (failure) => print(failure.message()), // 处理失败情况
    (postModel) => print(postModel), // 处理成功情况
  );

  // 获取多个帖子数据
  final postModelsListOrFailure = await httpClient
      .get('/posts')
      .fromJsonAsList(PostModel.fromJson); // 使用fromJsonAsList方法解析列表

  // 处理结果,使用fold方法处理Either类型的返回值
  postModelsListOrFailure.fold(
    (failure) => print(failure.message()), // 处理失败情况
    (postModelsList) => print(postModelsList), // 处理成功情况
  );

  // 测试400状态码的情况
  final postModelOrFailure400 = await httpClient
      .get('https://httpstat.us/400')
      .fromJson(PostModel.fromJson);

  postModelOrFailure400.fold(
    (failure) => print(failure.message()), // 处理失败情况
    (postModel) => print(postModel), // 处理成功情况
  );

  // 测试503状态码的情况
  final postModelsListOrFailure400 = await httpClient
      .get('https://httpstat.us/503')
      .fromJsonAsList(PostModel.fromJson);

  postModelsListOrFailure400.fold(
    (failure) => print(failure.message()), // 处理失败情况
    (postModelsList) => print(postModelsList), // 处理成功情况
  );
}

更多关于Flutter网络请求清理响应数据插件dio_clean_http_response的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络请求清理响应数据插件dio_clean_http_response的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用dio_clean_http_response插件来进行网络请求并清理响应数据的示例代码。这个插件可以帮助你自动清理HTTP响应数据中的冗余字段,比如状态码和消息等。

首先,你需要在你的pubspec.yaml文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0  # 确保dio版本兼容
  dio_clean_http_response: ^latest_version  # 使用最新版本,请查看pub.dev上的最新版本号

然后运行flutter pub get来获取依赖。

接下来,在你的Flutter项目中配置和使用dio_clean_http_response。以下是一个完整的示例:

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:dio_clean_http_response/dio_clean_http_response.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? responseData;

  @override
  void initState() {
    super.initState();
    _fetchData();
  }

  Future<void> _fetchData() async {
    // 创建一个Dio实例
    final Dio dio = Dio();

    // 使用dio_clean_http_response的扩展方法来配置dio
    dio.options.baseUrl = 'https://api.example.com'; // 替换为你的API基础URL
    dio.addInterceptor(CleanHttpResponseInterceptor());

    try {
      // 发起网络请求
      final Response<Map<String, dynamic>> response = await dio.get('/endpoint');

      // 获取清理后的响应数据
      final cleanedData = response.data!;

      // 更新UI
      setState(() {
        responseData = jsonEncode(cleanedData);
      });
    } catch (e) {
      // 处理错误
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Text(responseData ?? 'Loading...'),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. pubspec.yaml中添加diodio_clean_http_response依赖。
  2. 创建一个Flutter应用,其中包含一个主页面MyHomePage
  3. MyHomePageinitState方法中调用_fetchData方法来发起网络请求。
  4. 配置Dio实例,并添加CleanHttpResponseInterceptor拦截器来自动清理响应数据。
  5. 发起GET请求并获取清理后的响应数据,然后更新UI显示这些数据。

请注意,dio_clean_http_response插件的工作原理是通过拦截器自动清理响应数据,所以你不需要手动处理响应数据的清理逻辑。只需确保你的API响应格式与插件预期的格式兼容即可。

确保将https://api.example.com/endpoint替换为你的实际API端点。如果API响应包含codemessage等字段,这些字段将被自动移除,只保留实际的数据部分。

回到顶部