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

第三个 自定义的拦截器

// 自定义一个拦截器
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);
  }
}

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 Flutter Dio 进行网络请求时,可以将其进行封装,以便于代码的复用和维护。以下是一个简单Flutter Dio 封装示例: ```dart import 'package:dio/dio.dart'; class HttpUtil { static HttpUtil instance; Dio dio; BaseOptions options; // 构造函数 HttpUtil() { options = BaseOptions( baseUrl: 'https://api.example.com/', // 接口地址 connectTimeout: 5000, // 连接超时时间 receiveTimeout: 3000, // 接收超时时间 headers: { 'Content-Type': 'application/json', // 设置请求头 }, ); dio = Dio(options); } // 单例模式 static HttpUtil getInstance() { if (instance == null) { instance = HttpUtil(); } return instance; } // GET 请求 Future<Map<String, dynamic>> get(String url, {Map<String, dynamic> params}) async { Response response; try { response = await dio.get(url, queryParameters: params); } on DioError catch (e) { return Future.error(e); } return response.data; } // POST 请求 Future<Map<String, dynamic>> post(String url, {Map<String, dynamic> params}) async { Response response; try { response = await dio.post(url, data: params); } on DioError catch (e) { return Future.error(e); } return response.data; } } ``` 在上述示例中,我们定义了一个 HttpUtil 类,其中包含了 Dio 实例的初始化、GET 和 POST 请求的封装。我们可以通过 `HttpUtil.getInstance()` 获取 HttpUtil 的单例对象,然后通过调用 `get` 或 `post` 方法来发起网络请求。这样做的好处是可以将网络请求的相关设置和配置统一管理,方便后续的维护和扩展。同时,通过封装,也避免了在多个地方重复编写相同的代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值