AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Flutter dio http 封装指南说明

2024-07-20 111
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了如何实现一个通用、可重构的 Dio 基础类,包括单例访问、日志记录、常见操作封装以及请求、输出、报错拦截等功能。

Flutter dio http 封装指南说明

视频

https://youtu.be/YJBC0ZNEv0Q

https://www.bilibili.com/video/BV1qy41187y3/

前言

原文 https://ducafecat.com/blog/building-a-powerful-flutter-dio-wrapper

本文介绍了如何实现一个通用、可重构的 Dio 基础类,包括单例访问、日志记录、常见操作封装以及请求、输出、报错拦截等功能。

Flutter, Dio, 网络请求, 封装, 重构, 可扩展

参考

https://pub.dev/packages/dio

https://pub.dev/packages/pretty_dio_logger

https://github.com/cfug/dio/blob/main/dio/README-ZH.md

步骤

第一步：安装 dio 插件

pubspec.yaml

dependencies:
    ...
  dio: ^5.4.3+1

dev_dependencies:
  ...
  pretty_dio_logger: ^1.3.1

第二步：编写单例工具类

lib/utils/woo_http.dart

常量

const String APPLICATION_JSON = "application/json";
const String CONTENT_TYPE = "content-type";
const String ACCEPT = "accept";
const String AUTHORIZATION = "authorization";
const String DEFAULT_LANGUAGE = "en";
const String TOKEN = "Bearer token";
const String BASE_URL = "https://wpapi.ducafecat.tech";

单例类

/// woo 电商 api 请求工具类
class WooHttpUtil {
   
   
  static final WooHttpUtil _instance = WooHttpUtil._internal();
  factory WooHttpUtil() => _instance;

  late Dio _dio;

  /// 单例初始
  WooHttpUtil._internal() {
   
   
    // header 头
    Map<String, String> headers = {
   
   
      CONTENT_TYPE: APPLICATION_JSON,
      ACCEPT: APPLICATION_JSON,
      AUTHORIZATION: TOKEN,
      DEFAULT_LANGUAGE: DEFAULT_LANGUAGE
    };

    // 初始选项
    var options = BaseOptions(
      baseUrl: BASE_URL,
      headers: headers,
      connectTimeout: const Duration(seconds: 5), // 5秒
      receiveTimeout: const Duration(seconds: 3), // 3秒
      responseType: ResponseType.json,
    );

    // 初始 dio
    _dio = Dio(options);

    // 拦截器 - 日志打印
    if (!kReleaseMode) {
   
   
      _dio.interceptors.add(PrettyDioLogger(
        requestHeader: true,
        requestBody: true,
        responseHeader: true,
      ));
    }
  }

}

第三步：加入操作方法

常用的 get post put delete

  /// get 请求
  Future<Response> get(
    String url, {
   
   
    Map<String, dynamic>? params,
    Options? options,
    CancelToken? cancelToken,
  }) async {
   
   
    Options requestOptions = options ?? Options();
    Response response = await _dio.get(
      url,
      queryParameters: params,
      options: requestOptions,
      cancelToken: cancelToken,
    );
    return response;
  }

  /// post 请求
  Future<Response> post(
    String url, {
   
   
    dynamic data,
    Options? options,
    CancelToken? cancelToken,
  }) async {
   
   
    var requestOptions = options ?? Options();
    Response response = await _dio.post(
      url,
      data: data ?? {
   
   },
      options: requestOptions,
      cancelToken: cancelToken,
    );
    return response;
  }

  /// put 请求
  Future<Response> put(
    String url, {
   
   
    dynamic data,
    Options? options,
    CancelToken? cancelToken,
  }) async {
   
   
    var requestOptions = options ?? Options();
    Response response = await _dio.put(
      url,
      data: data ?? {
   
   },
      options: requestOptions,
      cancelToken: cancelToken,
    );
    return response;
  }

  /// delete 请求
  Future<Response> delete(
    String url, {
   
   
    dynamic data,
    Options? options,
    CancelToken? cancelToken,
  }) async {
   
   
    var requestOptions = options ?? Options();
    Response response = await _dio.delete(
      url,
      data: data ?? {
   
   },
      options: requestOptions,
      cancelToken: cancelToken,
    );
    return response;
  }

