Flutter 使用 json_serializable 解析 JSON 支持泛型

一般情况下，服务端接口都会有一套数据结构规范，比如

{
    "items": [],
    "success": true,
    "msg": ""
}

不同的接口，items 中返回的数据结构一般都是不一样的，这时使用泛型，可以简化代码

本文将以 wanAndroid 提供的开放 API 为例，介绍如何通过泛型类接解析 JSON 数据，简化代码。另外，对 wanAndroid 提供开放 API 的行为表示感谢。

本文解析 JSON 使用的方案，是官方推荐的 json_serializable，至于为什么选择 json_serializable，可以参考我之前写的一篇文章：Flutter 使用 json_serializable 解析 JSON 最佳方案

下面开始进入正文

使用 json_serializable 支持泛型

json_serializable 在大概两年前发布的 v3.5.0 版本开始支持泛型，只需要在 @JsonSerializable() 注解中设置 genericArgumentFactories 为 true，同时需要对 fromJson 和 toJson 方法进行调整，即可支持泛型解析，如下所示：

@JsonSerializable(genericArgumentFactories: true)
class Response<T> {
  int status;
  T value;
  
  factory Response.fromJson(
      Map<String, dynamic> json,
      T Function(dynamic json) fromJsonT,
      ) =>
      _$ResponseFromJson<T>(json, fromJsonT);

  Map<String, dynamic> toJson(Object? Function(T value) toJsonT) =>
      _$ResponseToJson<T>(this, toJsonT);
}

和正常实体类相比，fromJson 方法多了一个函数参数 T Function(dynamic json) fromJsonT；toJson 方法也多了一个函数参数：Object? Function(T value) toJsonT

分析数据结构

下面使用 wanAndroid 开放 API 接口数据，进行代码实践，我们先看一下服务端接口返回的数据结构

一般接口返回数据结构如下：

{
  "data": [
    {
      "desc": "一起来做个App吧",
      "id": 10,
      "imagePath": "https://www.wanandroid.com/blogimgs/50c115c2-cf6c-4802-aa7b-a4334de444cd.png",
      "isVisible": 1,
      "order": 1,
      "title": "一起来做个App吧",
      "type": 1,
      "url": "https://www.wanandroid.com/blog/show/2"
    }
  ],
  "errorCode": 0,
  "errorMsg": ""
}

带分页信息的列表接口，返回数据结构如下：

{
  "data": {
    "curPage": 1,
    "datas": [
      {
        "id": 23300,
        "link": "https://juejin.cn/post/7114142706557075487",
        "niceDate": "2022-06-28 15:30",
        "niceShareDate": "2022-06-28 15:30",
        "publishTime": 1656401449000,
        "realSuperChapterId": 493,
        "shareDate": 1656401449000,
        "shareUser": "灰尘",
        "superChapterId": 494,
        "superChapterName": "广场Tab",
        "title": "Flutter 使用 json_serializable 解析 JSON 最佳方案"
      }
    ],
    "offset": 0,
    "over": false,
    "pageCount": 3,
    "size": 20,
    "total": 46
  },
  "errorCode": 0,
  "errorMsg": ""
}

通过上面的接口示例，我们可以发现，返回的数据结构有以下两种情况：

扫描二维码关注公众号，回复： 14435594 查看本文章

在一般情况下 data 是一个数组

{
    "data": [],
    "errorCode": 0,
    "errorMsg": ""
}

在分页相关接口，data 是一个对象

{
    "data": {},
    "errorCode": 0,
    "errorMsg": ""
}

复杂方案

如果想定义一个模型类，同时处理上述两种情况，可以把整个 data 都定义为泛型，代码如下：

import 'package:json_annotation/json_annotation.dart';

part 'base_response.g.dart';

@JsonSerializable(genericArgumentFactories: true)
class BaseResponse<T> {
  T data;
  int errorCode;
  String errorMsg;

  BaseResponse({
    required this.data,
    required this.errorCode,
    required this.errorMsg,
  });

