flutter笔记6：试玩flutter的HTTP请求和VSco
Flutter集成了使用起来极其简洁的HTTP请求对象，参考官方资料，今天就找个调试工具来试试HTTP请求，如果想了解更丰富的信息，请参考官方API dart:io，API列表在页面的右边。
第一步
到免费开放http请求API的网站，如聚合数据查询天气，注册一个账号，然后申请这个免费的接口，当然你也可以申请别的免费API，比如我就申请了俩免费接口：
免费HTTP接口
第二步
打开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<MyHomePage> {
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:\nHttp 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: <Widget>[
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图解
相信有过开发经验的小伙伴理解上图应该没有什么难度，请尽情把玩吧，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）
