MST

星途 面试题库

面试题:Flutter中Dart语言的异步操作

在Flutter开发中,使用Dart语言时,如何通过async/await关键字实现异步操作?请举例说明如何使用Future来处理异步任务,比如从网络获取数据并更新UI。
41.0万 热度难度
前端开发Flutter

知识考点

AI 面试

面试题答案

一键面试

在Flutter开发中使用Dart语言,通过async/await关键字实现异步操作的方式如下:

  1. async关键字用于标记一个异步函数,该函数会返回一个Future对象。
  2. await关键字只能在标记为async的函数内部使用,它用于暂停当前函数的执行,直到await后的Future完成(resolved)。

以下是使用Future处理异步任务(从网络获取数据并更新UI)的示例:

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

class AsyncExample extends StatefulWidget {
  @override
  _AsyncExampleState createState() => _AsyncExampleState();
}

class _AsyncExampleState extends State<AsyncExample> {
  String _data = '';

  Future<String> fetchData() async {
    final response = await http.get(Uri.parse('https://example.com/api/data'));
    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchData().then((value) {
      setState(() {
        _data = value;
      });
    }).catchError((error) {
      print('Error: $error');
    });
  }

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

在上述示例中:

  1. fetchData函数被标记为async,它内部使用await等待http.get操作完成,http.get返回一个Future<Response>
  2. initState中,调用fetchData,当Future完成时,通过setState更新UI,将获取到的数据显示在Text组件中。如果获取数据过程中出现错误,通过catchError捕获并打印错误信息。