Flutter Dio 库的简单封装

这篇具有很好参考价值的文章主要介绍了Flutter Dio 库的简单封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

dio 库Flutter 中是比较流行的网络请求库。

其中在拦截器可以拦截请求,响应以及错误

  • 权限验证:比如接口请求后端返回401未授权时可以跳到登录页,403跳到未授权页面;
  • 异常监控:可以在拦截器处理异常,并且上报到异常监控后台或者发送异常预警消息;
  • 缓存接口:可以对于某些接口将请求缓存在本地,设定一定的缓存有效时限,在时限内重复请求时直接返回本地缓存数据,而无需请求后端接口,降低后端服务器负荷。这块可以参考dio-http-cache。
  • Cookie:App 本身是不会缓存 Cookie 信息的,可以使用拦截器在向后端发起请求时自动携带 Cookie信息,可以参考cookie_manager。
  • 生成接口文档:可以在拦截器将请求参数,返回结果输出为 Postman格式的接口文档,参考postman_dio。
  • 自定义拦截器:可以自定义自己的拦截器类,继承Interceptor类,实现 onRequestonResponseonError方法即可

简单封装三个文件

第一个HttpRequest

import 'package:awsome_flutter/jiezhi/widget/dio%E5%B0%81%E8%A3%85/http_auth_interceptor.dart';
import 'package:dio/dio.dart';
import 'http_config.dart';

class HTTPRequest {
  static final BaseOptions options = BaseOptions(
      baseUrl: HTTPConfig.baseURL,
      connectTimeout: Duration(milliseconds: HTTPConfig.timeout));
  static Dio dio = Dio(options);

  static Future<T> request<T>(String url,
      {String method = "get", Map<String, dynamic>? params}) async {
    // 1请求的单独配置
    final options = Options(method: method);
    // 2 添加一个拦截器
    Interceptor inter = InterceptorsWrapper(
      onRequest: (options, handler) {
        // 很多页面访问必须要求携带token 那么可以在这里判断是否有token
        // 权限验证:比如接口请求后端返回401未授权时可以跳到登录页,403跳到未授权页面;
        // 异常监控:可以在拦截器处理异常,并且上报到异常监控后台或者发送异常预警消息;
        // 缓存接口:可以对于某些接口将请求缓存在本地,设定一定的缓存有效时限,在时限内重复请求时直接返回本地缓存数据,而无需请求后端接口,降低后端服务器负荷。这块可以参考
        print(options.baseUrl);
        print(options.path);
        print(options.uri);
        print("拦截了请求");
        return handler.next(options);
      },
      onResponse: (e, handler) {
        print(e);
        print("拦截了响应");

        return handler.next(e);
      },
      onError: (e, handler) {
        print(e);
        print("拦截了错误");
        return handler.next(e);
      },
    );

    List<Interceptor> inters = [];
    // 添加自己定义的授权拦截器
    inters.add(AuthInterCeptor());
    // 开启一个log 拦截器
    // 此拦截器将帮助您在发出 HTTP 请求和响应的同时创建所有日志。您将能够看到您请求的所有信息。
    /**
     * uri: https://api.oioweb.cn/api/qq/vip?qq=1023954998
      statusCode: 200
      headers:
      access-control-allow-headers: X-Requested-With
      connection: keep-alive
      access-control-allow-origin: *
      date: Sun, 09 Apr 2023 06:30:44 GMT
      access-control-allow-methods: GET,POST,OPTIONS
      content-encoding: gzip
      content-length: 563
      strict-transport-security: max-age=31536000
      content-type: application/json;charset=utf-8
      server: Tengine
     * 
     * */
    inters.add(LogInterceptor());

    dio.interceptors.addAll(inters);
    // 3 发起网络请求
    try {
      Response response =
          await dio.request<T>(url, queryParameters: params, options: options);
      return response.data;
    } on DioError catch (e) {
      print("戳错了????");
      print(e);
      return Future.error(e);
    }
  }
}

第二个就是Http_config

class HTTPConfig {
  static const baseURL = "https://api.oioweb.cn";
  static const timeout = 5000;
}

第三个 自定义的拦截器文章来源地址https://www.toymoban.com/news/detail-503445.html

// 自定义一个拦截器
import 'package:dio/dio.dart';

class AuthInterCeptor extends Interceptor {
  AuthInterCeptor();

