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<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测试结果:
封闭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)