Flutter学习(7)——网络请求框架Dio简单使用
原文地址: Flutter学习(7)——网络请求框架Dio简单使用 | Stars-One的杂货小窝
之前的Flutter学习系列都是在个人博客上发布的,感兴趣可以去看看,就不搬过来了
网络请求一般APP都是需要的,在Flutter中,目前比较流行的网络请求框架是Dio,是Flutter中文网推出的,也算是国人开发的👍
本文主要是讲解如何简单使用Dio的get请求来获取数据,并使用Flutter中的listview进行展示
关于listview在之前已经讲过使用方法😃 不清楚的同学可以先去看看Flutter学习(6)——Tab导航与ListView使用 | Stars-One的杂货小窝
注: 本文基于Fluter1.2版本,只讲解了Dio的get请求,之后再看看有没有时间补充一波详细的使用和例子吧,本篇代码保存在github
Dio介绍
dio是一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...
实现过程
1.get请求数据
这里,我们使用最为简单的get请求方式来获取数据,接口的话我们使用郭霖大佬提供的API接口http://guolin.tech/api/china,我们可以使用浏览器直接访问,来看看获取的数据,如下图所示
返回的数据是各大城市的相关数据,待会我们可以使用列表把城市名显示出来即可
请求接口的代码如下
void getCityData() async { Response response; var dio = Dio(); response = await dio.get('http://guolin.tech/api/china'); print(response.data.toString()); }
因为这里是数据是从接口获取的,数据为动态的,这里我们的页面得使用StatefulWidget,则是在State类初始化
initState方法的时候调用接口
代码跑起来,进到页面,发现报错了😕 错误如下所示:
百度一看,是因为Android高版本不支持http协议的缘故,所以,按照之前的老套路,加个xml配置,调整即可,具体可参考Android 9 网络请求失败 | Stars-One的杂货小窝
按照上面的步骤配置后,再来试下(注意需要停止APP后重新进行编译,然后再点debug或run的图标,使用热重载是不会起作用的)
ok,成功调通,数据已经打印出来了:happy:
2.实体类创建
之前我们Android开发的时候,使用的是Gson解析json字符串,将json字符串转为对应的实体类,好方便我们取值,这里,flutter同样也是
这里推荐使用个插件
JsonToDart进行实体类的生成,插件地址
安装好插件后,我们要使用的话,可以右键,然后悬着具体菜单即可新建即可,这里我是建了个
model文件夹,右键
model文件夹,
New -> Json To Dart
把json字符串输入进去,输入类名,之后点击
Generate即可生成一个dart的实体类文件
以往Android开发中我们是使用Gson等框架,把json字符串转为实体类
而在flutter中,由于其内置有Json类型的数据,所以不必要再引入其他框架,使用
jsonDecode方法即可
小提示:如果直接复制,
jsonDecode可能会报错,因为还没有导入,可以光标选择jsonDecode,按下alt+enter,选择import开头的那个菜单即可自动导入
我们稍微改下代码,如下:
void getCityData() async { Response response; var dio = Dio(); response = await dio.get('http://guolin.tech/api/china',options: Options(responseType: ResponseType.plain)); var list = jsonDecode(response.data); var cityList = list.map((m) => new CityModel.fromJson(m)).toList(); print(cityList); }
这里我们可以看到代码的第五行,传了个options参数,options是为了设置返回的类型数据,如果没有这个的话,Dio会自动将返回的数据转为Json类型的对象
但是由于现在接口返回的一个Json数组的字符串,导致无法解析成功(平常接口都是一个json的字符串,郭霖大佬写得..😅 )
所以得采用此方法进行解析,之后将数据转为List类型,里面的每个数据都是实体类
3.列表展示
展示就比较简单了,我们使用ListView即可,不过,需要注意的是,得提前在State类中定义好一个List数组
接口请求到数据之后,更新此List数组里的数据即可达到更改UI的操作(注意使用setState()
方法哦😎)
void getCityData() async { var dio = Dio(); Response response = await dio.get('http://guolin.tech/api/china', options: Options(responseType: ResponseType.plain)); var list = jsonDecode(response.data); var cityList = list.map((m) => new CityModel.fromJson(m)).toList(); //注意使用setState方法 setState(() { //this.list是在State类中定义的 this.list.addAll(cityList); }); }
效果图
源码
import 'dart:convert'; import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; import 'package:flutter_demo/model/city_model.dart'; import 'package:webview_flutter/webview_flutter.dart'; import 'MyMaterialPage.dart'; class DioTestPage extends StatefulWidget { @override State<StatefulWidget> createState() { return DioTestState(); } } class DioTestState extends State<DioTestPage> { List list = []; @override Widget build(BuildContext context) { return MyMaterialPage("Dio获取数据及展示", _listView()); } @override void initState() { getCityData(); } void getCityData() async { var dio = Dio(); Response response = await dio.get('http://guolin.tech/api/china', options: Options(responseType: ResponseType.plain)); var list = jsonDecode(response.data); var cityList = list.map((m) => new CityModel.fromJson(m)).toList(); setState(() { this.list.addAll(cityList); }); } Widget _listView() { return new ListView.builder( //listview的子项item数量 itemCount: list.length, //内边距 padding: new EdgeInsets.all(5.0), itemBuilder: (BuildContext context, int index) { //返回每个子项item的widget //城市名 return _listItemView(list[index].name); }, ); } Widget _listItemView(String name) { return Row( children: [ Center( child: Text(name), ), ], ); } }
参考
- 使用Retrofit+RxJava搭建简单的MVP网络请求框架
- Android 网络请求框架android-async-http简单使用
- Android网络请求框架:Android-async-http简单使用
- android开发——volley网络请求框架的简单使用
- 网络请求框架 okhttp 简单的使用总结(一)
- Android最火的获得网络请求框架Retrofit的简单GET、POST请求使用
- Android中Http网络请求库框架Volley和Asnyc-http的使用---第三方库学习笔记(一)
- android Volley请求框架的简单使用——访问网络和加载图片
- Retrofit网络请求框架的简单使用
- Flutter实战之Dio网络库的简单使用
- iOS网络请求第三方框架:MKNetworkKit介绍及简单使用
- 网络请求----简单框架使用------(百度图片下载实例)
- okhttp网络请求框架的简单使用
- 详解flutter之网络请求dio,请求,拦截器简单示例
- Android中Http网络请求库框架Volley和Asnyc-http的使用---第三方库学习笔记(一)
- IOS学习之 网络编程(10)--简单介绍ASI框架的使用
- Android网络请求框架:Volley简单使用
- flutter实用系列(五)之网络请求dio,请求,拦截器简单示例
- Android 网络通信框架Volley的简单使用
- iOS 对基于AFNetworking框架网络请求的简单封装