  factory BaseResponse.fromJson(
      Map<String, dynamic> json,
      T Function(dynamic json) fromJsonT,
      ) =>
      _$BaseResponseFromJson<T>(json, fromJsonT);

  Map<String, dynamic> toJson(Object? Function(T value) toJsonT) =>
      _$BaseResponseToJson<T>(this, toJsonT);
}



@JsonSerializable(genericArgumentFactories: true)
class ListData<T> {
  int? curPage;
  List<T> datas;
  int? offset;
  bool? over;
  int? pageCount;
  int? size;
  int? total;

  ListData({
    this.curPage,
    required this.datas,
    this.offset,
    this.over,
    this.pageCount,
    this.size,
    this.total,
  });

  factory ListData.fromJson(
      Map<String, dynamic> json,
      T Function(dynamic json) fromJsonT,
      ) =>
      _$ListDataFromJson<T>(json, fromJsonT);

  Map<String, dynamic> toJson(Object? Function(T value) toJsonT) =>
      _$ListDataToJson<T>(this, toJsonT);
}

测试代码如下：

void main() {
  test("json", () {
    String str =
        '{"data": [{"category": "设计","icon": "","id": 31,"link": "https://tool.gifhome.com/compress/","name": "gif压缩","order": 4444,"visible": 1}],"errorCode": 0,"errorMsg": ""}';

    Map<String, dynamic> json = jsonDecode(str);

    BaseResponse<List<CategoryModel>> result =
        BaseResponse.fromJson(json, (json) {
      return (json as List<dynamic>)
          .map((e) => CategoryModel.fromJson(e as Map<String, dynamic>))
          .toList();
    });

    List<CategoryModel> list = result.data;

    CategoryModel model = list[0];

    print(model.toJson());

    expect("category:设计", "category:${model.category}");
  });

  test("json list", () {
    String str =
        '{"data": {"curPage": 1,"datas": [{"id": 23300,"link": "https://juejin.cn/post/7114142706557075487","niceDate": "2022-06-28 15:30","niceShareDate": "2022-06-28 15:30","publishTime": 1656401449000,"realSuperChapterId": 493,"shareDate": 1656401449000,"shareUser": "灰尘","superChapterId": 494,"superChapterName": "广场Tab","title": "Flutter 使用 json_serializable 解析 JSON 最佳方案"}],"offset": 0,"over": false,"pageCount": 3,"size": 20,"total": 46},"errorCode": 0,"errorMsg": ""}';

    Map<String, dynamic> json = jsonDecode(str);

    BaseResponse<ListData<ArticleModel>> result =
        BaseResponse.fromJson(json, (json) {
      return ListData.fromJson(json, (json) => ArticleModel.fromJson(json));
    });

    ListData<ArticleModel> listData = result.data;
    List<ArticleModel> datas = listData.datas;
    ArticleModel model = datas[0];

    print(model.toJson());

    expect("id:23300", "id:${model.id}");
  });
}

虽然一个 BaseResponse 解决了两种数据结构，但使用时的代码会有些复杂，很容易出错。

一般接口：

    BaseResponse<List<CategoryModel>> result =
        BaseResponse.fromJson(json, (json) {
      return (json as List<dynamic>)
          .map((e) => CategoryModel.fromJson(e as Map<String, dynamic>))
          .toList();
    });

分页接口：

    BaseResponse<ListData<ArticleModel>> result =
        BaseResponse.fromJson(json, (json) {
      return ListData.fromJson(json, (json) => ArticleModel.fromJson(json));
    });

简化方案

可以对一般接口和列表分页接口进行单独处理，

处理一般接口的泛型类，命名为 BaseCommonResponse，代码如下：

import 'package:json_annotation/json_annotation.dart';

part 'base_common_response.g.dart';

@JsonSerializable(genericArgumentFactories: true)
class BaseCommonResponse<T> {
  List<T> data;
  int errorCode;
  String errorMsg;

  BaseCommonResponse({
    required this.data,
    required this.errorCode,
    required this.errorMsg,
  });

