面试题：Flutter自定义网络请求进度指示框架设计

整体设计思路

架构设计：采用分层架构，分为展示层、业务逻辑层和适配层。展示层负责显示网络请求进度，业务逻辑层处理进度相关的逻辑，适配层负责与不同网络请求库交互。
核心类和接口设计
- 进度监听接口：定义一个接口，如ProgressListener，包含方法用于接收网络请求的进度变化，例如void onProgress(double progress)。
- 通用请求类：设计一个通用的NetworkRequest类，持有请求的相关信息（如URL、请求方法等），并提供注册ProgressListener的方法。
- 进度指示类：ProgressIndicator类，负责在UI上显示进度，订阅NetworkRequest的进度变化并更新UI。
与不同网络请求库的适配
- 适配层实现：为每个支持的网络请求库（如http、dio）创建一个适配器类，实现特定库的请求逻辑，并将库的进度事件转换为ProgressListener能接收的形式。例如，对于dio库，创建DioAdapter类，在dio的请求拦截器或响应拦截器中获取进度并通知ProgressListener。

具体示例代码（简化示意）

进度监听接口

abstract class ProgressListener {
  void onProgress(double progress);
}

通用请求类

class NetworkRequest {
  String url;
  // 其他请求相关属性
  List<ProgressListener> listeners = [];

  NetworkRequest(this.url);

  void addListener(ProgressListener listener) {
    listeners.add(listener);
  }

  void notifyListeners(double progress) {
    listeners.forEach((listener) => listener.onProgress(progress));
  }
}

进度指示类

class ProgressIndicator {
  NetworkRequest request;

  ProgressIndicator(this.request);

  void showProgress() {
    request.addListener((progress) {
      // 这里处理UI更新，例如使用StatefulWidget更新进度条
      print('Progress: $progress');
    });
  }
}

dio适配器示例

import 'package:dio/dio.dart';

class DioAdapter {
  static void sendRequest(NetworkRequest request) {
    Dio dio = Dio();
    dio.interceptors.add(InterceptorsWrapper(
      onRequest: (options, handler) {
        // 可以在此处添加请求开始的逻辑
        return handler.next(options);
      },
      onResponse: (response, handler) {
        // 可以在此处添加请求成功的逻辑
        return handler.next(response);
      },
      onError: (DioError error, handler) {
        // 处理请求错误
        return handler.next(error);
      },
    ));
    dio.get(request.url).then((response) {
      // 模拟进度为1
      request.notifyListeners(1.0);
    }).catchError((error) {
      // 处理错误
    });
  }
}

使用示例：

void main() {
  NetworkRequest request = NetworkRequest('https://example.com/api');
  ProgressIndicator indicator = ProgressIndicator(request);
  indicator.showProgress();
  DioAdapter.sendRequest(request);
}

星途面试题库

面试题：Flutter自定义网络请求进度指示框架设计

知识考点

面试题答案

整体设计思路

具体示例代码（简化示意）