Flutter 学习之路 -- 异步任务

Flutter 学习之路 - 异步任务

实验 Flutter 的异步任务 --- 代码Github地址

Fultter 异步任务试验

Flutter 在不少地方须要用到异步的任务，例如，加载网络数据，任务延迟执行等，因此异步任务是不可避免的问题。本次试验主要试验了下面几种状况：

• 用 Future, then 实现任务延迟执行
• 用 async 和 await 实现任务延迟执行
• 测试调用 async 方法时，代码的执行顺序问题

代码地址

用 Future, then 实现任务延迟执行

Future 能够用来执行将来要执行的方法，例以下面代码，先输出 ”Started“, 调用 Future 之后过了一秒钟，再输出 ”Completed Task1“。

void thenCatch(){ mytext="Started"; setMyTextState(mytext); // then 用来讲明 1 second 后作什么 Future.delayed(Duration(seconds: 1)).then((_){ // 当运行完成 mytext = mytext + "\n" + "Completed Task1"; setMyTextState(mytext); }).catchError((e){ // 当运行失败 mytext=mytext+"\n"+'failed: ${e.toString()}'; setMyTextState(mytext); }); } void thenCatch(){ mytext="Started"; setMyTextState(mytext); // then 用来讲明 1 second 后作什么 Future.delayed(Duration(seconds: 1)).then((_){ // 当运行完成 mytext = mytext + "\n" + "Completed Task1"; setMyTextState(mytext); }).catchError((e){ // 当运行失败 mytext=mytext+"\n"+'failed: ${e.toString()}'; setMyTextState(mytext); }); }

用 async 和 await 实现任务延迟执行

await 也是 Flutter 中很好的一种执行异步任务的方法。

可是要使用await，必须在有async标记的函数中运行，不然这个await会报错。

下面是一个加了 await 的方法，它的输出是怎么样呢?

Future<void> asyncAwait() async{ mytext="Started"; setMyTextState(mytext); try{ // 这里没有 .then, 要加 await, await 是说在 await 完成前别往下执行 await Future.delayed(Duration(seconds: 1)); mytext=mytext+"\n"+"Completed Task1"; setMyTextState(mytext); await Future.delayed(Duration(seconds: 1)); mytext=mytext+"\n"+"Completed Task2"; setMyTextState(mytext); }catch(e){ print('failed: ${e.toString()}'); } } Future<void> asyncAwait() async{ mytext="Started"; setMyTextState(mytext); try{ // 这里没有 .then, 要加 await, await 是说在 await 完成前别往下执行 await Future.delayed(Duration(seconds: 1)); mytext=mytext+"\n"+"Completed Task1"; setMyTextState(mytext); await Future.delayed(Duration(seconds: 1)); mytext=mytext+"\n"+"Completed Task2"; setMyTextState(mytext); }catch(e){ print('failed: ${e.toString()}'); } }

答案是：

Started --- 1 second --- Completed Task1 --- 2 second --- Completed Task2 Started --- 1 second --- Completed Task1 --- 2 second --- Completed Task2

先输出 ”Start“, 而后过一秒，输出 ”Completed Task1“ 再过一秒输出 ”Completed Task2“ 。

若是把方法里的 await 去掉，看看会发生什么呢，结果是，Task1 和 Task2不会等待Future.delayed 完成，会直接执行。

Started Completed Task1 Completed Task2 --- 1 second --- Started Completed Task1 Completed Task2 --- 1 second ---

测试调用 async 方法时，代码的执行顺序问题

那若是说，代码依次是 Task1, Task2, Task3, Task4, Task2 是一个异步的方法，Task3 , Task4 须要等待 Task2 完成吗？

代码以下：

Future<void> asyncAwaitWithTask() async{ mytext="Started"; setMyTextState(mytext); try{ // 这里没有 .then, 要加 await, await 是说在 await 完成前别往下执行 await Future.delayed(Duration(seconds: 1)); mytext=mytext+"\n"+"Completed Task1"; setMyTextState(mytext); task2(); mytext=mytext+"\n"+"Completed Task3"; setMyTextState(mytext); mytext=mytext+"\n"+"Completed Task4"; setMyTextState(mytext); }catch(e){ print('failed: ${e.toString()}'); } } void task2() async{ await Future.delayed(Duration(seconds: 1)); mytext=mytext+"\n"+"Completed Task2"; setMyTextState(mytext); } Future<void> asyncAwaitWithTask() async{ mytext="Started"; setMyTextState(mytext); try{ // 这里没有 .then, 要加 await, await 是说在 await 完成前别往下执行 await Future.delayed(Duration(seconds: 1)); mytext=mytext+"\n"+"Completed Task1"; setMyTextState(mytext); task2(); mytext=mytext+"\n"+"Completed Task3"; setMyTextState(mytext); mytext=mytext+"\n"+"Completed Task4"; setMyTextState(mytext); }catch(e){ print('failed: ${e.toString()}'); } } void task2() async{ await Future.delayed(Duration(seconds: 1)); mytext=mytext+"\n"+"Completed Task2"; setMyTextState(mytext); }

答案是, Task3, Task4 会先于 Task2 执行，最前面的 GIF 图就是在运行的这个场景。

Started --- 1 second --- Completed Task1 Completed Task3 Completed Task4 --- 2 second --- Completed Task2 Started --- 1 second --- Completed Task1 Completed Task3 Completed Task4 --- 2 second --- Completed Task2

Flutter 学习之路 Github 地址

github.com/draftbk/flu…