  // 重写其方法
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    // TODO: implement onRequest
    // 这里你可以创建一个path 列表,标记处不需要access_token的路径
    final listPath = ["/login", "/resgiter", "/sendMsgCode", "/api/qq/vip"];
    // 进行判断 是否需要追加token
    if (listPath.contains(options.path)) {
      print("/api/qq/vip");
      // 不需要token 直接返回
      return handler.next(options);
    }
    // 这里从本地读取自己的token 拼接上去
    String access_token = "access_token";
    options.headers.addAll({'Authorization': access_token});
    return handler.next(options);
  }

  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    // TODO: implement onResponse
    super.onResponse(response, handler);
  }

  @override
  void onError(DioError err, ErrorInterceptorHandler handler) {
    // TODO: implement onError
    super.onError(err, handler);
  }
}

到了这里,关于Flutter Dio 库的简单封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter之Dio封装+实例(自己梳理)

    https://github.com/cfug/dio/blob/main/dio/README-ZH.md  手动添加到pubspec.yaml: 在终端使用以下命令: dio 是一个强大的 HTTP 网络请求库,支持全局配置、Restful API、FormData、拦截器、 请求取消、Cookie 管理、文件上传/下载、超时、自定义适配器、转换器等。 单例模式详见:Flutter之单例模式

    2024年02月08日
    浏览(92)
  • Flutter 极简 Dio 组件二次封装文档

    本文档介绍了如何通过二次封装 Flutter Dio 组件来简化网络请求的过程。通过封装,我们可以提高代码复用性,简化调用方式,并添加一些常用的功能,使网络请求更加易于管理和维护。 首先,确保你的 Flutter 项目已经添加了 Dio 的依赖。在项目的 pubspec.yaml 文件中,添加以下

    2024年02月11日
    浏览(57)
  • flutter开发实战-请求dio设置Cookie

    flutter开发实战-请求dio设置Cookie 在最近开发中碰到了需要websocket长链接收到响应的auth,在之后的请求中需要将其设置为cookie中。 如Cookie:auth=DHSfQQSAXf89xZqJTLdEDVI2hwzc7p2lUmSNNdUSlgW2MyfQIN+pYr7jUbkX/; 设置cookie用到了dio_cookie_manager组件 在pubspec.yaml引入dio_cookie_manager 2.1 使用CookieJar Cookie

    2024年02月15日
    浏览(60)
  • Flutter dio Http请求之Cookie管理

    在应用开发过程中,我们进行Http通讯时会使用 Cookie 进行验证,今天我们就着重讲解Flutter 网络请求插件 dio 的 cookie 使用。 首先,我们要进行插件引用 这里为什么要使用 path_provider 这个插件呢,下面在 cookie 的储存时会做介绍。 引用完,我们执行以下命令 dio 的使用网上有很

    2024年02月20日
    浏览(37)
  • flutter dio使用proxyman抓包进行网络调试

    证书 wifi 手机和电脑连上同一个wifi,并且手机wifi使用代理,代理地址为电脑的ip和proxyman设置的监听端口 代码 使用方式 proxyIP 为电脑ip

    2024年02月03日
    浏览(45)
  • Flutter 使用 dio 遇到的问题合集

    泪流满面啊,,,,, 1. postHttpLogin-异常-----DioException [bad response]: The request returned an invalid status code of 500. 2. post请求失败 DioException [bad response]: The request returned an invalid status code of 415. 这个问题有些离谱,415,415都说是请求头的问题,但结果却不是

    2024年02月03日
    浏览(50)
  • 【Flutter】Dio 强大的Dart/Flutter HTTP客户端

    Dio是一个强大的Dart/Flutter HTTP客户端,支持全局配置、拦截器、FormData、请求取消、文件上传/下载、超时等功能。 首先,

    2024年02月11日
    浏览(47)
  • flutter开发实战-dio文件下载实现

    flutter开发实战-dio文件下载实现 在开发中,需要下载文件,这里使用的是dio dio 是一个强大的 Dart HTTP 请求库,支持全局配置、Restful API、FormData、拦截器、 请求取消、Cookie 管理、文件上传/下载、超时以及自定义适配器等。 在工程中pubspec.yaml引入dio 我们对dio进行封装 文件下

    2024年02月11日
    浏览(54)
  • 前端vue2中axios封装请求数据,教会你封装教会你请求数据 简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

    2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名 下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面

    2024年02月03日
    浏览(49)
  • flutter file_picker dio web端上传记录

    app端的上传 获取到FilePickerResult 对象 里面包含 选择上传的文件信息 app端上传逻辑 api上传   其中file.count 表示上传的文件数量 file.paths 表示 选择文件的路径数组 通过dio 上传  使用FormData 进行转载  Global.isWeb  == kIsWeb web端上传报错: 不能使用file.paths 来上传文件 修改如下

    2024年01月22日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包