摘要:集成了使用起来极其简洁的请求对象,参考官方资料,今天就找个调试工具来试试请求,如果想了解更丰富的信息,请参考官方,列表在页面的右边。
Flutter集成了使用起来极其简洁的HTTP请求对象,参考官方资料,今天就找个调试工具来试试HTTP请求,如果想了解更丰富的信息,请参考官方API dart:io,API列表在页面的右边。
第一步到免费开放http请求API的网站,如聚合数据查询天气,注册一个账号,然后申请这个免费的接口,当然你也可以申请别的免费API,比如我就申请了俩免费接口:
打开VScode,到终端找一个存放项目代码的目录,输入命令:
flutter create myhttptest
项目文件夹初始化完毕后,用VScode打开项目文件夹->打开main.dart,然后用以下代码覆盖初始化的代码:
import "dart:convert"; //集成了支持json、utf-8等数据格式的编码和解码器 import "dart:io"; //集成了File, socket, HTTP等服务应用的IO库 import "package:flutter/material.dart"; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State{ var _ipAddress = "Unknown"; //为啥要定义这个变量呢?为了后面只需要写一次setState() //异步执行用到async关键字 _getIPAddress() async { /*接口url地址,包含了请求地址http://op.juhe.cn/onebox/weather/query和两个参数cityname、AppKey*/ var url = "http://op.juhe.cn/onebox/weather/query?cityname=上海&key=[替换成你的AppKey]"; var httpClient = new HttpClient(); String result; //如同JAVA一样的语法: try { var request = await httpClient.postUrl(Uri.parse(url)); /*也可以使用httpClient.getUrl,注意根据接口要求改变两种请求方式的参数格式*/ var response = await request.close(); if (response.statusCode == HttpStatus.OK) { var json = await response.transform(UTF8.decoder).join(); var data = JSON.decode(json); result = data["result"]["data"]["realtime"].toString(); //多维数组,请根据自己请求接口的结果对json数据结构进行拆解 } else { result = "Error get: Http status ${response.statusCode}"; //连接错误提示 } } catch (exception) { result = "Failed getting data"; //代码执行异常,抛出错误信息 } //如果当前控件已经被注销掉,则当前控件内置状态为mounted。 /*由于是前面的HTTP异步请求,如果网络卡住,而当前控件因为其他原因注销掉了, 此时不必调让代码走到后面的setState()方法,否则会报错,所以这里直接return,避免报错。*/ if (!mounted) return; setState(() { _ipAddress = result; //显示请求结果 }); } @override Widget build(BuildContext context) { var spacer = new SizedBox(height: 32.0); return new Scaffold( body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: [ new RaisedButton( onPressed: _getIPAddress, child: new Text("获取天气预报"), ), new Text("$_ipAddress."), spacer, ], ), ), ); } }
注意看上面代码中的注释,用到了mounted,参考API,意思是如果state对象实例创建后在执行initState动作前,会关联上BuildContext对象(对本篇内容好像没什么用),此时内置状态mounted标记为true,如果state对象实例执行了dispose动作,此时mounted=false,意味着此state对象实例已消亡,代码走到setState()方法时就会报错。
第三步手机连接好电脑后,记得打开WIFI或移动网络。
启用VScode的Debug工具,调试代码,如图所示:
相信有过开发经验的小伙伴理解上图应该没有什么难度,请尽情把玩吧,APP测试效果:
关闭WIFI后,请求失败的响应非常快,不会像浏览器卡一下才弹出出错页面,猜测应该是flutter能够从硬件层探测WIFI或移动网络是否启用吧。
可以看到Dart2语法下的HTTP请求代码非常简洁,比起ES5的回调函数用起来方便多了,其外还支持promise,对熟悉ES6语法的同学有福啦,参考官方API:
HttpClient client = new HttpClient(); client.getUrl(Uri.parse("http://www.example.com/")) .then((HttpClientRequest request) { // Optionally set up headers... // Optionally write to the request object... // Then call close. ... return request.close(); }) .then((HttpClientResponse response) { // Process the response. ... });
好啦,今天就介绍到这里,本篇比较简单,嫌太少的同学可以去文中引用的官方网站练练英语,偷个懒,哈哈哈,感谢大家捧场~
flutter 中文社区(官方QQ群:338252156)
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93402.html
摘要:继上一篇关于的介绍,是仿照微信界面,因为作为前端开发,有一定的基础,所有写起来,也不是很吃力。班门弄斧之作,若有大神见到,敬请指教,有不对不合理之处,敬请指出我是迩伶贰环境准备以系统为例。 flutter的入门记录 0.前言: flutter 的入门demo 已经写好一个星期了,只不过一直都没有整理出博客来。收拾好心情,来整理一下。继上一篇关于react-native-wx的介绍,是仿...
阅读 897·2021-10-13 09:48
阅读 3808·2021-09-22 10:53
阅读 3080·2021-08-30 09:41
阅读 1924·2019-08-30 15:55
阅读 2900·2019-08-30 15:55
阅读 1808·2019-08-30 14:11
阅读 2149·2019-08-29 13:44
阅读 740·2019-08-26 12:23