Flutter中如何使用dio拦截器

在Flutter项目中，我正在使用dio库进行网络请求，想为请求和响应添加拦截器来实现统一处理。请问如何正确配置dio拦截器？比如需要在请求头添加token，或者对响应数据做统一错误处理。能否提供一个完整的拦截器实现示例？另外，多个拦截器的执行顺序是怎样的？

2 回复

在Flutter中使用dio拦截器，需先创建Dio实例，然后添加拦截器。例如：

Dio dio = Dio();
dio.interceptors.add(InterceptorsWrapper(
  onRequest: (options, handler) {
    // 请求前处理
    handler.next(options);
  },
  onResponse: (response, handler) {
    // 响应处理
    handler.next(response);
  },
  onError: (error, handler) {
    // 错误处理
    handler.next(error);
  },
));

拦截器可用于添加请求头、处理错误等。

更多关于Flutter中如何使用dio拦截器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用Dio拦截器可以方便地处理请求和响应的统一逻辑，例如添加认证头、日志记录或错误处理。以下是具体实现方法：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  dio: ^5.0.0

2. 创建拦截器

请求拦截器示例：

import 'package:dio/dio.dart';

// 创建Dio实例
final dio = Dio();

// 添加请求拦截器
dio.interceptors.add(InterceptorsWrapper(
  onRequest: (RequestOptions options, RequestInterceptorHandler handler) {
    // 在请求发送前添加认证头
    options.headers['Authorization'] = 'Bearer your_token_here';
    
    // 打印请求日志
    print('${options.method} → ${options.uri}');
    
    return handler.next(options); // 继续请求
  },
));

响应拦截器示例：

dio.interceptors.add(InterceptorsWrapper(
  onResponse: (Response response, ResponseInterceptorHandler handler) {
    print('Response ← ${response.statusCode}');
    return handler.next(response);
  },
  onError: (DioException error, ErrorInterceptorHandler handler) {
    print('Error ← ${error.response?.statusCode}');
    return handler.next(error);
  },
));

3. 完整使用示例

void main() async {
  final dio = Dio(BaseOptions(baseUrl: 'https://api.example.com'));
  
  // 添加拦截器
  dio.interceptors.add(InterceptorsWrapper(
    onRequest: (options, handler) {
      options.headers['Content-Type'] = 'application/json';
      print('🚀 Sending: ${options.method} ${options.uri}');
      handler.next(options);
    },
    onResponse: (response, handler) {
      print('✅ Received: ${response.statusCode}');
      handler.next(response);
    },
    onError: (error, handler) {
      print('❌ Error: ${error.message}');
      handler.reject(error);
    },
  ));

  // 发送请求
  try {
    final response = await dio.get('/users');
    print(response.data);
  } catch (e) {
    print('Request failed: $e');
  }
}

4. 高级用法

  • 队列请求：使用 handler.reject 和 dio.lock()/dio.unlock() 实现认证刷新
  • 重试机制：在 onError 中实现请求重试逻辑
  • 自定义拦截器：继承 Interceptor 类创建独立拦截器

注意事项

  • 确保调用 handler.next() 或 handler.reject() 避免请求挂起
  • 拦截器按添加顺序执行
  • 使用 QueuedInterceptorsWrapper 处理异步操作

这样即可通过拦截器统一管理网络请求的通用逻辑。

回到顶部