Flutter学习之旅(五)----网络请求获取数据、解析数据和显示等待动画
2017-07-30 11:00
676 查看
参考官方文章(英文版)
网络请求是APP开发中至关重要的一步,回想一下Android开发中的Retrofit框架或者Volley框架,iOS开发中AFNetworking框架。如果使用Volley进行网络请求,我们需要new一个StringRequest请求,在里面回调成功和失败的方法,用GsonFormmater等类似工具解析json串,然后将这个请求添加到队列,这中间要给予用户友好的提示,即显示与隐藏加载框,甚至是下拉刷新功能的实现,如果要保持登录状态,还需要将Session信息添加到请求的头部。成熟的网络请求框架像Volley很容易实现这些功能,Flutter中的网络请求是否能够实现这些功能呢,如何实现呢?
这篇文章主要介绍如何在Flutter中进行网络请求,包括基本的网络请求,对服务器返回的json进行解析,构造json,加载框显示与隐藏。
一、完整的网络请求过程
打开InteliJ IDEA,新建一个Flutter工程,在左侧工程结构里面的pubspec.yaml文件里面添加网络请求的依赖
将main.dart里面的代码全部删除,然后重新写我们的代码,先导包:
然后获取http对象
用async…await..发送网络请求并读取结果:
上面就是一次完整的网络请求的核心代码,好像并不复杂吧?完整的代码如下,直接复制到main.dart,替换掉原来的代码即可运行:
运行结果为:
上面就是https://api.github.com/这个接口返回的json串,至此我们已经能够从服务器获取网络数据了,怎么样,比想象中简单吧。
二、解析服务器返回的json数据
先导入json相关的包
如果返回的数据结果类似于:
可以这样解析
如果返回的数据结构类似于:
可以这样解析:
解析结果为:
三、等待动画的显示与关闭
先新建一个对话框(圆圈)控件,用来显示,核心代码是
然后用定时器不断去回调结果,代码如下:
点击“获取数据”按钮,将网络请求的方法_postData作为参数传递给ShowProgress显示对话框,下面代码功能主要是展示对话框,核心代码如下:
完整代码如下,直接复制到main.dart即可运行:
运行结果为:
从图中可以看到,收到服务器响应后就关闭了对话框,达到了我们的目的。
上面讲解了一次基本的网络请求,包括获取数据,解析数据,显示等待动画。当然,成熟的网络框架远不止这些,还包括缓存处理,超时处理,异常处理,封装等等,这些我们以后都会涉及到。
如果看完这篇文章您有所收获,不忘点个赞或者关注一下留个言什么的,您的鼓励是我前进的动力,谢谢。
网络请求是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),);
}
}
运行结果为:
从图中可以看到,收到服务器响应后就关闭了对话框,达到了我们的目的。
上面讲解了一次基本的网络请求,包括获取数据,解析数据,显示等待动画。当然,成熟的网络框架远不止这些,还包括缓存处理,超时处理,异常处理,封装等等,这些我们以后都会涉及到。
如果看完这篇文章您有所收获,不忘点个赞或者关注一下留个言什么的,您的鼓励是我前进的动力,谢谢。
相关文章推荐
- android:通过url向网络端获取json格式数据并解析显示
- 请求网络数据,解析JSON,显示在listview上(采用thread,handler)
- (原创)使用AsyncTask(带修改线程池方式)+自定义ImageLoader+LRU算法对图片三级缓存及其显示优化(只有在ListView滑动停止的时候才去网络请求获取图片数据)
- RecyclerView获取网络数据并解析显示的过程
- 网络请求与json数据解析——学习笔记
- Android下网络请求数据,返回数据显示不全,解析json no value for xxx
- 网络请求及数据解析(注意事项:带中文的需要转换) +从网络获取图片
- 解析json数据,明明过程都写的挺对,在网络上请求也有数据,但是就是显示为空,原因是什么???
- [置顶] Android网络与数据存储03-在线请求天气API,并解析其中的json数据予以显示
- json数据解析,并实现将网络json数据获取用listview显示
- Java从网络中请求获取JSon数据以及解析JSON数据----(自创,请注明)
- Android中数据文件解析(Json解析【从服务器端获取数据并且解析,显示在客户端上面】)
- Android 获取并解析网络XML与数据上传
- Android中数据文件解析(Json解析【从服务器端获取数据并且解析,显示在客户端上面】)
- IOS学习之十六:网络数据的XML解析 .
- IOS学习笔记(16)网络请求,json解析
- android利用http从网络获取数据并存储或解析
- Android从网络中获取xml文件并解析数据
- android 获取网络数据,回传到本地用TextView显示乱码问题解决方法
- Android中数据文件解析(Json解析【从服务器端获取数据并且解析,显示在客户端上面】)