Flutter 零基础入门（三十五）：异步基础 Future / async / await —— 网络请求与延时操作

LarryLan

发布于 2026-03-03 13:00:43

390

异步基础 Future / async / await —— 网络请求与延时操作

到目前为止，你已经可以：

写展示页面
输入与表单交互
页面跳转并传递参数

但是一个真正的 App，绝大多数功能都涉及异步操作：

网络请求（获取列表数据）
延时操作（倒计时、广告页）
文件读写

Flutter 中的异步操作核心是 Future / async / await。

一、什么是 Future？

一句话理解：

Future = 异步操作的结果容器

还没完成 → 等待中
完成 → 成功（返回值）
失败 → 异常

📌 类比：

就像你向朋友借钱，你把 IOU 交给朋友 → 等待他还钱（Future）

二、最简单的 Future 示例

Future<String> fetchData() {
  return Future.delayed(Duration(seconds: 2), () {
    return '网络数据加载完成';
  });
}

Future.delayed 模拟异步延时
2 秒后返回结果

使用方法一：then

fetchData().then((value) {
  print(value); // 网络数据加载完成
});

✅ then 的作用：

等异步完成后回调结果
传统写法

使用方法二：async / await（推荐）

void loadData() async {
  String result = await fetchData();
  print(result);
}

📌 注意：

await 只能在 async 修饰的函数里使用
更直观，更像同步代码

三、异常处理

try {
  String result = await fetchData();
  print(result);
} catch (e) {
  print('加载失败：$e');
}

📌 真实项目必须处理异常，否则 App 崩溃。

四、完整示例：延时操作

class AsyncDemo extends StatefulWidget {
  @override
  _AsyncDemoState createState() => _AsyncDemoState();
}

class _AsyncDemoState extends State<AsyncDemo> {
  String _data = '等待加载...';

  Future<String> fetchData() {
    return Future.delayed(Duration(seconds: 3), () => '异步数据加载完成');
  }

  void loadData() async {
    try {
      String result = await fetchData();
      setState(() {
        _data = result;
      });
    } catch (e) {
      setState(() {
        _data = '加载失败';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('异步示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_data),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: loadData,
              child: Text('加载数据'),
            ),
          ],
        ),
      ),
    );
  }
}

📌 点击按钮后，2~3 秒后显示异步结果 ✅ 这就是 异步更新 UI 的标准模式