使用 Dio 请求数据，json_serializable 解析 json 数据

可以创建 flutter 项目，也可以创建 dart 项目。因为只是数据解析，不需要用到 flutter 视图组件。

添加 Dio 依赖 https://pub.flutter-io.cn/packages/dio

  1. name: dartlearn # 项目名字
  2. version: 0.0.1
  3. description: A sample command-line application for dart
  4. dependencies:
  5.   dio: ^3.0.9 # dio 依赖
  6.   #flutter packages pub run build_runner build
  7.   json_annotation: ^3.0.1 # json 解析依赖
  9. dev_dependencies:
  10.   build_runner: ^1.0.0 # json 解析依赖
  11.   json_serializable: ^3.2.5 # json 解析依赖

创建 simple_demo.dart

GET 请求 https://api.apiopen.top/getJoke?page=1&count=2&type=video 接口

Flutter 网络请求 & JSON 解析 - 图1

  1. import 'package:dio/dio.dart';
  3. main(List<String> args) async {
  4.   try {
  5.     const url = "https://api.apiopen.top/getJoke?page=1&count=2&type=video";
  6.     Dio dio = Dio();
  7.     Response response = await dio.get(url);
  8.     print(response);
  9.   } catch (e) {
  10.     print(e);
  11.   }
  12. }

运行 dart 文件 输出

Flutter 网络请求 & JSON 解析 - 图2

POST 请求 localhost:7000/api/v1/account/login

  1. main(List<String> args) async {
  2.   try {
  3.     // const url = "https://api.apiopen.top/getJoke?page=1&count=2&type=video";
  4.     // const url = 'https://api.apiopen.top/videoCategory';
  5.     Dio dio = Dio();
  6.     final String loginUrl = "http://localhost:7000/api/v1/account/login";
  7.     Map<String, dynamic> params = Map();
  8.     params["accountName"] = "李白";
  9.     params["password"] = "123456";
  10.     params["loginType"] = "password";
  11.     Response response = await dio.post(loginUrl, queryParameters: params);
  12.     print(response);
  13.   } catch (e) {
  14.     print(e);
  15.   }
  16. }

Flutter 网络请求 & JSON 解析 - 图3

携带 access token 获取用户信息

  1. main(List<String> args) async {
  2.   try {
  3.     // const url = "https://api.apiopen.top/getJoke?page=1&count=2&type=video";
  4.     // const url = 'https://api.apiopen.top/videoCategory';
  5.     Dio dio = Dio();
  7.     // Response response = await dio.get(url);
  8.     // VideoResult videoResult = VideoResult.fromJson(response.data);
  10.     // for (var item in videoResult.result.itemList) {
  11.     //   print(item.data.description);
  12.     // }
  14.     // final String loginUrl = "http://localhost:7000/api/v1/account/login";
  15.     // Map<String, dynamic> params = Map();
  16.     // params["accountName"] = "李白";
  17.     // params["password"] = "123456";
  18.     // params["loginType"] = "password";
  19.     // Response response = await dio.post(loginUrl, queryParameters: params);
  20.     // print(response);
  22.     final String info_url = "http://localhost:7000/api/v1/user/info";
  23.     dio.post(info_url, queryParameters: {
  24.       "access_token": 'ade59299-5833-496b-b5ab-42a8e3a84af1'
  25.     }).then((response) {
  26.       AccountInfo accountInfo = AccountInfo.fromJson(response.data);
  27.       print(accountInfo.data.toJson());
  28.     });
  29.   } catch (e) {
  30.     print(e);
  31.   }
  32. }

Flutter 网络请求 & JSON 解析 - 图4

返回数据格式，可以封装一个最外层数据模型, BaseResponse， 再根据 result 返回的具体结果进行模型解析

  1. {
  2.     code: 200,
  3.     message: "成功!",
  4.     result: {}
  5. }

BaseResponse.dart

  1. import 'package:json_annotation/json_annotation.dart';
  3. part 'base_response.g.dart';
  5. @JsonSerializable()
  6. class BaseResponse {
  7.   // 后台返回的错误码
  8.   int code;
  10.   // 返回的信息
  11.   String message;
  13.   BaseResponse(this.code, this.message);
  15.   factory BaseResponse.fromJson(Map<String, dynamic> json) =>
  16.       _$BaseResponseFromJson(json);
  18.   Map<String, dynamic> toJson() => _$BaseResponseToJson(this);
  19. }

数据返回数组，创建与之对应模型