第四步：拦截器

安装拦截器

class WooHttpUtil {
   
   
  ...

  /// 单例初始
  WooHttpUtil._internal() {
   
   
    ...

    // 拦截器
    _dio.interceptors.add(RequestInterceptors());
  }

拦截类

/// 拦截
class RequestInterceptors extends Interceptor {
   
   
  //

  /// 发送请求
  /// 我们这里可以添加一些公共参数，或者对参数进行加密
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
   
   
    // super.onRequest(options, handler);

    // http header 头加入 Authorization
    // if (UserService.to.hasToken) {
   
   
    //   options.headers['Authorization'] = 'Bearer ${UserService.to.token}';
    // }

    return handler.next(options);
    // 如果你想完成请求并返回一些自定义数据，你可以resolve一个Response对象 `handler.resolve(response)`。
    // 这样请求将会被终止，上层then会被调用，then中返回的数据将是你的自定义response.
    //
    // 如果你想终止请求并触发一个错误,你可以返回一个`DioError`对象,如`handler.reject(error)`，
    // 这样请求将被中止并触发异常，上层catchError会被调用。
  }

  /// 响应
  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
   
   
    // 200 请求成功, 201 添加成功
    if (response.statusCode != 200 && response.statusCode != 201) {
   
   
      handler.reject(
        DioException(
          requestOptions: response.requestOptions,
          response: response,
          type: DioExceptionType.badResponse,
        ),
        true,
      );
    } else {
   
   
      handler.next(response);
    }
  }

  // // 退出并重新登录
  // Future<void> _errorNoAuthLogout() async {
   
   
  //   await UserService.to.logout();
  //   IMService.to.logout();
  //   Get.toNamed(RouteNames.systemLogin);
  // }

  /// 错误
  @override
  Future<void> onError(
      DioException err, ErrorInterceptorHandler handler) async {
   
   
    final exception = HttpException(err.message ?? "error message");
    switch (err.type) {
   
   
      case DioExceptionType.badResponse: // 服务端自定义错误体处理
        {
   
   
          final response = err.response;
          final errorMessage = ErrorMessageModel.fromJson(response?.data);
          switch (errorMessage.statusCode) {
   
   
            // 401 未登录
            case 401:
              // 注销 并跳转到登录页面
              // _errorNoAuthLogout();
              break;
            case 404:
              break;
            case 500:
              break;
            case 502:
              break;
            default:
              break;
          }
          // 显示错误信息
          // if(errorMessage.message != null){
   
   
          //   Loading.error(errorMessage.message);
          // }
        }
        break;
      case DioExceptionType.unknown:
        break;
      case DioExceptionType.cancel:
        break;
      case DioExceptionType.connectionTimeout:
        break;
      default:
        break;
    }
    DioException errNext = err.copyWith(
      error: exception,
    );
    handler.next(errNext);
  }
}

自定义错误消息 entity 类

lib/models/error_message_model.dart

/// 错误体信息
class ErrorMessageModel {
   
   
  int? statusCode;
  String? error;
  String? message;

  ErrorMessageModel({
   
   this.statusCode, this.error, this.message});

  factory ErrorMessageModel.fromJson(Map<String, dynamic> json) {
   
   
    return ErrorMessageModel(
      statusCode: json['statusCode'] as int?,
      error: json['error'] as String?,
      message: json['message'] as String?,
    );
  }

  Map<String, dynamic> toJson() => {
   
   
        'statusCode': statusCode,
        'error': error,
        'message': message,
      };
}

