Flutter Future await 的代码演示

24 min read

下面是一个简单的 Flutter 代码演示,展示了如何使用 Future 和 await 从网络请求中获取数据:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _data = "";

  Future<String> fetchData() async {
    var result = await http.get(Uri.parse("https://jsonplaceholder.typicode.com/todos/1"));
    return json.decode(result.body)['title'];
  }

  @override
  void initState() {
    super.initState();
    fetchData().then((value) {
      setState(() {
        _data = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Future & Await Demo"),
      ),
      body: Center(
        child: Text(_data),
      ),
    );
  }
}

在这个例子中,fetchData() 方法使用了 async 和 await 关键字。它发送了一个 GET 请求到 https://jsonplaceholder.typicode.com/todos/1,然后等待从服务器返回响应数据。然后它将响应数据转换成 JSON 格式,然后返回其中的 title 字段。

在 initState() 方法中,我们使用 .then() 方法来处理 fetchData() 返回的 Future。当数据返回时,我们将其设置给 _data 变量并调用 setState() 方法,从而更新 UI。最终,我们在 body 中展示从服务器接收到的数据。