Flutter基礎(chǔ)（十一）網(wǎng)絡(luò)請求（Dio）與JSON數(shù)據(jù)解析

每日一言:人生或如一輪紅日，劃破黎明的沉寂，熾熱的夢想在噴勃或如一段段插曲在生命的華章里熠熠激蕩迸濺起最璀璨的激昂。

原文鏈接:http://liuwangshu.cn/flutter/primer/11-dio-json.html

前言
在Android開發(fā)中如果我們想要請求網(wǎng)絡(luò)，可以使用HttpClent、HttpURLConnection，但在項(xiàng)目中一般都會使用OkHttp和Retrofit。在Flutter也是如此，系統(tǒng)提供了HttpClient，但在項(xiàng)目中一般會使用第三方庫，比如http和Dio，如果你想找到更多的第三庫，可以在pub.dartlang.org/ 上查找想要的庫。本篇文章以Dio為例，另外還會介紹JSON數(shù)據(jù)解析方面的知識。

1.Dio的使用入門

Dio是一個強(qiáng)大的Dart Http請求庫，支持?jǐn)r截器，全局配置，F(xiàn)ormData，請求取消，文件下載，超時等。

添加依賴
在pubspec.yaml中添加依賴。

dependencies:
  dio: 2.1.7

官網(wǎng)給出了一個簡單的例子：

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

如果想要發(fā)送一個GET請求:

Response response;
response=await dio.get("/test?id=3&name=liuwangshu")
print(response.data.toString());
// 請求參數(shù)也可以通過對象傳遞，上面的代碼等同于：
response=await dio.get("/test",data:{"id":3,"name":"liuwangshu"})
print(response.data.toString());

發(fā)送一個POST 請求:

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

發(fā)送一個FormData：

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

還有很多示例在github上，地址為：https://github.com/flutterchina/dio。本文的目的不是重復(fù)介紹這些示例，而是寫一個網(wǎng)絡(luò)訪問的例子帶大家快速入門。

2.Dio訪問網(wǎng)絡(luò)的例子


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: <Widget>[
            Text('IP地址為：'),
            spacer,
            Text('$_ipAddress'),
            spacer,
           RaisedButton(
              onPressed: _getIPAddress,
              child: Text('請求網(wǎng)絡(luò)'),
            ),
          ],
        ),
      ),
    );
  }
}

async和await是Dart語言用來支持異步編程的關(guān)鍵字，注釋1處的async關(guān)鍵字使得_getIPAddress方法變?yōu)榱水惒椒椒ǎ⑨?處的await關(guān)鍵字只能在異步方法中使用，它使得注釋2處后面的代碼等到get請求返回后再執(zhí)行。
如果網(wǎng)絡(luò)請求返回的狀態(tài)碼為200，就在注釋3處進(jìn)行Json解析，將結(jié)果賦值給result變量。
當(dāng)我們點(diǎn)擊界面上按鈕時，會調(diào)用_getIPAddress方法，在注釋4處將請求的結(jié)果賦值給_ipAddress并顯示在Text中。
網(wǎng)絡(luò)請求成功后，效果如下圖。


ZwFBEq.png

3.JSON數(shù)據(jù)解析

常用的JSON數(shù)據(jù)解析方式主要有三種，這里分別介紹下。

3.1 使用json.decode()方法

第2小節(jié)的例子用到的就是json.decode()方法，需要引入dart:convert庫。json.decode() 方法會將 String類型數(shù)據(jù)解析成Map數(shù)據(jù)結(jié)構(gòu)：Map<String, dynamic>, 取數(shù)據(jù)的格式為object[key]。
上面例子中返回的JOSN數(shù)據(jù)為：

{
  "origin": "111.193.7.70, 111.193.7.70"
}

對于不復(fù)雜的JOSN數(shù)據(jù)使用json.decode()方法是一個不錯的選擇，但實(shí)際項(xiàng)目中的JOSN數(shù)據(jù)會復(fù)雜一些，如果每次取數(shù)據(jù)都用object[key]，那么很容易出錯。

3.2手動編寫實(shí)體類

用一個model來保存數(shù)據(jù)，使得數(shù)據(jù)序列化。
我們可以新建一個ip.dart：

class Ip {
  String origin;

  Ip(this.origin);

  Ip.fromJson(Map<String, dynamic> json) : origin = json['origin'];

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

然后修改main.dart:

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.fromJson就可以獲取ip的實(shí)體，這樣就可以完成賦值等操作了。

3.3 自動生成實(shí)體類

一般項(xiàng)目中Json數(shù)據(jù)會比較繁多，每次重復(fù)寫實(shí)體類的模版代碼顯然枯燥無意義，可以使用一些工具來生成實(shí)體類。
比如使用網(wǎng)頁自動生成： https://app.quicktype.io/ 。轉(zhuǎn)換的實(shí)體類如下所示。

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<String, dynamic> json) => new Ip(
        origin: json["origin"],
    );

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

除了使用網(wǎng)頁生成，還可以使用開源的JSONFormat4Flutter：
https://github.com/debuggerx01/JSONFormat4Flutter

使用json_serializable
除了以上提到的工具，還可以使用json_serializable。
json_serializable是一個自動化的源代碼生成器，可以方便的生成JSON實(shí)體類。
首先在pubspec.yaml加入如下依賴，

dependencies:
  json_annotation: ^2.4.0

dev_dependencies:
  build_runner: ^1.0.0
  json_serializable: ^3.0.0

在AS的Terminal中運(yùn)行flutter packages get命令，用來在項(xiàng)目中使用這些新的依賴項(xiàng)。
接著實(shí)現(xiàn)ip實(shí)體類。

import 'package:json_annotation/json_annotation.dart';

// ip.g.dart 將在我們運(yùn)行生成命令后自動生成
part 'ip.g.dart';

//告訴生成器，這個類需要生成Model類
@JsonSerializable()
class Ip{
  Ip(this.origin);

  String origin;

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

關(guān)鍵的在于@JsonSerializable()，它用于告訴生成器，Ip類是需要生成的Model類。在Terminal窗口運(yùn)行如下命令生成ip.g.dart文件。

flutter packages pub run build_runner build

如何使用見3.2節(jié)就可以了，使用json_serializable可以讓我們忽略Ip類中的任何手動JSON序列化 。源代碼生成器會在同一個目錄下生成Ip.g.dart，如下所示。

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'ip.dart';

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

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

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

該文件有著必需的序列化邏輯，目前Flutter官方推薦的就是使用json_serializable。


最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容