Flutter 鸿蒙HTTP拦截器实现：拦截逻辑与链式处理

欢迎加入开源鸿蒙跨平台社区！ https://openharmonycrossplatform.csdn.net

效果展示

在这里插入图片描述
在这里插入图片描述

HTTP拦截器演示

请求拦截

  • 认证拦截器：自动添加Token
  • 日志拦截器：记录请求信息
  • 缓存拦截器：检查缓存
  • 重试拦截器：失败自动重试

响应拦截

  • 日志拦截器：记录响应信息
  • 错误拦截器：统一错误处理
  • 缓存拦截器：缓存响应数据
  • 重试拦截器：检查重试条件

拦截器日志展示

日志类型

  • 请求日志：蓝色，向上箭头
  • 响应日志：绿色，向下箭头
  • 错误日志：红色，错误图标
  • 警告日志：橙色，警告图标

日志内容

  • 拦截器名称
  • 处理动作
  • 时间戳
  • 详细信息

实现步骤

1. 拦截器接口设计

基础拦截器

abstract class Interceptor {
  Future<Request> onRequest(Request request) async {
    return request;
  }
  
  Future<Response> onResponse(Response response) async {
    return response;
  }
  
  Future<dynamic> onError(dynamic error) async {
    return error;
  }
}

2. 链式拦截器实现

拦截器链

class InterceptorChain {
  final List<Interceptor> interceptors;
  
  Future<Response> execute(Request request) async {
    Request currentRequest = request;
    
    // 请求拦截
    for (var interceptor in interceptors) {
      currentRequest = await interceptor.onRequest(currentRequest);
    }
    
    // 发送请求
    Response response = await sendRequest(currentRequest);
    
    // 响应拦截
    for (var interceptor in interceptors.reversed) {
      response = await interceptor.onResponse(response);
    }
    
    return response;
  }
}

3. 具体拦截器实现

认证拦截器

class AuthInterceptor extends Interceptor {
  final String token;
  
  @override
  Future<Request> onRequest(Request request) async {
    return request.copyWith(
      headers: {
        ...request.headers,
        'Authorization': 'Bearer $token',
      },
    );
  }
}

日志拦截器

class LoggingInterceptor extends Interceptor {
  @override
  Future<Request> onRequest(Request request) async {
    print('Request: ${request.method} ${request.url}');
    return request;
  }
  
  @override
  Future<Response> onResponse(Response response) async {
    print('Response: ${response.statusCode}');
    return response;
  }
}

4. 拦截器配置

配置管理

class InterceptorConfig {
  bool enableAuthInterceptor = true;
  bool enableLoggingInterceptor = true;
  bool enableRetryInterceptor = true;
  bool enableCacheInterceptor = false;
  
  List<Interceptor> buildInterceptors() {
    final interceptors = <Interceptor>[];
    
    if (enableAuthInterceptor) {
      interceptors.add(AuthInterceptor());
    }
    if (enableLoggingInterceptor) {
      interceptors.add(LoggingInterceptor());
    }
    // ...
    
    return interceptors;
  }
}

功能特性

1. 请求拦截

添加请求头

@override
Future<Request> onRequest(Request request) async {
  return request.copyWith(
    headers: {
      ...request.headers,
      'Authorization': 'Bearer $token',
      'Content-Type': 'application/json',
    },
  );
}

参数处理

@override
Future<Request> onRequest(Request request) async {
  final params = {
    ...request.params,
    'timestamp': DateTime.now().millisecondsSinceEpoch.toString(),
  };
  
  return request.copyWith(params: params);
}

2. 响应拦截

数据处理

@override
Future<Response> onResponse(Response response) async {
  if (response.statusCode == 200) {
    final data = jsonDecode(response.body);
    // 处理数据
    return response.copyWith(body: jsonEncode(data));
  }
  return response;
}

错误处理

@override
Future<dynamic> onError(dynamic error) async {
  if (error is SocketException) {
    return NetworkError('网络连接失败');
  }
  return error;
}

3. 缓存拦截

缓存检查

class CacheInterceptor extends Interceptor {
  final CacheManager cacheManager;
  
  @override
  Future<Request> onRequest(Request request) async {
    if (request.method == 'GET') {
      final cached = cacheManager.get(request.url);
      if (cached != null) {
        return CachedResponse(cached);
      }
    }
    return request;
  }
  
  @override
  Future<Response> onResponse(Response response) async {
    cacheManager.set(request.url, response.body);
    return response;
  }
}

4. 重试拦截

自动重试

class RetryInterceptor extends Interceptor {
  final int maxRetries;
  int _retryCount = 0;
  
  @override
  Future<dynamic> onError(dynamic error) async {
    if (_retryCount < maxRetries) {
      _retryCount++;
      await Future.delayed(Duration(seconds: 1));
      return retry();
    }
    return error;
  }
}

使用说明

基本使用

  1. 配置拦截器

    • 开启需要的拦截器
    • 设置拦截器参数
    • 调整拦截器顺序

  2. 发送请求

    • 请求自动通过拦截器链
    • 观察拦截器日志
    • 查看处理结果

  3. 查看日志

    • 查看拦截器执行顺序
    • 查看请求/响应信息
    • 查看错误处理

