Flutter 中如何实现高效的 API 调用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter 中如何实现高效的 API 调用

在 Flutter 开发中，实现高效的 API 调用是确保应用性能和可维护性的关键。以下是一种清晰的代码组织方式，结合了 API 调用和状态管理（以 Bloc 为例）。

一、定义 API 响应结构

  1. 通用响应对象：

    • 创建一个 ApiResponse<T> 类，其中 T 是一个泛型，表示返回的数据对象。

  2. 数据列表对象：

    • 创建一个专门处理数据列表的对象。

二、创建网络请求抽象层

使用 dio 包封装网络调用，并通过抽象层实现以下功能：

  • 设置和删除令牌
  • 发起请求（支持或不支持 FormData）
  • 在阻止用户交互的请求中显示加载指示器
  • 处理异常

定义接口：

enum MethodType { GET, POST, PUT, DELETE }

interface NetworkService {
  Future<ApiResponse<T>> request<T>(
    String url, 
    MethodType method, 
    Map<String, dynamic>? params, 
    Map<String, dynamic>? body, 
    Options? options
  );
}

三、实现网络请求类

基于 dio 实现 NetworkService 接口：

class DioClient implements NetworkService {
  // 实现 request 方法
}

四、定义模型类

根据 API 返回的数据结构定义模型类，并使用 json_serializable 自动生成序列化和反序列化的代码。

例如，电影的模型类：

@JsonSerializable()
class Movie {
  // 定义字段和生成代码
}

五、创建服务类

创建一个服务类，专门用于与 API 交互并返回定义的模型类。

class MovieService {
  final NetworkService networkService;

  MovieService(this.networkService);

  // 封装 API 调用逻辑
}

六、集成状态管理（以 Bloc 为例）

在 Bloc 中，将状态分为三种类型：初始状态、加载中状态和加载完成/失败状态。

  1. 定义 Bloc 状态：

    • 初始状态
    • 加载中状态
    • 加载完成/失败状态

  2. 定义 Bloc 事件：

    • 触发 API 调用的事件

  3. 实现 Bloc：

    • 处理事件并更新状态

七、在 UI 层显示数据

在 Flutter 的 UI 层，使用 BlocBuilder 或 BlocConsumer 来监听状态并更新界面。

BlocBuilder<MovieBloc, MovieState>(
  bloc: movieBloc,
  builder: (context, state) {
    if (state is MovieLoading) {
      return CircularProgressIndicator();
    } else if (state is MovieLoaded) {
      return ListView.builder(
        // 构建电影列表
      );
    } else if (state is MovieError) {
      return Text('Error: ${state.message}');
    }
    return Container();
  }
)

八、最终整合

在 main.dart 中初始化依赖并运行应用：

void main() {
  // 初始化依赖
  runApp(MyApp());
}

结语

通过以上步骤，我们成功实现了一个整洁的 API 调用结构，同时集成了 Bloc 状态管理。这种方法不仅使代码更易于维护，还能让团队协作更加高效。进一步优化可以考虑添加错误处理、缓存机制，以及更复杂的状态管理逻辑。


更多关于Flutter 中如何实现高效的 API 调用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter 中如何实现高效的 API 调用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现高效的API调用通常涉及多个方面，包括网络请求的封装、错误处理、数据缓存、以及请求节流等。下面是一些实现高效API调用的关键步骤和相关代码示例。

1. 网络请求的封装

首先，创建一个统一的网络请求封装类，这样可以在一个地方管理API的基础URL、请求头、超时设置等。使用http或dio库来发送请求。

import 'package:dio/dio.dart';

class ApiService {
  final Dio _dio;

  ApiService()
      : _dio = Dio(
          BaseOptions(
            baseUrl: 'https://api.example.com/',
            connectTimeout: 5000,
            receiveTimeout: 3000,
            headers: {
              'Content-Type': 'application/json',
            },
          ),
        );

  Future<dynamic> get(String endpoint, {Map<String, dynamic>? params}) async {
    try {
      Response response = await _dio.get(endpoint, queryParameters: params);
      return response.data;
    } catch (e) {
      throw e;
    }
  }

  Future<dynamic> post(String endpoint, {Map<String, dynamic>? data}) async {
    try {
      Response response = await _dio.post(endpoint, data: data);
      return response.data;
    } catch (e) {
      throw e;
    }
  }
}

2. 错误处理

在封装类中捕获并处理网络错误，可以将错误信息统一返回给调用者。

Future<dynamic> get(String endpoint, {Map<String, dynamic>? params}) async {
    try {
      Response response = await _dio.get(endpoint, queryParameters: params);
      return response.data;
    } on DioError catch (e) {
      if (e.response != null) {
        // 服务器返回了状态码，但状态码表明请求失败，例如404, 500等
        print('Error Response: ${e.response!.data}');
      } else if (e.requestOptions != null) {
        // 请求已经发出，但没有收到响应，可能是请求超时或网络问题
        print('Error Request: ${e.requestOptions!.path}');
      } else {
        // 其他错误，例如请求配置错误
        print('Error Message: ${e.message}');
      }
      throw e;
    }
  }

3. 数据缓存

使用shared_preferences或hive库来缓存数据，减少不必要的网络请求。

import 'package:shared_preferences/shared_preferences.dart';

class CacheService {
  static late SharedPreferences _preferences;

  static Future<void> init() async {
    _preferences = await SharedPreferences.getInstance();
  }

  Future<void> setCache(String key, String value) async {
    await _preferences.setString(key, value);
  }

  Future<String?> getCache(String key) async {
    return _preferences.getString(key);
  }
}

4. 请求节流

使用rxdart库中的BehaviorSubject来实现请求节流，防止在短时间内发送过多请求。

import 'package:rxdart/rxdart.dart';

class ApiThrottle {
  final BehaviorSubject<void> _throttleSubject;

  ApiThrottle() : _throttleSubject = BehaviorSubject<void>();

  bool get isThrottled => _throttleSubject.value != null;

  Future<void> throttle({required Duration duration}) async {
    if (!isThrottled) {
      _throttleSubject.add(null);
      await Future.delayed(duration);
      _throttleSubject.add(null); // Release the throttle
    }
  }

  void dispose() {
    _throttleSubject.close();
  }
}

在使用时，可以先调用throttle方法判断当前是否在节流期内，如果是，则不进行网络请求。

总结

通过封装网络请求、统一错误处理、数据缓存以及请求节流，可以在Flutter应用中实现高效的API调用。以上代码提供了基础实现，实际项目中可能需要根据具体需求进行扩展和优化。

回到顶部