Futterベース(11)ネットワーク要求(Dio)とJSONデータ解析

14033 ワード

この文章は初めて公衆号で発表された「劉望舒」である.
React Native入門シリーズReact NativeコンポーネントFutter基礎シリーズ
前言
Android開発において、私達がネットワークを要求するなら、HttpClont、HttpURLConnectを使用することができますが、プロジェクトではOkHttpとRetrofitが一般的に使われます.Futterでも、システムはHttp Clientを提供していますが、プロジェクトでは主にhttpとDioなどの第三者ライブラリを使用しています.もっと多くの第三のライブラリを見つけたいなら、pb.dartlang.org/上で希望のライブラリを検索できます.本記事はDioを例にとり、JSONデータ解析に関する知識を紹介します.
1.Dioの使用入門
ディオは、強力なDart Httpリクエストライブラリであり、ブロック、グローバル構成、FormData、キャンセル、ファイルダウンロード、タイムアウトなどをサポートしています.
依存をpbspec.yamlに追加します.

dependencies:
  dio: 2.1.7

公式サイトは簡単な例を示しています.

import 'package:dio/dio.dart';
void getHttp() async {
  try {
    Response response = await Dio().get("http://liuwangshu.com");
    print(response);
  } catch (e) {
    print(e);
  }
}

GET要求を送信する場合:

Response response;
response=await dio.get("/test?id=3&name=liuwangshu")
print(response.data.toString());
//              ，        ：
response=await dio.get("/test",data:{"id":3,"name":"liuwangshu"})
print(response.data.toString());

POST要求を送信します.

response=await dio.post("/test",data:{"id":3,"name":"liuwangshu"})

FormDataを送信:

FormData formData = new FormData.from({
    "name": "liuwangshu",
    "age": 18,
  });
response = await dio.post("/info", data: formData);

まだたくさんの例があります.github.com/flunterchin...
2.Dioアクセスネットワークの例

import 'dart:convert';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _ipAddress = 'Unknown';

  _getIPAddress() async {//1
    var url = 'https://httpbin.org/ip';
    Dio _dio = Dio();
    String result;
    try {
      var response = await _dio.get(url);//2
      if (response.statusCode == HttpStatus.ok) {
        var data= jsonDecode(response.toString());//3
        result = data['origin'];
      } else {
        result =
        'Error getting IP status ${response.statusCode}';
      }
    } catch (exception) {
      result =exception.toString();
    }
    if (!mounted) return;
    setState(() {
      _ipAddress = result;//4
    });
  }

  @override
  Widget build(BuildContext context) {
    var spacer = SizedBox(height: 10.0);
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(100.0),
        child: Column(
          children: [
            Text('IP   ：'),
            spacer,
            Text('$_ipAddress'),
            spacer,
           RaisedButton(
              onPressed: _getIPAddress,
              child: Text('    '),
            ),
          ],
        ),
      ),
    );
  }
}

asyncとawaitはDart言語で非同期プログラムをサポートするキーワードであり、注釈1のasyncキーワードは_get IPAddress方法は非同期方法となり、注釈2におけるawaitキーワードは非同期方法でのみ使用でき、注釈2における後のコードはget要求が戻ってから実行される.ネットワーク要求が返された状態コードが200であれば、コメント3でJson解析を行い、結果をreult変数に割り当てます.私たちは画面上のボタンをクリックすると、_を呼び出します.getIPAddres方法は、注釈4において、要求された結果を評価する.ipAddressはTextに表示されます.ネットワーク要求が成功したら、効果は下図のようになります.
3.JSONデータ解析
よく使われるJSONデータ解析方式は主に3つあります.ここでそれぞれ紹介します.
3.1 Json.decodeを使用する方法
第2小節の例としては、json.decodeの方法が用いられており、dart:convertライブラリを導入する必要がある.json.decode()方法は、StringタイプのデータをMapデータ構造に解析します.Map、データを取るフォーマットはobject[key]です.上記の例で返したJOSNデータは、

{
  "origin": "111.193.7.70, 111.193.7.70"
}

複雑ではないJOSNデータに対してJson.decodeを使うのはいい選択ですが、実際のプロジェクトのJOSNデータは複雑です.毎回データを取る時はobject[key]を使うと間違えやすいです.
3.2マニュアル作成エンティティ類
データをシリアル化するために、一つのmodelでデータを保存します.私たちは新しいip.dartを作ることができます.

class Ip {
  String origin;

  Ip(this.origin);

  Ip.fromJson(Map json) : origin = json['origin'];

