Flutter如何优雅的请求网络数据？

2024-02-14 12:34:08

在Flutter中，网络请求是一种非常常见的操作。当我们开发一个移动应用时，往往需要从服务器端获取数据，然后在应用中展示出来。那么，如何在Flutter中优雅地请求网络数据呢？

1. 使用Future和Stream进行异步编程

Flutter中，我们可以使用Future和Stream来进行异步编程。Future是一个表示潜在值的异步操作，它可以是成功的值，也可以是失败的错误。Stream是一个异步事件序列，它可以不断地发出事件，而这些事件可以被监听者接收。

在Flutter中，我们可以使用Future来发送网络请求，然后监听Future的状态，以确定网络请求是否成功。如果网络请求成功，则我们可以从Future中获取到服务器端返回的数据。如果网络请求失败，则我们可以从Future中获取到错误信息。

2. 使用通用异常处理

在Flutter中，我们可以使用通用异常处理来处理网络请求过程中可能出现的异常。通用异常处理可以让我们在代码中捕获异常，然后对异常进行处理，从而避免程序崩溃。

3. 请求资源状态可见

在Flutter中，我们可以使用请求资源状态可见（加载成功、加载中、加载失败）来让用户知道网络请求的状态。当网络请求正在进行时，我们可以显示一个加载中的指示器。当网络请求成功时，我们可以隐藏加载中的指示器，然后展示服务器端返回的数据。当网络请求失败时，我们可以显示一个错误信息。

4. 实例案例

下面是一个Flutter网络请求的实例案例：

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

class NetworkRequestPage extends StatefulWidget {
  @override
  _NetworkRequestPageState createState() => _NetworkRequestPageState();
}

class _NetworkRequestPageState extends State<NetworkRequestPage> {
  // 网络请求状态
  RequestStatus _requestStatus = RequestStatus.initial;

  // 服务器端返回的数据
  String _data;

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

    // 发送网络请求
    _fetchUserData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Request'),
      ),
      body: Center(
        child: _buildBody(),
      ),
    );
  }

  Widget _buildBody() {
    switch (_requestStatus) {
      case RequestStatus.initial:
        return Text('Loading...');
      case RequestStatus.loading:
        return CircularProgressIndicator();
      case RequestStatus.success:
        return Text(_data);
      case RequestStatus.error:
        return Text('Error');
    }
  }

  // 发送网络请求
  Future<void> _fetchUserData() async {
    setState(() {
      _requestStatus = RequestStatus.loading;
    });

    try {
      // 发送网络请求
      final response = await http.get('https://jsonplaceholder.typicode.com/users/1');

      // 如果网络请求成功
      if (response.statusCode == 200) {
        setState(() {
          _requestStatus = RequestStatus.success;
          _data = response.body;
        });
      } else {
        // 如果网络请求失败
        setState(() {
          _requestStatus = RequestStatus.error;
        });
      }
    } catch (e) {
      // 如果网络请求发生异常
      setState(() {
        _requestStatus = RequestStatus.error;
      });
    }
  }
}

enum RequestStatus {
  initial,
  loading,
  success,
  error,
}