第五步：准备 entity 类

安装插件

https://marketplace.visualstudio.com/items?itemName=hirantha.json-to-dart

json to dart

复制你的输出 json 数据

执行 json to dart 命令，转换来自于剪贴板

json to dart from clipboard

保存输出结果 lib/models/product_model

第六步：编写 api 类

lib/apis/product.dart

/// 商品 api
class ProductApi {
   
   
  /// 商品列表
  static Future<List<ProductModel>> list({
   
   int? page, int? prePage}) async {
   
   
    var res = await WooHttpUtil().get('/products', params: {
   
   
      'page': page ?? 1,
      'per_page': prePage ?? 20,
    });

    List<ProductModel> items = [];
    for (var item in res.data) {
   
   
      items.add(ProductModel.fromJson(item));
    }

    return items;
  }
}

最后：拉取数据

lib/pages/first.dart

class FirstPage extends StatefulWidget {
   
   
  const FirstPage({
   
   super.key});

  @override
  State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
   
   
  List<ProductModel> _products = [];

  Future<void> _getProducts() async {
   
   
    var products = await ProductApi.list();
    if (mounted) {
   
   
      setState(() {
   
   
        _products = products;
      });
    }
  }

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

  Widget _buildView() {
   
   
    return ListView.builder(
      itemCount: _products.length,
      itemBuilder: (context, index) {
   
   
        return ListTile(
          title: Text(_products[index].name ?? ""),
          subtitle: Text(_products[index].description ?? ""),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
   
   
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: _buildView(),
    );
  }
}

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_dio

小结

本文详细介绍了如何构建一个通用、可重构的 Flutter Dio 基础类,包括单例访问、日志记录、常见操作封装以及请求、输出、报错拦截等功能。通过这种封装,可以大大提高网络请求的可维护性和扩展性,并且可以轻松应对各种网络请求场景。希望本文能为您在 Flutter 开发中的网络请求部分提供有价值的参考和指导。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

flutter 学习路径

© 猫哥
ducafecat.com

end

文章标签：
数据格式
JSON
Dart
API
关键词：
Flutter封装
Flutter dio
Flutter HTTP
HTTP封装
猫哥ducafecat
目录
相关文章
lqj_本人
|
18天前
|
存储 缓存 Dart
Flutter&鸿蒙next 封装 Dio 网络请求详解：登录身份验证与免登录缓存
本文详细介绍了如何在 Flutter 中使用 Dio 封装网络请求，实现用户登录身份验证及免登录缓存功能。首先在 `pubspec.yaml` 中添加 Dio 和 `shared_preferences` 依赖，然后创建 `NetworkService` 类封装 Dio 的功能，包括请求拦截、响应拦截、Token 存储和登录请求。最后，通过一个登录界面示例展示了如何在实际应用中使用 `NetworkService` 进行身份验证。希望本文能帮助你在 Flutter 中更好地处理网络请求和用户认证。
lqj_本人
135 1
lqj_本人
|
18天前
|
Dart UED 开发者
Flutter&鸿蒙next中的按钮封装：自定义样式与交互
在Flutter应用开发中，按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件，但有时这些样式无法满足特定设计需求。因此，封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性，同时提供更高的灵活性，支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件，并详细说明了其样式、形状、颜色和点击事件的处理方法。
lqj_本人
68 1
lqj_本人
|
18天前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先，通过`flutter create`命令创建项目；接着，在`lib`目录下封装一个自定义输入框组件`CustomInput`；然后，在主应用文件`main.dart`中使用该输入框组件，实现简单的UI布局和功能；最后，通过`flutter run`启动应用。本文还提供了后续扩展建议，如状态管理、网络请求和UI优化。
lqj_本人
95 1
我是快乐的嘟嘟
|
19天前
|
存储 缓存 JavaScript
Flutter 学习之封装 WebView
【10月更文挑战第24天】通过以上的探讨，我们可以看出，在 Flutter 中封装 WebView 是非常有必要的，它可以提高代码的复用性、增强可维护性、提供统一接口。在实际应用中，我们需要根据具体的需求和场景，选择合适的封装方法和技术，以实现更好的效果。
我是快乐的嘟嘟
16 1
你都不懂
|
16天前
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
你都不懂
31 0
lqj_本人
|
18天前
|
Dart 安全 UED
Flutter&鸿蒙next中的表单封装：提升开发效率与用户体验
在移动应用开发中，表单是用户与应用交互的重要界面。本文介绍了如何在Flutter中封装表单，以提升开发效率和用户体验。通过代码复用、集中管理和一致性的优势，封装表单组件可以简化开发流程。文章详细讲解了Flutter表单的基础、封装方法和表单验证技巧，帮助开发者构建健壮且用户友好的应用。
lqj_本人
58 0
咕噜咕噜wy
|
6月前
|
JSON Java 数据安全/隐私保护
java中的http请求的封装（GET、POST、form表单、JSON形式、SIGN加密形式）
java中的http请求的封装（GET、POST、form表单、JSON形式、SIGN加密形式）
咕噜咕噜wy
493 1
旺仔大牛
|
3月前
|
XML 安全 Android开发
Flutter配置Android和IOS允许http访问
Flutter配置Android和IOS允许http访问
旺仔大牛
117 3
香吧香
|
4月前
|
Java Spring
spring restTemplate 进行http请求的工具类封装
spring restTemplate 进行http请求的工具类封装
香吧香
202 3
jcLee95
|
3月前
|
存储 缓存 安全
Flutter Dio进阶：使用Flutter Dio拦截器实现高效的API请求管理和身份验证刷新
Flutter Dio进阶：使用Flutter Dio拦截器实现高效的API请求管理和身份验证刷新
jcLee95
331 0

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    Flutter 61: 图解基本 Button 按钮小结 (一)
  • 3
    打通前后端逻辑，客户端Flutter代码一天上线
  • 4
    Flutter新锐专家之路：混合开发篇
  • 5
    Flutter Plugin调用Native APIs
  • 6
    Flutter+Serverless 端到端研发架构实践
  • 7
    从零开始，一起学习开发个 Flutter App 吧
  • 8
    Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
  • 9
    如何在 Flutter 中使用 MemoryImage【Flutter 专题 23】
  • 10
    Flutter笔记： 在Flutter应用中使用SQLite数据库
  • 1
    Android 深入Http（5）从Retrofit源码来看Http，最新Android开发面试解答
    50
  • 2
    http协议 报文 给你讲明白咯，web开发基础
    32
  • 3
    Android-音视频学习系列-(八)基于-Nginx-搭建(rtmp、http)直播服务器
    109
  • 4
    探索HTTP协议：网络通信的基石
    66
  • 5
    第十一篇 前沿趋势与展望：深入探索GraphQL、RESTful API、WebSocket、SSE及QUIC与HTTP/3
    107
  • 6
    第八篇 提升网页性能：深入解析HTTP请求优化策略（三）
    172
  • 7
    第七篇 提升网页性能：深入解析HTTP请求优化策略（二）
    195
  • 8
    第六篇 提升网页性能：深入解析HTTP请求优化策略（一）
    77
  • 9
    第三章 前端发起HTTP请求
    54
  • 10
    第二章 HTTP请求方法、状态码详解与缓存机制解析
    112

    • 相关课程

    更多
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应
  • 云安全基础课- HTTP协议基础

    • 相关电子书

    更多
  • 基于flutter的产品应用实践
  • 《Flutter in action》
  • 闲鱼《Flutter 技术解析与实战》

    • 相关实验场景

    更多
  • 通过轻量消息队列（原MNS）主题HTTP订阅+ARMS实现自定义数据多渠道告警
    • 下一篇
    阿里云OSS设置跨域访问