[Flutter] 异步操作和 HTTP 请求

async 和 await

Dart 语言支持函数进行异步操作的处理，使用 async 和 await。
第一步将函数标记为 aynsc

Future<void> getData async {
    // 发起异步操作
}
``
第二步在函数体内进行异步请求，可以等待任务返回前阻塞当前线程

Future<void> getData async {
    await Future.dealy(Duration(seconds: 2), () {
           print("打印111"):
    });
    print("打印 222")
}

因为使用了 await 操作，所以异步请求会先完成打印 111 后再执行打印 222，否则会先打印 222 再打印 111。

Future

在 Future 的任务闭包中，可以选择返回值，这样可以在 await 时获取到闭包任务的返回值

String ret = await Future.dealy(Duration(seconds: 2), () {
           return "打印111";
    });
 print(ret);

注意点

不要在 initState 等生命周期函数中使用 async 和 await 因为会阻塞渲染的线程，而应该单独写一个方法进行异步执行后调用 setState 进行数据界面的刷新。

void requestData async () {
    var result = await WebService.request((response){
        return respone.data;
    });
    setState(() {
        this.data = result;
    });
}

HTTP 请求

在 pub.flutter-io 中搜索 http，可以找到一个名为 http 库，将其添加在 pubspec.yaml 中并执行 pub get 可以将其依赖到工程中。
定义一个请求函数

// 在文件中引入依赖
import 'package:http/http.dart';

// 定义请求数据的函数
Future<Void> requestData() async {
    Response resp = await get("https://example.com/api");
    print(resp)
}

一般返回数据是 json 格式，需要引入 json decoder 进行解析

// 引入 Dart 自带的 decoder
import 'dart:converter';

// 对请求结果的 body 进行解析
Map data = jsonDecode(resp.body);

注意请求函数是会抛出异常的，因此需要进行必要的 try-catch 处理。

try {
  Response resp = get("xxxxx");
  Map data = jsonDecode(resp.body);
  this.text = data['text'];
} catch (exception) {
    this.text = 'failed';
}