  factory BaseCommonResponse.fromJson(
    Map<String, dynamic> json,
    T Function(dynamic json) fromJsonT,
  ) =>
      _$BaseCommonResponseFromJson<T>(json, fromJsonT);

  Map<String, dynamic> toJson(Object? Function(T value) toJsonT) =>
      _$BaseCommonResponseToJson<T>(this, toJsonT);
}

处理分页列表接口的泛型类，命令为 BaseListResponse

import 'package:json_annotation/json_annotation.dart';

part 'base_list_response.g.dart';

@JsonSerializable(genericArgumentFactories: true)
class BaseListResponse<T> {
  ListData<T> data;
  int errorCode;
  String errorMsg;

  BaseListResponse({
    required this.data,
    required this.errorCode,
    required this.errorMsg,
  });

  factory BaseListResponse.fromJson(
    Map<String, dynamic> json,
    T Function(dynamic json) fromJsonT,
  ) =>
      _$BaseListResponseFromJson<T>(json, fromJsonT);

  Map<String, dynamic> toJson(Object? Function(T value) toJsonT) =>
      _$BaseListResponseToJson<T>(this, toJsonT);
}



@JsonSerializable(genericArgumentFactories: true)
class ListData<T> {
  int? curPage;
  List<T> datas;
  int? offset;
  bool? over;
  int? pageCount;
  int? size;
  int? total;

  ListData({
    this.curPage,
    required this.datas,
    this.offset,
    this.over,
    this.pageCount,
    this.size,
    this.total,
  });

  factory ListData.fromJson(
    Map<String, dynamic> json,
    T Function(dynamic json) fromJsonT,
  ) =>
      _$ListDataFromJson<T>(json, fromJsonT);

  Map<String, dynamic> toJson(Object? Function(T value) toJsonT) =>
      _$ListDataToJson<T>(this, toJsonT);
}

测试代码如下：

void main() {
  test("json", () {
    String str =
        '{"data": [{"category": "设计","icon": "","id": 31,"link": "https://tool.gifhome.com/compress/","name": "gif压缩","order": 4444,"visible": 1}],"errorCode": 0,"errorMsg": ""}';

    Map<String, dynamic> json = jsonDecode(str);

    BaseCommonResponse<CategoryModel> result = BaseCommonResponse.fromJson(
        json, (json) => CategoryModel.fromJson(json));

    List<CategoryModel> list = result.data;

    CategoryModel model = list[0];

    print(model.toJson());

    expect("category:设计", "category:${model.category}");
  });

  test("json list", () {
    String str =
        '{"data": {"curPage": 1,"datas": [{"id": 23300,"link": "https://juejin.cn/post/7114142706557075487","niceDate": "2022-06-28 15:30","niceShareDate": "2022-06-28 15:30","publishTime": 1656401449000,"realSuperChapterId": 493,"shareDate": 1656401449000,"shareUser": "灰尘","superChapterId": 494,"superChapterName": "广场Tab","title": "Flutter 使用 json_serializable 解析 JSON 最佳方案"}],"offset": 0,"over": false,"pageCount": 3,"size": 20,"total": 46},"errorCode": 0,"errorMsg": ""}';

    Map<String, dynamic> json = jsonDecode(str);

    BaseListResponse<ArticleModel> result =
    BaseListResponse.fromJson(json, (json) => ArticleModel.fromJson(json));

    ListData<ArticleModel> listData = result.data;
    List<ArticleModel> datas = listData.datas;
    ArticleModel model = datas[0];

    print(model.toJson());

    expect("id:23300", "id:${model.id}");
  });
}

这时使用时的代码，就比较简单了，代码如下：

一般接口，使用 BaseCommonResponse

    BaseCommonResponse<CategoryModel> result = BaseCommonResponse.fromJson(
    json, (json) => CategoryModel.fromJson(json));

列表分页接口，使用 BaseListResponse

    BaseListResponse<ArticleModel> result = BaseListResponse.fromJson(
    json, (json) => ArticleModel.fromJson(json));

以上就是我在 Flutter 中解析 JSON 数据时处理泛型的实践经验。