面试题：Flutter中异步操作如何与网络请求结合实现数据加载

引入依赖：在pubspec.yaml文件中添加http库依赖：

dependencies:
  http: ^0.13.4

然后运行flutter pub get获取依赖。

创建网络请求函数：

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

Future<List<dynamic>> fetchUserList() async {
  try {
    final response = await http.get(Uri.parse('YOUR_API_URL'));
    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to load user list. Status code: ${response.statusCode}');
    }
  } catch (e) {
    throw Exception('Network error: $e');
  }
}

在上述代码中：

await http.get(Uri.parse('YOUR_API_URL'))发起网络请求，等待响应。
如果响应状态码为200，将响应体解析为JSON格式数据并返回。
否则，抛出带有状态码的异常。
如果在请求过程中捕获到错误，抛出网络错误异常。

在ListView中展示数据：

import 'package:flutter/material.dart';

class UserListView extends StatefulWidget {
  @override
  _UserListViewState createState() => _UserListViewState();
}

class _UserListViewState extends State<UserListView> {
  List<dynamic> userList = [];
  bool isLoading = false;

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

  Future<void> _fetchAndSetUserList() async {
    setState(() {
      isLoading = true;
    });
    try {
      final list = await fetchUserList();
      setState(() {
        userList = list;
        isLoading = false;
      });
    } catch (e) {
      setState(() {
        isLoading = false;
      });
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Error: $e'))
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: isLoading
         ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: userList.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(userList[index]['name']), // 根据实际API返回结构调整
                );
              },
            ),
    );
  }
}

在上述代码中：

_fetchAndSetUserList函数负责调用fetchUserList获取用户列表数据。
在获取数据前设置isLoading为true，显示加载指示器。
如果获取数据成功，更新userList并设置isLoading为false。
如果出现错误，隐藏加载指示器并通过SnackBar显示错误信息。
在build方法中，根据isLoading的值决定显示加载指示器还是用户列表。

星途面试题库

面试题：Flutter中异步操作如何与网络请求结合实现数据加载

知识考点

面试题答案