2021_02_02_http_request_yaml
然后在要使用http库的文件里面引入头文件
import 'package:http/http.dart' as http;
发送http请求的代码也比较简单，我们这里以get请求为例
http.get("https://cdn.jsdelivr.net/gh/johnson8888/blog_pages/images/request_demo_test.json");
只要传入要请求的地址即可，这里的URL地址是我自己上传的测试文件。
http 异步请求返回结果
前面我知道http库发送请求是支持异步的，那么异步请求的返回结果我们该如何接收呢？
- 通过
then函数获取，在get请求之后我们可以直接跟上then函数来作为回调，在回调内部可以获取到请求的结果
http.get(getURL).then((value) {
print(value);
});
这样写确实很方便，但当我们的网络请求很多，并且一个网络请求依赖另外一个网络请求的时候，这个时候就会多个回调函数嵌套在一起(又称为回调地狱)，代码就会显得很凌乱，很不适合Debug。
- 使用
await来接收异步操作的结果
var data = await http.get(getURL);
这样写代码就比上面的代码清爽多了
但是需要注意的是，如果函数内部有被await修饰的方法，那么函数应该被async来修饰，并且返回值需要被Future修饰，Future是一个延时计算的对象，在被await修饰的函数返回的时候才能拿到Future的具体值。
示例入下：
Future<Map> getData() async {
var data = await http.get(getURL);
return data.body;
}
刷新页面
我们前面已经知道：调用setState()函数可以刷新页面，所以在http请求之后我们调用setState()函数即可刷新页面
http.get(getURL).then((value) {
print(value);
var data = jsonDecode(data.body);
setState(() {
/// 此处执行刷新页面的代码
});
});
使用FutureBuilder来刷新页面
setState()固然是可以刷新页面，但是当我们页面内有多个网络请求的时候，就会不停的调用setState()来全量刷新页面，显然这就有点冗余。
Flutter为我们提供了更好的方式来实现获取数据并且刷新UI的操作，那就是FutureBuilder
来看它的初始化方法
const FutureBuilder({
/// key
Key key,
/// 异步的操作
this.future,
/// 初始化数据
this.initialData,
/// 构建UI的函数
@required this.builder,
})
由构造函数可见，我们需要传入future参数，也就是我们的耗时操作函数，还需要传入builder函数
在builder方法里可以捕捉到两个参数BuildContext context和AsyncSnapshot snap
其中snap的属性会携带future的耗时函数的返回值，也就是说：在耗时操作函数返回结果之后，我们可以在builder方法内获取到这一返回值。
所以上面的请求我们也可以这么来实现:
FutureBuilder(
future: getData(),
builder: (BuildContext context, AsyncSnapshot snap) {
/// 如果没有数据 我们就显示loading页面
if (snap.hasData == false) {
return CircularProgressIndicator();
} else {
/// 如果获取到了数据 我们就初始化一个 ListView来展示获取到的数据
var dataSource = snap.data["tracks"];
return ListView.builder(
itemCount: dataSource.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(dataSource[index]["title"]),
subtitle: Text(dataSource[index]["cover"]),
);
},
);
}
},
),
在获取到数据之后，我们通过ListView.builder来构建一个ListView并返回，此时就完成了刷新UI的工作
我这里写的比较简单，只是用hasData来做为判断的依据
其实还有更优雅的做法：使用snap的另一个属性connectionState
enum ConnectionState {
/// 没有异步任务，
none,
/// 异步任务正在等待
waiting,
/// 异步任务正在执行 或者 数据正在传输
active,
/// 异步任务已经终止.
done,
}
我们也可以在connectionState是done的时候在来判断是否存在数据
如果存在就展示数据！
想体验以上的示例的运行效果，可以到我的Github仓库项目flutter_app->lib->routes->http_page.dart查看，并且可以下载下来运行并体验。
