Flutter防止网络造成阻塞

网络的阻塞，不仅影响用户体验，还会影响应用的稳定性。因为Flutter是单线程的，所以在大量的网络请求导致整个线程阻塞，也不是不可能。如何避免网络造成阻塞，也是本期优化重要的话题。

异步

请求的异步，不仅包含异步发起网络请求(Future)，还有异步渲染UI。异步发起网络请求很简单，就是在函数中使用async/await关键字，异步执行请求，带异步执行完成后再渲染UI。使用现代化的请求工具类如DIO，当你发起请求时，会得到一个异步Future对象，当请求完成时，会回调一个回调函数，在回调函数中，你可以渲染UI。

import 'package:dio/dio.dart';

final dio = Dio();

void getHttp() async {
  final response = await dio.get('https://dart.dev');
  print(response);
}

可是，异步请求并不能100%保证UI渲染不会受到影响，所以在考虑网络异步的同时，还要考虑组件的异步渲染，所以Flutter早就想到了这个问题，使用FutureBuilder组件，当Future对象完成时，FutureBuilder会回调一个回调函数，在回调函数中，你可以渲染UI，他会告诉你Future执行时的结果，以及是否发生错误。我们在组件，FutureBuilder一篇中，进行详细讲解。

StatefulWidget中的进一步优化

有时候，你不得不避免在组件中发起网络请求，那么，如何优化呢？StatefulWidget组件中一般触发请求的生命周期在initState()中，所以，你可以在initState()中发起请求，也吧请求放在Future中执行，简单来说就是按照下面的示例修改代码：

class _MyWidgetState extends State<MyWidget> {
  @override
  void initState() async {
    await getArticle();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }

  Future<void> getArticle() async {}
}

将代码修改为

@override
void initState() {
  Future(()async{
    await getArticle();
  });
  super.initState();
}

不费吹灰之力，你的页面将在路由激活组件时，流畅过度，而不因为请求执行导致掉帧。
接下来一篇文章，我们要讲解适时取消请求，这将避免很大一部分的无效请求造成阻塞。