＜大厂实战经验＞ Flutter&鸿蒙next 中使用 initState 和 mounted 处理异步请求的详细解析

✅近期推荐：求职神器

https://bbs.csdn.net/topics/619384540

🔥欢迎大家订阅系列专栏：flutter_鸿蒙next

💬淼学派语录：只有不断的否认自己和肯定自己，才能走出弯曲不平的泥泞路，因为平坦的大路，太tm无趣了！

写在前面

[1. initState 方法概述](#1. initState 方法概述)

示例代码

[2. 使用 mounted 确保安全性](#2. 使用 mounted 确保安全性)

[mounted 的使用场景](#mounted 的使用场景)

[3. 完整示例](#3. 完整示例)

[4. 处理异步请求的最佳实践](#4. 处理异步请求的最佳实践)

[1. 使用 mounted 检查](#1. 使用 mounted 检查)

[2. 处理异常](#2. 处理异常)

[3. 清理资源](#3. 清理资源)

写在最后

写在前面

在 Flutter 开发中，处理异步请求是常见的需求，例如从网络获取数据。理解如何在 initState 中触发异步请求，并在请求完成时使用 setState 更新 UI 是非常重要的。在这篇博客中，我们将深入探讨如何在 initState 中执行异步请求，并安全地使用 mounted 属性确保在适当的时机更新状态。

1. `initState` 方法概述

initState 是一个生命周期方法，当 State 对象被插入到树中时会调用它。这个方法通常用于初始化一些状态，如加载数据、设置定时器等。因为这个方法在构造函数之后立即执行，所以它非常适合进行异步操作的启动。

示例代码

Dart 复制代码

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

class _MyHomePageState extends State<MyHomePage> {
  String _data = "Loading...";
  
  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    // 模拟异步请求
    await Future.delayed(Duration(seconds: 3), () {
      // 假设获取的数据
      _data = "Data Loaded!";
    });
    // 更新 UI
    setState(() {
      // 只有在 mounted 为 true 时才更新 UI
      if (mounted) {
        _data = "Data Loaded!";
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Async Request Example")),
      body: Center(child: Text(_data)),
    );
  }
}

2. 使用 `mounted` 确保安全性

在 Flutter 中，mounted 是一个布尔值属性，指示 State 对象是否仍然在树中。它在 State 对象被插入到树中时为 true，在被从树中移除时为 false。在执行异步请求时，尤其是当请求时间较长时，可能会出现 setState 被调用时对象已被卸载的情况。为了避免这种情况，我们可以通过检查 mounted 来确保我们只在组件仍然存在时更新 UI。

`mounted` 的使用场景

在异步请求的回调中，我们需要检查 mounted 的值，以确定是否可以安全地调用 setState：

Dart 复制代码

if (mounted) {
  setState(() {
    _data = "Data Loaded!";
  });
}

3. 完整示例

下面是一个完整的 Flutter 应用程序示例，它展示了如何在 initState 中进行异步请求，并在请求完成时更新 UI。

Dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 3), () {
      // 假设从网络获取的数据
      _data = "Data Loaded!";
    });
    
    // 更新 UI
    if (mounted) {
      setState(() {
        _data = "Data Loaded!";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Async Request Example")),
      body: Center(
        child: Text(
          _data,
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

4. 处理异步请求的最佳实践

1. 使用 `mounted` 检查

在异步操作完成后，始终检查 mounted。这样可以防止在组件已经被卸载的情况下更新 UI，从而避免潜在的错误。

2. 处理异常

在实际应用中，异步请求可能会失败。确保使用 try-catch 块来捕获异常并妥善处理。

Dart 复制代码

Future<void> fetchData() async {
  try {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 3));
    // 更新数据
    if (mounted) {
      setState(() {
        _data = "Data Loaded!";
      });
    }
  } catch (e) {
    if (mounted) {
      setState(() {
        _data = "Failed to load data";
      });
    }
  }
}

3. 清理资源

如果在 initState 中创建了定时器或其他需要清理的资源，确保在 dispose 方法中进行清理，以防止内存泄漏。

Dart 复制代码

@override
void dispose() {
  // 释放资源
  super.dispose();
}

写在最后

通过使用 initState 和 mounted，你可以安全地处理异步请求并在 Flutter 应用中更新 UI。始终确保在调用 setState 之前检查 mounted 属性，这可以帮助你避免在组件卸载后更新 UI 的问题。通过遵循这些最佳实践，你将能够更有效地管理 Flutter 应用的状态，提升用户体验。希望这篇文章能帮助你更好地理解 Flutter 中的异步处理！