Flutter JSON 解析最佳实践

这篇文章其实早该写了，之前的业余时间一直花在开源项目或其它文章上了。

JSON 解析对于 Flutter 新人来讲是个绕不开的话题，大家都在吐槽 Flutter 没有反射，导致 JSON 解析无法像 Android 那样方便，其实是不必要的，因为可以做到一样方便。

网上讲 JSON 解析的文章很多，大家自行去学习即可，本篇文章直接给出我创造出的、我认为的最佳方案，如有雷同，纯属巧合：

使用 JsonToDart 插件自动生成 Bean 类，再使用 dynamic 关键字的能力，自动将 JSON 字符串代表的数据填充到 Bean 类中

我们以如下 JSON 文本为例：

{
    "nickName": "hackware",
    "realName": "陈方兵",
    "age": 29,
    "sex": "男"
}
这是个 Person 对象的描述，我们先使用 JsonToDart 插件将其转换成 Bean 类，这样我们就无需手写解析代码了：




生成的 Bean 类代码如下：

class Person {
  Person({
    this.nickName,
    this.realName,
    this.age,
    this.sex,
  });

  Person.fromJson(dynamic json) {
    nickName = json['nickName'];
    realName = json['realName'];
    age = json['age'];
    sex = json['sex'];
  }

  String? nickName;
  String? realName;
  int? age;
  String? sex;

  Map<String, dynamic> toJson() {
    final map = <String, dynamic>{};
    map['nickName'] = nickName;
    map['realName'] = realName;
    map['age'] = age;
    map['sex'] = sex;
    return map;
  }
}

这段代码最核心的是 fromJson 这个构造函数，由于 Flutter 中没有反射，我们无法动态的调用 fromJson 方法。但我们可以先构造一个空的 Person 对象，再使用 dynamic 关键字调用它，但需要对 fromJson 做一下更改，将它从构造函数改为普通函数，如下：

Person fromJson(dynamic json) {
  nickName = json['nickName'];
  realName = json['realName'];
  age = json['age'];
  sex = json['sex'];
  return this;
}
或是：

void fromJson(dynamic json) {
  nickName = json['nickName'];
  realName = json['realName'];
  age = json['age'];
  sex = json['sex'];
}
真正的解析代码如下：

String jsonData = ''; // 从网络加载的 JSON 文本
Person person = Person().fromJson(jsonDecode(jsonData));
我想说明的是：使用反射自动创建对象和手动创建对象后再自动为该对象填充数据是一样方便的。因此即便没有反射，我们也能对网络请求做很好的封装。

目前由于我用的是自创的 PVState 架构模式，它是 MVC 的改进版，它也是个轻量级的状态管理方案。只有不到 120 行代码。它分为 PState 和 VState，这里的 State 指的是 StatefulWidget 的 State。前者封装业务逻辑，后者描述 UI，UI 和业务逻辑可以完全隔离。我把网络请求的基础能力封装到了 BasePState 中，如下：

void sendRequest<BEAN>({
  required Future<Response<String>> call,
  required BEAN bean,
  OnStartCallback? startCallback,
  OnSuccessCallback<BEAN>? successCallback,
  OnFailCallback<BEAN>? failCallback,
}) async {
  startCallback?.call();
  bool? success;
  Object? exception;
  try {
    Response<String> resp = await call;
    dynamic result = (bean as dynamic).fromJson(jsonDecode(resp.data!));
    success = result.success;
  } catch (e) {
    debugPrint('$e');
    exception = e;
  } finally {
    try {
      if (success == true) {
        successCallback?.call(bean);
      } else {
        failCallback?.call(bean, exception);
      }
    } catch (e) {
      exception = e;
      failCallback?.call(bean, exception);
    }
  }
}
真正发起请求的代码如下：

sendRequest(
  call: dio.get(
    'https://xxx',
  ),
  bean: RealtimeAlarmListBean(),
  startCallback: () {
    setState(() {
      loadingRealtimeAlarm = true;
    });
  },
  successCallback: (RealtimeAlarmListBean bean) {
    setState(() {
      realtimeAlarmListBean = bean;
      loadingRealtimeAlarm = false;
    });
  },
  failCallback: (_, __) {
    setState(() {
      loadingRealtimeAlarm = false;
      showToast('请求失败');
    });
  },
);
可见我在外部构造好了空的 Bean 对象传进去，当请求回来后会把数据填充进去，最后在 successCallback 再把非空的 Bean 对象回传回来。整个过程我没有手动对 JSON 做解析。是不是挺方便的呢？

我比较喜欢这种网络模块的封装模式，当然你也可以使用 async、await 做“同步”的封装，萝卜青菜各有所爱吧。

作者：hackware

添加微信号：hackware，拉你进 Flutter 技术交流群。请备注【加群】

欢迎关注微信公众号 ：FlutterFirst