Flutter学习之旅(五)----网络请求获取数据、解析数据和显示等待动画

参考官方文章(英文版)

网络请求是APP开发中至关重要的一步，回想一下Android开发中的Retrofit框架或者Volley框架，iOS开发中AFNetworking框架。如果使用Volley进行网络请求，我们需要new一个StringRequest请求，在里面回调成功和失败的方法，用GsonFormmater等类似工具解析json串，然后将这个请求添加到队列，这中间要给予用户友好的提示，即显示与隐藏加载框，甚至是下拉刷新功能的实现，如果要保持登录状态，还需要将Session信息添加到请求的头部。成熟的网络请求框架像Volley很容易实现这些功能，Flutter中的网络请求是否能够实现这些功能呢，如何实现呢？
这篇文章主要介绍如何在Flutter中进行网络请求，包括基本的网络请求，对服务器返回的json进行解析，构造json，加载框显示与隐藏。

一、完整的网络请求过程

打开InteliJ IDEA，新建一个Flutter工程，在左侧工程结构里面的pubspec.yaml文件里面添加网络请求的依赖

http: '>=0.11.3+12'

将main.dart里面的代码全部删除，然后重新写我们的代码，先导包：

import 'package:flutter/material.dart';//导入系统基础包
import 'package:flutter/services.dart';//导入网络请求相关的包

然后获取http对象

var httpclient=createHttpClient();//获取http对象

用async…await..发送网络请求并读取结果：

_postData() async{
    response=await httpclient.read(url);//发送网络请求，read()表示读取返回的结果，get()表示不读取返回的结果
    print('Response=$response');
  }

上面就是一次完整的网络请求的核心代码，好像并不复杂吧？完整的代码如下，直接复制到main.dart，替换掉原来的代码即可运行：

import 'package:flutter/material.dart';//导入系统基础包
import 'package:flutter/services.dart';//导入网络请求相关的包
void main(){
  runApp(new MaterialApp(home: new ClickEvent(),));
}
class ClickEvent extends StatefulWidget{
  @override
  _ClickEventState createState() {
    return new _ClickEventState();
  }
}
class _ClickEventState extends State<ClickEvent>{
  var httpclient=createHttpClient();//获取http对象
  var url='https://api.github.com/';
  var response;
  _postData() async{
    response=await httpclient.read(url);//发送网络请求，read()表示读取返回的结果，get()表示不读取返回的结果
    print('Response=$response');
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(appBar: new AppBar(title: new Text('网络请求'),),
      floatingActionButton: new FloatingActionButton(child: new Text('获取数据'),onPressed: _postData),);//点击后调用网络请求方法
  }
}

运行结果为：

上面就是https://api.github.com/这个接口返回的json串，至此我们已经能够从服务器获取网络数据了，怎么样，比想象中简单吧。

二、解析服务器返回的json数据

先导入json相关的包

import 'dart:convert';

如果返回的数据结果类似于：

['foo', { 'bar': 499 }]

可以这样解析

Map data= JSON.decode(response);
data[1]['bar'];

如果返回的数据结构类似于：

{"current_user_url":"https://api.github.com/user"}

可以这样解析：

Map data= JSON.decode(response);
var url1= data['current_user_url'];

解析结果为：

current_user_url:https://api.github.com/user

三、等待动画的显示与关闭

先新建一个对话框(圆圈)控件，用来显示，核心代码是

new CircularProgressIndicator()//这是圆圈对话框，还有条形对话框的。

然后用定时器不断去回调结果，代码如下：

class ShowProgress extends StatefulWidget {
  ShowProgress(this.requestCallback);
  final Future<Null> requestCallback;//这里Null表示回调的时候不指定类型
  @override
  _ShowProgressState createState() => new _ShowProgressState();
}
class _ShowProgressState extends State<ShowProgress> {
  @override
  initState() {
    super.initState();
    new Timer(new Duration(milliseconds: 10), () {//每隔10ms回调一次
      widget.requestCallback.then((Null) {//这里Null表示回调的时候不指定类型
        Navigator.of(context).pop();//所以pop()里面不需要传参,这里关闭对话框并获取回调的值
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new CircularProgressIndicator(),//获取控件实例
    );
  }
}

点击“获取数据”按钮，将网络请求的方法_postData作为参数传递给ShowProgress显示对话框，下面代码功能主要是展示对话框，核心代码如下：

Future<Null> _myClick()  {
     return showDialog<Null>(
         context: context,
         barrierDismissible: true, // false表示必须点击按钮才能关闭
         child:new ShowProgress(_postData())//将网络请求的方法_postData作为参数传递给ShowProgress显示对话框
     );

完整代码如下，直接复制到main.dart即可运行：

import 'dart:async';
import 'package:flutter/material.dart';//导入系统基础包
import 'package:flutter/services.dart';//导入网络请求相关的包
import 'dart:convert';
void main(){
  runApp(new MaterialApp(home: new ClickEvent(),));
}
class ShowProgress extends StatefulWidget {
  ShowProgress(this.requestCallback);
  final Future<Null> requestCallback;//这里Null表示回调的时候不指定类型
  @override
  _ShowProgressState createState() => new _ShowProgressState();
}

class _ShowProgressState extends State<ShowProgress> {
  @override
  initState() {
    super.initState();
    new Timer(new Duration(milliseconds: 10), () {//每隔10ms回调一次
      widget.requestCallback.then((Null) {//这里Null表示回调的时候不指定类型
        Navigator.of(context).pop();//所以pop()里面不需要传参,这里关闭对话框并获取回调的值
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new CircularProgressIndicator(),
    );
  }
}
////////////上面是对话框控件，下面是按钮控件/////////////////
class ClickEvent extends StatefulWidget{
  @override
  _ClickEventState createState() {
    return new _ClickEventState();
  }
}
class _ClickEventState extends State<ClickEvent>{
   Future<Null> _myClick()  {
     return showDialog<Null>(
         context: context,
         barrierDismissible: true, // false表示必须点击按钮才能关闭
         child:new ShowProgress(_postData())//将网络请求的方法_postData作为参数传递给ShowProgress显示对话框
     );
  }
  var httpclient=createHttpClient();//获取http对象
  var url='https://api.github.com/';
  var response;
  //核心的网络请求方法
  _postData() async{
    response=await httpclient.read(url);//发送网络请求，read()表示读取返回的结果，get()表示不读取返回的结果
    print('Response=$response');
    Map data= JSON.decode(response);
    var url1= data['current_user_url'];
    print('current_user_url:$url1');
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(appBar: new AppBar(title: new Text('网络请求'),),
      floatingActionButton: new FloatingActionButton(child: new Text('获取数据'),onPressed: _myClick),);
  }
}

运行结果为：

从图中可以看到，收到服务器响应后就关闭了对话框，达到了我们的目的。
上面讲解了一次基本的网络请求，包括获取数据，解析数据，显示等待动画。当然，成熟的网络框架远不止这些，还包括缓存处理，超时处理，异常处理，封装等等，这些我们以后都会涉及到。

如果看完这篇文章您有所收获，不忘点个赞或者关注一下留个言什么的，您的鼓励是我前进的动力，谢谢。