高级功能

自定义拦截器

class CustomInterceptor extends Interceptor {
  @override
  Future<Request> onRequest(Request request) async {
    // 自定义请求处理
    return request;
  }
  
  @override
  Future<Response> onResponse(Response response) async {
    // 自定义响应处理
    return response;
  }
}

条件拦截

class ConditionalInterceptor extends Interceptor {
  final bool Function(Request) condition;
  
  @override
  Future<Request> onRequest(Request request) async {
    if (condition(request)) {
      // 执行拦截逻辑
    }
    return request;
  }
}

技术要点

1. 拦截器顺序

执行顺序

  • 请求拦截：按添加顺序执行
  • 响应拦截：按添加顺序逆序执行
  • 错误拦截：按添加顺序执行

顺序重要性

final interceptors = [
  LoggingInterceptor(),    // 最先记录日志
  AuthInterceptor(),       // 然后添加认证
  CacheInterceptor(),      // 最后检查缓存
];

2. 异步处理

异步拦截器

@override
Future<Request> onRequest(Request request) async {
  final token = await storage.getToken();
  return request.copyWith(
    headers: {'Authorization': 'Bearer $token'},
  );
}

3. 错误传播

错误处理链

try {
  final response = await chain.execute(request);
} on AuthError {
  // 认证错误
} on NetworkError {
  // 网络错误
} catch (e) {
  // 其他错误
}

最佳实践

1. 单一职责

每个拦截器只做一件事

// 好的做法
class AuthInterceptor extends Interceptor {
  // 只处理认证
}

class LoggingInterceptor extends Interceptor {
  // 只处理日志
}

// 不好的做法
class AllInOneInterceptor extends Interceptor {
  // 处理认证、日志、缓存...
}

2. 可配置性

参数化配置

class RetryInterceptor extends Interceptor {
  final int maxRetries;
  final Duration delay;
  
  RetryInterceptor({
    this.maxRetries = 3,
    this.delay = const Duration(seconds: 1),
  });
}

3. 性能考虑

避免重复处理

class CacheInterceptor extends Interceptor {
  @override
  Future<Request> onRequest(Request request) async {
    if (request.method != 'GET') {
      return request;  // 只缓存GET请求
    }
    // ...
  }
}

应用场景

1. 统一认证

自动添加Token

class AuthInterceptor extends Interceptor {
  @override
  Future<Request> onRequest(Request request) async {
    final token = await getStoredToken();
    request.headers['Authorization'] = 'Bearer $token';
    return request;
  }
}

2. 请求日志

统一日志记录

class LoggingInterceptor extends Interceptor {
  @override
  Future<Request> onRequest(Request request) async {
    logger.info('${request.method} ${request.url}');
    return request;
  }
}

3. 错误处理

统一错误处理

class ErrorInterceptor extends Interceptor {
  @override
  Future<dynamic> onError(dynamic error) async {
    if (error is TimeoutException) {
      return TimeoutError();
    }
    return error;
  }
}

总结

Flutter鸿蒙HTTP拦截器功能实现了完整的请求/响应拦截解决方案，包括：

  • ✅ 灵活的拦截器接口
  • ✅ 链式处理机制
  • ✅ 多种内置拦截器
  • ✅ 可配置的拦截器链
  • ✅ 完善的错误处理

该功能为Flutter for OpenHarmony应用提供了强大的HTTP请求增强能力，适用于各种需要统一请求处理的场景。

# flutter # harmonyos # http
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

Flutter+开源鸿蒙实战｜智联邻里Day3 模拟网络请求+政务服务页面+公告动态渲染

本文介绍了Flutter与开源鸿蒙结合的实战项目"智联邻里"第三天的开发内容。主要包括：封装Flutter全局网络请求工具类(Dio)，搭建政务服务二级页面，模拟后端接口请求并实现社区公告动态渲染，适配鸿蒙网络权限和异常处理，以及页面跳转传参功能实现。文章保留了核心代码5-6行，结构清晰，详细讲解了网络请求封装、动态数据渲染等关键技术点，为后续邻里互动、物业报修等功能开发打下基

avatar 人工智能6S服务平台

ImageKnifePro 源码解读（一）：鸿蒙图片加载框架全貌

鸿蒙系统的Image组件支持加载网络和本地图片，但四个短板在业务复杂度上升后依次暴露：没有二级缓存控制，冷启动重复拉取网络图片；没有占位图和错误图的切换机制，列表滑动时白屏闪烁；图片变换（模糊、裁剪等）需要手动操作 PixelMap；组件销毁后请求仍在飞，复用场景旧图残留。ImageKnifePro 针对这些问题，把整个加载引擎下沉到 C++ 层，用拦截器责任链驱动缓存、加载、解码、渲染的全流程。

avatar 人工智能6S服务平台
cover

Flutter+开源鸿蒙实战｜智联邻里Day4 底部导航栏+邻里互助页面+闲置发布表单+本地缓存

avatar 人工智能6S服务平台