  Map toJson() => {
        "origin": origin,
      };
}

そしてメールを修正します.

import 'dart:convert';
import 'dart:io';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'model/ip.dart';
...
class _MyHomePageState extends State<MyHomePage> {
  var _ipAddress = 'Unknown';
  _getIPAddress() async {
    var url = 'https://httpbin.org/ip';
    Dio _dio = Dio();
    String result;
    try {
      var response = await _dio.get(url);
      if (response.statusCode == HttpStatus.ok) {
        var data= jsonDecode(response.toString());
        var ip=Ip.fromJson(data);//1
        result = ip.origin;
      } 
    ...
  }
...
}

注記1箇所はIp.from Jsonでipの本体を取得することができます.そうすると、赋価などの操作が完了します.
3.3エンティティクラスを自動的に生成する
普通のプロジェクトの中でJsonデータは比較的に多いことができて、毎回実体種類の模版コードを繰り返し書いて明らかに味気なくて意味がなくて、いくつかツールを使って実体種類を生成することができます.例えば、ウェブページを使って自動的に生成されます.ap.quicktype.io/です.変換するエンティティクラスを以下に示します.

import 'dart:convert';

Ip ipFromJson(String str) => Ip.fromJson(json.decode(str));

String ipToJson(Ip data) => json.encode(data.toJson());

class Ip {
    String origin;

    Ip({
        this.origin,
    });

    factory Ip.fromJson(Map json) => new Ip(
        origin: json["origin"],
    );

    Map toJson() => {
        "origin": origin,
    };
}

ウェブページを使って生成する以外に、オープンソースのJSONFormat 4 Futter:github.com/debuggargerx 01…
Json_を使うserializableは上記のツールの他に、jsonを使用することができます.serializableJsonserializableは自動化されたソースコード生成器であり、JSONエンティティクラスを生成するのに便利である.まずpbspec.yamlに次のような依存を入れます.

dependencies:
  json_annotation: ^2.4.0

dev_dependencies:
  build_runner: ^1.0.0
  json_serializable: ^3.0.0

ASのTerminalでflunter packages getコマンドを実行して、これらの新しい依存項をプロジェクトに使用します.次に、ipエンティティクラスを実現します.

import 'package:json_annotation/json_annotation.dart';

// ip.g.dart                
part 'ip.g.dart';

//     ，       Model 
@JsonSerializable()
class Ip{
  Ip(this.origin);

  String origin;

  factory Ip.fromJson(Map json) => _$IpFromJson(json);
  Map toJson() => _$IpToJson(this);
}

重要なのは@Json Serializable()で、Ip類は生成が必要なModel類であることをジェネレータに教えます.Terminalウィンドウでは、以下のコマンドでip.g.dartファイルを生成します.

flutter packages pub run build_runner build

どのように3.2節を見ればいいですか?json_を使います.serializableは、Ipクラスの任意のマニュアルJSONのプログレッシブを無視することができます.ソースコード生成器は、同じディレクトリでIp.g.dartを生成します.以下に示します.

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'ip.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

Ip _$IpFromJson(Map json) {
  return Ip(json['origin'] as String);
}

Map _$IpToJson(Ip instance) =>
    {'origin': instance.origin};

このファイルには必要なプログレッシブロジックがあります.現在Futterの公式推奨はjson_を使うことです.serializable
FutterベースシリーズFutterベース(一)移動開発のクロスプラットフォーム技術の進化Futterベース(二)Futter開発環境構築とハローWorld Futter基礎(三)Dart高速入門Futter基礎(四)開発Futterアプリケーション前に習得する必要があるBaic Widget Futter基礎(五)MaterialコンポーネントのMaterial Apper、Scaffuter、ベース(4)Batter Bater 6MaterialコンポーネントのBottom NavigationBar、TabBar、DrawerFutter基礎(7)Scrrolling WidgetのListView、GridView、PageView Futter基礎(8)ジェスチャー関連Widget:Gesture DetectorとDimissibleFuter基礎(9)リソースとFuter基礎レイアウト要求(Futter 10)JSONデータ解析Futterベース(12)ルート(ページジャンプ)とデータ転送Futterベース(13)FutterとAndroidの相互通信
ここでは大きな先端、Android、Javaなどの技術を共有するだけでなく、プログラマの成長タイプの文章もあります.
転載先:https://juejin.im/post/5d3eecba6fb9a06b155d97ba

スプリングIOC容器とは?

spring boot getとpost要求、及びrequest bodyがjsonの時の処理です.