JokeItemModel.dart

  1. import 'package:json_annotation/json_annotation.dart';
  3. part 'joke_item_model.g.dart';
  5. @JsonSerializable()
  6. class JokeItemModel {
  7.   /**
  8.    *  sid: "31577089",
  9.    *  text: "孩子厉害👍",
  10.    *  type: "video",
  11.    *  thumbnail: "http://wimg.spriteapp.cn/picture/2020/1026/5f967bc4e7de2_wpd.jpg",
  12.    *  video: "http://uvideo.spriteapp.cn/video/2020/1026/5f967bc4e7de2_wpd.mp4",
  13.    *  images: null,
  14.    *  up: "114",
  15.    *  down: "3",
  16.    *  forward: "0",
  17.    *  comment: "6",
  18.    *  uid: "23005857",
  19.    *  name: "无情无义",
  20.    *  header: "http://wimg.spriteapp.cn/profile/large/2020/02/09/5e3fc8f551f9a_mini.jpg",
  21.    *  top_comments_content: "厉害不厉害不知道。反正比我强",
  22.    *  top_comments_voiceuri: "",
  23.    *  top_comments_uid: "11981984",
  24.    *  top_comments_name: "不得姐用户",
  25.    *  top_comments_header: "http://qzapp.qlogo.cn/qzapp/100336987/D2C67A061C37841FD39E2D6232DE9833/100",
  26.    *  passtime: "2020-12-24 18:30:05"
  27.    */
  28.   String sid;
  29.   String text;
  30.   String type;
  31.   String thumbnail;
  32.   String video;
  33.   String images;
  34.   String up;
  35.   String down;
  36.   String forward;
  37.   String comment;
  38.   String uid;
  39.   String name;
  40.   String header;
  41.   String top_comments_content;
  42.   String top_comments_voiceuri;
  43.   String top_comments_uid;
  44.   String top_comments_name;
  45.   String top_comments_header;
  46.   String passtime;
  47.   JokeItemModel(
  48.     this.sid,
  49.     this.text,
  50.     this.type,
  51.     this.thumbnail,
  52.     this.video,
  53.     this.images,
  54.     this.up,
  55.     this.down,
  56.     this.forward,
  57.     this.comment,
  58.     this.uid,
  59.     this.name,
  60.     this.header,
  61.     this.top_comments_content,
  62.     this.top_comments_voiceuri,
  63.     this.top_comments_uid,
  64.     this.top_comments_name,
  65.     this.top_comments_header,
  66.   );
  68.   factory JokeItemModel.fromJson(Map<String, dynamic> json) =>
  69.       _$JokeItemModelFromJson(json);
  71.   Map<String, dynamic> toJson() => _$JokeItemModelToJson(this);
  72. }

解析返回 result 字段，可以创建最外层模型 JokeModel 继承 BaseResponse

JokeModel.dart

  1. import 'package:json_annotation/json_annotation.dart';
  3. import 'base_response.dart';
  4. import 'joke_item_model.dart';
  6. part 'joke_model.g.dart';
  8. @JsonSerializable()
  9. class JokeModel extends BaseResponse {
  10.   List<JokeItemModel> result;
  12.   JokeModel(int code, String message) : super(code, message) {
  13.     this.result = result;
  14.   }
  16.   factory JokeModel.fromJson(Map<String, dynamic> json) =>
  17.       _$JokeModelFromJson(json);
  19.   Map<String, dynamic> toJson() => _$JokeModelToJson(this);
  20. }

定义完所有模式之后，可以使用 build_runner 命令生成 json 解析模型

flutter packages pub run build_runner build

Flutter 网络请求 & JSON 解析 - 图5

Flutter 网络请求 & JSON 解析 - 图6

解析数据

  1. Response response = await dio.get(url);
  2. JokeModel jokeModel = JokeModel.fromJson(response.data);
  3. for (var item in jokeModel.result) {
  4.     print(item.text);
  5. }

Flutter 网络请求 & JSON 解析 - 图7

解析复杂一些数据

https://api.apiopen.top/videoCategory

Flutter 网络请求 & JSON 解析 - 图8

定义模型

VideoResult.dart

  1. import 'package:json_annotation/json_annotation.dart';
  3. import 'base_response.dart';
  4. import 'video_category.dart';
  6. part 'video_result.g.dart';
  8. @JsonSerializable()
  9. class VideoResult extends BaseResponse {
  10.   VideoCategory result;
  12.   VideoResult(int code, String message, this.result) : super(code, message);
  14.   factory VideoResult.fromJson(Map<String, dynamic> json) =>
  15.       _$VideoResultFromJson(json);
  17.   Map<String, dynamic> toJson() => _$VideoResultToJson(this);
  18. }

