Flutter通用API响应处理插件base_api_response_flutter的使用

Flutter通用API响应处理插件base_api_response_flutter的使用

base_api_response_flutter 是一个用于处理HTTP API响应及桥接/方法通道响应的封装类。本文将详细介绍如何在Flutter项目中使用该插件。

base api response

BaseApiResponse 类用于封装HTTP API响应和桥接/方法通道响应：

class BaseApiResponse {

  bool success = false;
  String? errCode;
  String? errMsg;
  dynamic data;

  // 从Map转换为BaseApiResponse对象
  static BaseApiResponse fromMap(Map<String?, Object?> map) {
    BaseApiResponse response = BaseApiResponse();
    response.success = map['success'] ?? false;
    response.errCode = map['errCode'];
    response.errMsg = map['errMsg'];
    response.data = map['data'];
    return response;
  }

  // 将BaseApiResponse对象转换为Map
  Map<String, Object?> toMap() {
    return {
      'success': success,
      'errCode': errCode,
      'errMsg': errMsg,
      'data': data,
    };
  }
}

BaseApiResponse2 类也是类似的结构：

class BaseApiResponse2 {

  bool success = false;
  String? code;
  String? msg;
  dynamic data;

  // 从Map转换为BaseApiResponse2对象
  static BaseApiResponse2 fromMap(Map<String?, Object?> map) {
    BaseApiResponse2 response = BaseApiResponse2();
    response.success = map['success'] ?? false;
    response.code = map['code'];
    response.msg = map['msg'];
    response.data = map['data'];
    return response;
  }

  // 将BaseApiResponse2对象转换为Map
  Map<String, Object?> toMap() {
    return {
      'success': success,
      'code': code,
      'msg': msg,
      'data': data,
    };
  }
}

使用方式

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  base_api_response_flutter: ^0.0.1

接下来，我们可以通过示例来展示如何使用 base_api_response_flutter 插件。

示例代码

1. 创建API请求

import 'package:http/http.dart' as http;
import 'package:base_api_response_flutter/base_api_response_flutter.dart';

Future<BaseApiResponse> fetchUser(String userId) async {
  final url = "https://jsonplaceholder.typicode.com/users/$userId";
  final response = await http.get(Uri.parse(url));

  if (response.statusCode == 200) {
    // 解析JSON响应
    var jsonResponse = json.decode(response.body);
    return BaseApiResponse.fromMap(jsonResponse);
  } else {
    throw Exception('Failed to load user');
  }
}

2. 处理API响应

void main() async {
  try {
    BaseApiResponse response = await fetchUser("1");
    
    // 检查请求是否成功
    if (response.success) {
      print("请求成功");
      print("用户数据: ${response.data}");
    } else {
      print("请求失败");
      print("错误码: ${response.errCode}");
      print("错误信息: ${response.errMsg}");
    }
  } catch (e) {
    print("发生错误: $e");
  }
}

更多关于Flutter通用API响应处理插件base_api_response_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter通用API响应处理插件base_api_response_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


base_api_response_flutter 是一个用于简化 Flutter 应用中 API 响应处理的插件。它可以帮助你统一处理 API 响应的成功和错误情况，减少重复代码，并提高代码的可维护性。以下是如何使用 base_api_response_flutter 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 base_api_response_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  base_api_response_flutter: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 创建 API 服务类

接下来，你可以创建一个 API 服务类，用于处理所有的 API 请求。在这个类中，你可以使用 base_api_response_flutter 来处理 API 响应。

import 'package:base_api_response_flutter/base_api_response_flutter.dart';
import 'package:http/http.dart' as http;

class ApiService {
  final String baseUrl = 'https://your-api-url.com';

  Future<BaseApiResponse> fetchData() async {
    try {
      final response = await http.get(Uri.parse('$baseUrl/endpoint'));

      if (response.statusCode == 200) {
        // 假设 API 返回的数据是 JSON 格式
        final data = json.decode(response.body);
        return BaseApiResponse.success(data);
      } else {
        return BaseApiResponse.error('Failed to load data');
      }
    } catch (e) {
      return BaseApiResponse.error('An error occurred: $e');
    }
  }
}

3. 在 UI 中使用 API 服务

在你的 Flutter UI 中，你可以调用 ApiService 类中的方法来获取数据，并根据 BaseApiResponse 的状态来更新 UI。

import 'package:flutter/material.dart';
import 'api_service.dart';

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ApiService _apiService = ApiService();
  BaseApiResponse _response;

  [@override](/user/override)
  void initState() {
    super.initState();
    _fetchData();
  }

  void _fetchData() async {
    setState(() {
      _response = BaseApiResponse.loading();
    });

    final response = await _apiService.fetchData();

    setState(() {
      _response = response;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Base API Response Example'),
      ),
      body: Center(
        child: _response.when(
          loading: () => CircularProgressIndicator(),
          success: (data) => Text('Data: $data'),
          error: (message) => Text('Error: $message'),
        ),
      ),
    );
  }
}

4. 处理不同的响应状态

BaseApiResponse 提供了 when 方法，允许你根据响应的状态（加载中、成功、错误）来显示不同的 UI。

  • loading: 当 API 请求正在进行时显示加载指示器。
  • success: 当 API 请求成功时显示数据。
  • error: 当 API 请求失败时显示错误信息。

5. 自定义响应处理

你还可以根据需要扩展 BaseApiResponse 类，添加更多的状态或自定义处理逻辑。

class CustomApiResponse<T> extends BaseApiResponse<T> {
  final T customData;

  CustomApiResponse.success(this.customData) : super.success(customData);

  [@override](/user/override)
  R when<R>({
    R Function() loading,
    R Function(T data) success,
    R Function(String message) error,
  }) {
    if (this is BaseApiResponseLoading) {
      return loading();
    } else if (this is BaseApiResponseSuccess) {
      return success(data);
    } else if (this is BaseApiResponseError) {
      return error(message);
    } else {
      throw Exception('Unknown response type');
    }
  }
}
回到顶部