关于flutter:转换-JSON-API-用-Chopper-和-JsonSerializable

43次阅读

共计 4008 个字符，预计需要花费 11 分钟才能阅读完成。

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40…

原文

https://medium.com/teamkraken…

代码

https://github.com/ErkinKurt/…

参考

  • https://hadrien-lejard.gitboo…
  • https://github.com/infinum/Japx
  • https://jsonapi.org/
  • https://github.com/dart-lang/…

注释

不过，JSON 响应格局因服务而异; 有一些共享的约定，比方 JSON: API，HAL… 明天，我将尝试展现如何从头开始，将 JSON: API 响应转换为 Flutter 我的项目中的 Dart 对象。

如果你想追随源代码，这里是: Chopper json serializable

https://github.com/ErkinKurt/…

1. 创立我的项目并增加依赖项

将要应用的软件包:

  • Chopper:
    应用 source gen 和 Retrofit 的 Dart 和 Flutter 的 Http 客户端生成器
  • Json Serializable:
    通过应用它，将主动生成实体的 JSON 转换
  • Japx:
    解析器，它将简单的 JSON: API 构造变为简略的 JSON，反之亦然

非常感谢这些令人敬畏的包裹！

因为 JsonSerializable 和 Chopper 应用 meta 编程，他们须要 BuildRunner 来解决代码生成。上面是要应用的 pubspec.yaml 文件:

2. 实现 Mock Http Client 以取得 JSON: API 格局的响应

响应模型在 assets 文件夹中提供，因为咱们心愿应用 mock http 客户机，并且不依赖于任何近程源。响应模型取自 JAPX 资产。

如果你想应用 chopper 与惯例的 http 客户端只是疏忽这一部分，并沿着以下局部..。

3. 创立模型并应用 JsonSerializable

只管为了简略起见，咱们有两个实体 Article 和 People，然而它们将从 Entity 类继承，以演示如何将 JsonSerializable 与继承一起应用。因为每个实体在 JSON: API 中都有一个 type 和 id 值，所以咱们创立了一个具备 type 和 id 的基类。

abstract class Entity {
  final String type;
  final String id;

  Entity(this.type, this.id);
}

让咱们用 JsonSerializable 实现两个模型。咱们须要编写 part’< model-name >。在一天完结的时候，json 和 FromJson 构造函数将由这个目录中构建的 runner 生成。

咱们正在将 fromJsonFactory 定义为在 JsonTypeConvertor 中应用，稍后咱们将看到它的应用。

在实现咱们的实现之后，咱们须要在我的项目的根目录中运行 flutter pub run build runner build，这样 build runner 就能够执行它的魔术了。在胜利的执行之后，咱们看到。G 文件生成，没有谬误。

4. 创立 Chopper 服务

让咱们创立网络层与 Chopper 服务。Chopper Services 应用主动生成来创立底层的 http 客户端实现，因而咱们不须要放心 http 客户端申请。

咱们提供了一个动态创立办法，将服务注入到 ChopperClients 中。除此之外，咱们还有通过 http 客户端获取单个实体的 getArticle 和 getPerson 办法。

正如你所看到的，咱们有一些红灯亮着。这是因为 chopper 在 build runner 的帮忙下应用代码生成。(build runner the underlying hero).

让咱们像之前一样运行 flutter pub run build \_ runner build 命令，如果执行胜利，咱们不会看到任何谬误。请看一下生成的代码，看看 chopper 是如何解决根底 http 客户端申请的。

5. 实现 Chopper Client

当初咱们须要实现 Chopper 客户端应用咱们创立的 Chopper 服务。Chopper Client 提供服务属性，设置多种服务。对于客户端应用，有两个选项，要么创立客户端为单例，并传递所有服务，要么在任何须要的时候创立客户端。

对于这个示例，让咱们创立一个 chopper 客户机实例，并将其传递给 widget 树。然而，咱们能够应用 getIt 或者 provider 作为依赖注入，为了简略起见，咱们将其作为支柱。

上面是一个 ChopperClientBuilder，它为咱们的 ChopperClientBuilder 客户端提供了构建办法。

6. 应用用户界面中的 JAPX 解码器应用 Chopper 服务

咱们有一个带 chopper client 作为 prop 的有状态小部件，咱们将实现两个办法 getArticle 和 getPeople。在这一部分中，JAPX 表演了重要的角色。因为咱们的 JSON 响应具备 JSON: API 响应格局，所以咱们须要平滑简单的响应。

然而，下面的例子能够很好地工作; 咱们须要进行显式转换:

  • json.decode to get mapped json object
  • Japx.decode to flatten the map.
  • Instantiate dart object with our model’s fromJsonFactory methods.

这种办法有两个问题:

  • 显式转换将导致代码反复
  • 服务办法 Response<dynamic> return type.

让咱们看看如何解决这些问题..。

7. 为响应类型标准实现 JsonConvertor

以某种形式，咱们须要操作 Chopper Responses 来返回咱们之前定义的模型类型。因为称为转换器的非凡拦截器，咱们能够解决响应、申请和谬误的转换。所有咱们须要做的是创立转换器，并注入到 Chopper 客户端，咱们应用。

让咱们为 Chopper Client 创立 jsonserializableeconverter 类。为了做到这一点，咱们须要从 Chopper 的 JsonConverter 类扩大咱们的类，并重写 convertResponse、convertRequest 和 convertError 办法。

当初咱们在 convertResponse 办法中进行转换，这也解决了代码反复问题，因为每次胜利响应都会调用这个办法。然而，依然有一个类型转换问题须要解决。

jsonRes.copyWith<ResultType>(body: JsonTypeParser.decode<Item>(flatJson["data"]))

这是解析 Dart 模型响应的要害语句:

  • 实际上是咱们心愿服务办法应用的返回类型 ResultType 是 List or 或 BuiltList 会是咱们的回归类型。为了在服务办法中定义返回类型，咱们须要增加咱们冀望的模型类型

在此更改之后，无论何时触发 convertResponse，ResultType 都将是 People 或 Article。

  • 然而，咱们依然须要调用咱们的模型的 fromJsonFactory 办法将响应对象转换为 Dart 对象。为了做到这一点，咱们创立 JsonTypeParser 类，它将保留 Dart 对象的转换逻辑

JsonTypeParser 有 Map < Type，JsonFactory > 类型的 factories 属性，其中蕴含来自 JsonFactory 办法的模型和模型。每当咱们有一个新的模型，咱们须要增加它的类型和工厂到工厂，以便它能够通过 \_ decodeMap 办法解析。JsonSerializableConverter 执行 decode < t > 办法，t 为 ResultType 或 Item，并调用匹配类型的 factory get 来实例化咱们的模型。

让咱们追随这个变动和批改用户界面局部，咱们生产斩波服务..。

让咱们把 jsonserializableeconverter 插入到咱们的 chopper 客户端:

依据这些变动，当初咱们能够间接应用响应体，具备类型安全性。

总结

我晓得这有很多货色须要消化，然而，还有很多货色须要探讨，比方 JsonSerializable 和 Chopper 的响应谬误的自定义类型转换器。如果我写一篇中等水平的文章，我会把这个话题连接起来。

总而言之，我想要展现的是各种响应模型能够通过斩波和 json 序列化解决，而不会失去类型平安的清洁形式。

© 猫哥

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

正文完
flutter
发表至： flutter
2021-07-08
 0
关于flutter:Flutter支付宝授权插件
关于flutter:Exception-Problem-building-Android-application-see-above-error
关于flutter:使用-Flutter-WEB-实现桌面-GUI-第1部分-介绍
关于flutter:Flutter-37-正式发布