返回的 result 为一个对象模型 需要注意

VideoCategory.dart

  1. import 'package:dartlearn/src/json_demo/video_category_item.dart';
  2. import 'package:json_annotation/json_annotation.dart';
  4. part 'video_category.g.dart';
  6. @JsonSerializable()
  7. class VideoCategory {
  8.   bool adExist;
  9.   int total;
  10.   String nextPageUrl;
  11.   int count;
  12.   List<VideoCategoryItem> itemList;
  14.   VideoCategory(
  15.       this.adExist, this.count, this.nextPageUrl, this.total, this.itemList);
  17.   factory VideoCategory.fromJson(Map<String, dynamic> json) =>
  18.       _$VideoCategoryFromJson(json);
  20.   Map<String, dynamic> toJson() => _$VideoCategoryToJson(this);
  21. }

itemList 字段返回集合类型，定义对象模型

VideoCategoryItem.dart

  1. import 'package:dartlearn/src/json_demo/category_item.dart';
  2. import 'package:json_annotation/json_annotation.dart';
  4. part 'video_category_item.g.dart';
  6. @JsonSerializable()
  7. class VideoCategoryItem {
  8.   int adIndex;
  9.   dynamic tag;
  10.   int id;
  11.   String type;
  12.   CategoryItem data;
  14.   VideoCategoryItem(this.adIndex, this.tag, this.id, this.type);
  16.   factory VideoCategoryItem.fromJson(Map<String, dynamic> json) =>
  17.       _$VideoCategoryItemFromJson(json);
  19.   Map<String, dynamic> toJson() => _$VideoCategoryItemToJson(this);
  20. }

VideoCategoryItem data 为对象类型

CategoryItem.dart

  1. import 'package:json_annotation/json_annotation.dart';
  2. import 'package:dartlearn/src/json_demo/follow_item.dart';
  4. part 'category_item.g.dart';
  6. @JsonSerializable()
  7. class CategoryItem {
  8.   bool ifShowNotificationIcon;
  9.   bool expert;
  10.   String dataType;
  11.   String icon;
  12.   String actionUrl;
  13.   String description;
  14.   String title;
  15.   int uid;
  16.   String subTitle;
  17.   String iconType;
  18.   bool ifPgc;
  19.   int id;
  20.   String adTrack;
  21.   FollowItem follow;
  23.   CategoryItem(
  24.       this.actionUrl,
  25.       this.adTrack,
  26.       this.dataType,
  27.       this.description,
  28.       this.expert,
  29.       this.icon,
  30.       this.iconType,
  31.       this.id,
  32.       this.ifPgc,
  33.       this.ifShowNotificationIcon,
  34.       this.subTitle,
  35.       this.title,
  36.       this.uid,
  37.       this.follow);
  38.   factory CategoryItem.fromJson(Map<String, dynamic> json) =>
  39.       _$CategoryItemFromJson(json);
  41.   Map<String, dynamic> toJson() => _$CategoryItemToJson(this);
  42. }

follow 字段为一个对象

FollowItem.dart

  1. import 'package:json_annotation/json_annotation.dart';
  3. part 'follow_item.g.dart';
  5. @JsonSerializable()
  6. class FollowItem {
  7.   int itemId;
  8.   String itemType;
  9.   bool followed;
  11.   FollowItem(this.followed, this.itemId, this.itemType);
  13.   factory FollowItem.fromJson(Map<String, dynamic> json) =>
  14.       _$FollowItemFromJson(json);
  16.   Map<String, dynamic> toJson() => _$FollowItemToJson(this);
  17. }

执行 flutter packages pub run build_runner build，生成 *.g.dart 文件。

![](https://g.yuque.com/gr/latex?XXXXToJson%20%20#card=math&code=XXXXToJson%20%20_)XXXXFromJson 为 JsonSerializableGenerator 生成器生成的方法

使用

  1. main(List<String> args) async {
  2.   try {
  3.     // const url = "https://api.apiopen.top/getJoke?page=1&count=2&type=video";
  4.     const url = 'https://api.apiopen.top/videoCategory';
  5.     Dio dio = Dio();
  6.     Response response = await dio.get(url);
  7.     VideoResult videoResult = VideoResult.fromJson(response.data);
  9.     for (var item in videoResult.result.itemList) {
  10.       print(item.data.description);
  11.     }
  13.   } catch (e) {
  14.     print(e);
  15.   }
  16. }

Flutter 网络请求 & JSON 解析 - 图9