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

JSON 解析对于 Flutter 新人来讲是个绕不开的话题,咱们都在吐槽 Flutter 没有反射,导致 JSON 解析无法像 Android 那样便利,其实是不必要的,因为能够做到相同便利。

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

运用 JsonToDart 插件主动生成 Bean 类,再运用 dynamic 要害字的才能,主动将 JSON 字符串代表的数据填充到 Bean 类中

咱们以如下 JSON 文本为例:

{
    "nickName": "hackware",
    "realName": "陈方兵",
    "age": 29,
    "sex": "男"
}

这是个 Person 目标的描绘,咱们先运用 JsonToDart 插件将其转换成 Bean 类,这样咱们就无需手写解析代码了:

Flutter JSON 解析最佳实践

Flutter JSON 解析最佳实践

生成的 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 做“同步”的封装,萝卜青菜各有所爱吧。

这是现在我看到的最好的 JSON 解析办法,如果你有更好的办法,欢迎在评论区沟通哦!我是中国第一位 Android & Flutter 双料 GDFE,重视我的大众号:FlutterFirst,带你起飞!咱们下期见。