MST

星途 面试题库

面试题:Flutter Dio插件如何实现高效的请求拦截与响应拦截

阐述在Flutter应用里,利用Dio插件进行请求拦截添加通用请求头,以及响应拦截处理统一的错误码的原理和具体实现方式,需结合代码说明。
25.4万 热度难度
前端开发Flutter

知识考点

AI 面试

面试题答案

一键面试

原理

  1. 请求拦截添加通用请求头:Dio提供了拦截器机制,在请求发送之前可以对请求进行处理。通过添加一个拦截器,在拦截器中为请求添加通用的请求头,这样每次请求都会携带这些头信息。
  2. 响应拦截处理统一错误码:同样利用Dio的拦截器,在响应返回时进行处理。检查响应状态码和自定义错误码,根据不同的错误码进行统一的错误处理,如提示用户相应的错误信息等。

具体实现方式

  1. 添加依赖:在pubspec.yaml文件中添加Dio依赖:
dependencies:
  dio: ^[具体版本号]
  1. 创建拦截器
import 'package:dio/dio.dart';

class MyInterceptor extends Interceptor {
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    // 添加通用请求头
    options.headers['common-header-key'] = 'common-header-value';
    handler.next(options);
  }

  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    // 处理统一错误码
    if (response.data['errorCode']!= null) {
      // 根据错误码处理错误
      switch (response.data['errorCode']) {
        case 1001:
          // 处理错误1001
          print('处理错误1001');
          break;
        case 1002:
          // 处理错误1002
          print('处理错误1002');
          break;
        default:
          break;
      }
    }
    handler.next(response);
  }

  @override
  void onError(DioError err, ErrorInterceptorHandler handler) {
    // 处理网络错误
    print('网络错误: ${err.message}');
    handler.next(err);
  }
}
  1. 使用拦截器
import 'package:dio/dio.dart';

void main() async {
  Dio dio = Dio();
  dio.interceptors.add(MyInterceptor());

  try {
    Response response = await dio.get('https://example.com/api');
    print(response.data);
  } catch (e) {
    print('请求出错: $e');
  }
}

在上述代码中,MyInterceptor类继承自Interceptor,在onRequest方法中添加通用请求头,在onResponse方法中处理统一错误码,在onError方法中处理网络错误。然后将该拦截器添加到Dio实例中,这样后续的请求都会经过这个拦截器的处理。