Flutter 網絡庫簡易封裝

本文介紹如何優雅地封裝一個網絡庫，包含如下幾個點：

1. JSON轉換爲實體對象
2. 相似Promise方式的API封裝

JSON轉換爲實體對象

第一步，安裝json2entity工具

flutter packages pub global activate json2entity
複製代碼

配置啓動項：

vim $HOME/.bash_profile

export FLUTTER_HOME=<path to flutter>
export PATH="$PATH:$FLUTTER_HOME/.pub-cache/bin"
複製代碼

第二步，使用json串自動生成Dart實體類

j2e -j '{"result":1,"msg":"ok"}' -o output/BaseEntity
複製代碼

HTTP 封裝

封裝經常使用的GET, POST請求

import 'dart:async';
import 'dart:convert' as Convert;
import 'package:http/http.dart' as http;

class HttpRequest {
  final baseUrl;

  HttpRequest(this.baseUrl);

  Future<dynamic> get(String uri, {Map<String, String> headers}) async {
    http.Response response = await http.get(baseUrl + uri, headers: headers);
    return _processResponse(uri, response);
  }

  Future<dynamic> post(String uri, dynamic body, {Map<String, String> headers}) async {
    http.Response response = await http.post(baseUrl + uri, body: body, headers: headers);
    return _processResponse(uri, response);
  }

  Future<dynamic> _processResponse(String uri, http.Response response) async {
    try {
      final statusCode = response.statusCode;
      final responseBody = response.body;
      var result = Convert.jsonDecode(responseBody);
      return result;
    } on Exception catch (e) {
      if (response != null) {
        return {"status": response.statusCode, "message": e.toString()};
      } else {
        return {"status": -1, "message": "網絡異常"};
      }
    }
  }
複製代碼

API封裝

/* API統一返回的實體以下: { status: 0, message: "", data: {} } */
class API {
  static const BASE_URL = 'https://xxx.com';
  static const CUSTOM_HEADER = {"": ""};

  static var _request = HttpRequest(API.BASE_URL);

  static Future<dynamic> _get(String uri, {Map<String, String> headers}) async {
    if (headers == null) {
      headers = Map<String, String>();
    }
    headers.addAll(CUSTOM_HEADER);

    final response = await _request.get(uri, headers: headers);
    
    final status = response['status'];
    if (status == 0) { // 成功返回
      final data = response['data'];
      return data;
    } else { // 失敗返回
      throw FailureResponse(status, response['message']);
    }
  }

  // 獲取xx列表
  static Future<dynamic> getXXList({int start, int limit}) async {
    final data = await _get('/v1/test?start=$start&limit=$limit');
    final items = data['items'];
    final result = List<Entity>();
    for (var item in items) {
      final bean = Entity.fromJson(item);
      result.add(bean);
    }
    return result;
  }
}

class FailureResponse {
  final int status;
  final String message;
  FailureResponse(this.status, this.message);

  @override
  String toString() {
    return 'status=$status, message=$message';
  }
}
複製代碼

相似Promise的方式訪問API

API.getXXList(start: 0, limit: 4).then((data) {
    // 更新數據
}).catchError((error) {
    print(error);
});
複製代碼

參考資料

• github.com/laxian/dart…
• github.com/kaina404/Fl…