宁泽林_NiZerin - 互联网技术博客

  • PHP
  • Go
  • Java
  • Rust
  • Python
  • 交流群
  • 关于我
  • 留言版
  1. 首页
  2. Flutter
  3. 正文

Flutter 基础(十一)网络请求(Dio)与 JSON 数据解析

2019年9月19日 3395点热度 0人点赞 4条评论

前言

在 Android 开发中如果我们想要请求网络,可以使用 HttpClent、HttpURLConnection,但在项目中一般都会使用 OkHttp 和 Retrofit。在 Flutter 也是如此,系统提供了 HttpClient,但在项目中一般会使用第三方库,比如 http 和 Dio,如果你想找到更多的第三库,可以在 pub.dartlang.org/ 上查找想要的库。本篇文章以 Dio 为例,另外还会介绍 JSON 数据解析方面的知识。

1.Dio 的使用入门

Dio 是一个强大的 Dart Http 请求库,支持拦截器,全局配置,FormData,请求取消,文件下载,超时等。
添加依赖
在 pubspec.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 上,地址为:https://github.com/flutterchina/dio。本文的目的不是重复介绍这些示例,而是写一个网络访问的例子带大家快速入门。

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: <Widget>[
            Text('IP地址为:'),
            spacer,
            Text('$_ipAddress'),
            spacer,
           RaisedButton(
              onPressed: _getIPAddress,
              child: Text('请求网络'),
            ),
          ],
        ),
      ),
    );
  }
}

async 和 await 是 Dart 语言用来支持异步编程的关键字,注释 1 处的 async 关键字使得_getIPAddress 方法变为了异步方法,注释 2 处的 await 关键字只能在异步方法中使用,它使得注释 2 处后面的代码等到 get 请求返回后再执行。
如果网络请求返回的状态码为 200,就在注释 3 处进行 Json 解析,将结果赋值给 result 变量。
当我们点击界面上按钮时,会调用_getIPAddress 方法,在注释 4 处将请求的结果赋值给_ipAddress 并显示在 Text 中。
网络请求成功后,效果如下图。

ZwFBEq.png

3.JSON 数据解析

常用的 JSON 数据解析方式主要有三种,这里分别介绍下。

3.1 使用 json.decode () 方法

第 2 小节的例子用到的就是 json.decode () 方法,需要引入 dart:convert 库。json.decode () 方法会将 String 类型数据解析成 Map 数据结构:Map<String, dynamic>, 取数据的格式为 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<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 的实体,这样就可以完成赋值等操作了。

3.3 自动生成实体类

一般项目中 Json 数据会比较繁多,每次重复写实体类的模版代码显然枯燥无意义,可以使用一些工具来生成实体类。
比如使用网页自动生成: https://app.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<String, dynamic> json) => new Ip(
        origin: json["origin"],
    );
    Map<String, dynamic> toJson() => {
        "origin": origin,
    };
}

除了使用网页生成,还可以使用开源的 JSONFormat4Flutter:
https://github.com/debuggerx01/JSONFormat4...
使用 json_serializable
除了以上提到的工具,还可以使用 json_serializable。
json_serializable 是一个自动化的源代码生成器,可以方便的生成 JSON 实体类。
首先在 pubspec.yaml 加入如下依赖,


dependencies:
 json_annotation: ^2.4.0
dev_dependencies:
 build_runner: ^1.0.0
 json_serializable: ^3.0.0

在 AS 的 Terminal 中运行 flutter 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<String, dynamic> json) => _$IpFromJson(json);
 Map<String, dynamic> toJson() => _$IpToJson(this);
}

关键的在于 @JsonSerializable (),它用于告诉生成器,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<String, dynamic> json) {
  return Ip(json['origin'] as String);
}
Map<String, dynamic> _$IpToJson(Ip instance) =>
    <String, dynamic>{'origin': instance.origin};

该文件有着必需的序列化逻辑,目前 Flutter 官方推荐的就是使用 json_serializable。

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: flutter
最后更新:2019年9月19日

NiZerin

博主已经躺平了,后面很少会更新博客。

打赏 点赞
< 上一篇
下一篇 >

文章评论

  • Stilly

    很漂亮的一枚小程序

    2019年9月20日
    回复
    • NiZerin

      @Stilly 谢谢支持!

      2019年9月20日
      回复
    • blue

      @Stilly 测试哈

      2019年11月14日
      回复
  • blue

    不错哈

    2019年11月14日
    回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    分类
    • Angular
    • CSS3
    • docker
    • Flutter
    • git
    • Go
    • H5
    • Java
    • JavaScript
    • Laravel
    • linux
    • Node.js
    • PHP
    • Python
    • React
    • redis
    • Vue.js
    • windows
    • WordPress
    • 交流
    • 小程序
    • 工具
    • 网站公告
    标签聚合
    javascript flutter go wordpress translations laravel vue php
    友情链接
    • PHP函数字典
    • 宝塔运维特惠
    • 科学上网
    • 阿里云特惠

    COPYRIGHT © 2021 nizer.in. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang