Question

我在bloc中有一个函数，需要从API检索数据，然后解析并将它们加载到小部件中。

对于从API进行数据检索，它是如此之快。但是，解析json时，我看到一个瓶颈，如下面的代码所示：

      response = await dio.get("/article/get-random?category=1&lang=${translations.currentLanguage}");
      var data = response.data['data'];
      print(data);
      articleList.clear();
      if (response.statusCode == 200) {

        //data length is 5
        for (int i = 0; i < data.length; i++) {

          //Start of The Bottleneck is here...

          model = await compute(articleFromJson, json.encode(data[i]));
          articleList.add(model);

          //End of The Bottleneck
        }

        print ("above code take around 5 seconds");

        // sink to the stream
        _articlesController.sink.add(articleList);
        _loadingArticleController.sink.add(false);
        await Storage.storeArticles(data);
      }

此代码：model = await compute(articleFromJson, json.encode(data[i])); 大约需要3-5秒才能完成，有时需要更长的时间。

这是articleFromJson的功能代码所在的类：

import 'dart:convert';

Article articleFromJson(String str) {
    final jsonData = json.decode(str);
    return Article.fromJson(jsonData);
}

String articleToJson(Article data) {
    final dyn = data.toJson();
    return json.encode(dyn);
}

class Article {

    int id;
    int category;
    String name;
    String baseUrl;
    String url;
    String imageUrl;
    dynamic data;
    int status;
    int order;
    DateTime createdAt;
    DateTime updatedAt;
    String categoryLabel;

    Article({
        this.id,
        this.category,
        this.name,
        this.baseUrl,
        this.url,
        this.imageUrl,
        this.data,
        this.status,
        this.order,
        this.createdAt,
        this.updatedAt,
        this.categoryLabel,
    });

    factory Article.fromJson(Map<String, dynamic> json) => new Article(
        id: json["id"],
        category: json["category"],
        name: json["name"],
        baseUrl: json["base_url"],
        url: json["url"],
        imageUrl: json["image_url"],
        data: json["data"],
        status: json["status"],
        order: json["order"],
        createdAt: DateTime.parse(json["created_at"]),
        updatedAt: DateTime.parse(json["updated_at"]),
        categoryLabel: json["category_label"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "category": category,
        "name": name,
        "base_url": baseUrl,
        "url": url,
        "image_url": imageUrl,
        "data": data,
        "status": status,
        "order": order,
        "created_at": createdAt.toIso8601String(),
        "updated_at": updatedAt.toIso8601String(),
        "category_label": categoryLabel,
    };
}

Json Data本身非常简单，如下所示（仅5行）：

{
    "status": 200,
    "message": "Success",
    "data": [
        {
            "id": 990121,
            "category": 1,
            "name": "Article 1 Title",
            "base_url": "base_url",
            "url": "https://article_1",
            "image_url": "https://ik.imagekit.io/xxx1",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },
        {
            "id": 990122,
            "category": 2,
            "name": "Article 2 Title",
            "base_url": "base_url",
            "url": "https://article_2",
            "image_url": "https://ik.imagekit.io/xxx2",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },
        {
            "id": 990123,
            "category": 1,
            "name": "Article 3 Title",
            "base_url": "base_url",
            "url": "https://article_3",
            "image_url": "https://ik.imagekit.io/xxx3",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },
        {
            "id": 990124,
            "category": 1,
            "name": "Article 4 Title",
            "base_url": "base_url",
            "url": "https://article_4",
            "image_url": "https://ik.imagekit.io/xxx4",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },
        {
            "id": 990125,
            "category": 1,
            "name": "Article 5 Title",
            "base_url": "base_url",
            "url": "https://article_5",
            "image_url": "https://ik.imagekit.io/xxx5",
            "data": null,
            "status": 1,
            "order": 4,
            "created_at": "2019-05-01 13:58:37",
            "updated_at": "2019-07-24 15:25:23",
            "category_label": "Article"
        },        
    ]
}

我的客户需要提高这种加载/解码速度，任何想法吗？

Answer 1

您未在应使用的地方使用compute（）函数，请参考https://flutter.dev/docs/cookbook/networking/background-parsing，以获取在compute（）隔离函数中解析JSON的正确方法

flutter-如何加快解析Json函数的速度

1 个答案: