面试题：Flutter dio插件的拦截器机制及应用场景

Question

详细描述Flutter中dio插件拦截器的工作原理，包括请求拦截器和响应拦截器。举例说明在哪些实际的应用场景中，使用拦截器可以优化网络请求流程，比如添加公共请求头、统一处理响应数据格式等，并给出相应的代码示例。

Answer 1

Flutter中dio插件拦截器工作原理

1. 请求拦截器
   • 当使用Dio发起网络请求时，请求拦截器会按照添加的顺序依次执行。
   • 它可以在请求发送前对请求进行预处理，比如修改请求头、请求参数，或者根据某些条件决定是否继续发送请求。例如，可以检查本地存储的登录状态，如果未登录，拦截请求并提示用户登录。
2. 响应拦截器
   • 当收到服务器的响应时，响应拦截器会按照添加的顺序依次执行。
   • 它主要用于对响应数据进行处理，比如统一处理响应码，将响应数据解析为特定的数据模型，或者在出现错误时进行统一的错误处理。例如，服务器返回的响应码为401（未授权），响应拦截器可以处理该情况，引导用户重新登录。

实际应用场景及代码示例

1. 添加公共请求头
   • 场景：在大多数API请求中，可能需要添加一些公共的请求头，如Authorization（用于身份验证）、Content - Type等。使用请求拦截器可以避免在每个请求中重复添加这些头信息。
   • 代码示例：

import 'package:dio/dio.dart';

void main() async {
  Dio dio = Dio();
  // 添加请求拦截器
  dio.interceptors.add(InterceptorsWrapper(
    onRequest: (Options options, RequestInterceptorHandler handler) {
      // 添加公共请求头
      options.headers['Authorization'] = 'Bearer your_token';
      options.headers['Content - Type'] = 'application/json';
      return handler.next(options);
    },
  ));
  try {
    Response response = await dio.get('https://example.com/api/data');
    print(response.data);
  } catch (e) {
    print(e);
  }
}

2. 统一处理响应数据格式
   • 场景：服务器返回的数据可能有统一的格式，例如包含code（状态码）、message（消息）和data（实际数据）字段。使用响应拦截器可以统一处理这种格式，方便业务逻辑使用。
   • 代码示例：

import 'package:dio/dio.dart';

class ResponseData {
  int code;
  String message;
  dynamic data;
  ResponseData({required this.code, required this.message, required this.data});
}

void main() async {
  Dio dio = Dio();
  // 添加响应拦截器
  dio.interceptors.add(InterceptorsWrapper(
    onResponse: (Response response, ResponseInterceptorHandler handler) {
      // 假设服务器返回的数据格式为 { "code": 0, "message": "success", "data": {... } }
      var data = response.data;
      ResponseData responseData = ResponseData(
          code: data['code'], message: data['message'], data: data['data']);
      return handler.resolve(responseData);
    },
  ));
  try {
    ResponseData response = await dio.get('https://example.com/api/data');
    print(response.data);
  } catch (e) {
    print(e);
  }
}