Как оптимизировать асинхронные операции в Flutter с помощью Future.wait и Back4app

7min
Введение
Асинхронное программирование имеет важное значение в современном разработке приложений, особенно при работе с задачами, такими как получение данных из нескольких источников или выполнение нескольких сетевых запросов. Однако эффективное управление несколькими асинхронными вызовами может быть сложной задачей. В Flutter метод Future.wait предоставляет мощный способ управления несколькими Futures, позволяя вашему приложению ожидать несколько асинхронных операций одновременно и эффективно.
В этом учебном пособии вы узнаете, как использовать Future.wait в Flutter для оптимизации производительности вашего приложения при работе с несколькими асинхронными задачами. Мы интегрируем эту технику с Back4app, где вы можете выполнять параллельные запросы данных из вашего бэкенда, хранить результаты и значительно сократить время ожидания для ваших пользователей.
Предварительные требования
Чтобы завершить это учебное пособие, вам потребуется:
Учетная запись Back4app. Зарегистрируйтесь для получения бесплатной учетной записи на Back4app.com.
Настроенная среда разработки Flutter на вашем локальном компьютере. Следуйте руководству по установке Flutter если вы еще не настроили ее.
Базовые знания асинхронного программирования в Flutter и как использовать Back4app в качестве сервиса бэкенда. Если вы новичок в Back4app, ознакомьтесь с руководством по началу работы с Back4app.
Шаг 1 – Настройка вашего Back4app бэкенда
Создайте проект Back4app: Войдите в ваш аккаунт Back4app и создайте новый проект.
Создайте классы Parse: В вашем проекте Back4app создайте два новых класса Parse с именами Task и Project.
Класс Task должен иметь поля: name (String) и completed (Boolean).
Класс Project должен иметь поля: title (String) и description (String).
Добавьте образцы данных: Заполните эти классы образцами данных, которые мы будем извлекать одновременно с помощью Future.wait в нашем приложении Flutter.
Получите свои учетные данные Back4app: Перейдите в настройки вашего проекта, чтобы получить ваш Application ID и Client Key, которые вам понадобятся для подключения вашего приложения Flutter к Back4app.
Шаг 2 – Настройка вашего проекта Flutter
Создайте новый проект Flutter: Откройте ваш терминал или командную строку и выполните:
Добавьте зависимости: Откройте pubspec.yaml и добавьте следующие зависимости:
Инициализируйте Parse в вашем приложении: В lib/main.dart, импортируйте SDK Parse и инициализируйте его в функции main:
Text
Text
 const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
 const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
 const keyParseServerUrl = 'https://parseapi.back4app.com';

 await Parse().initialize(keyApplicationId, keyParseServerUrl,
     clientKey: keyClientKey, autoSendSessionId: true);

 runApp(MyApp());
 const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
 const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
 const keyParseServerUrl = 'https://parseapi.back4app.com';

 await Parse().initialize(keyApplicationId, keyParseServerUrl,
     clientKey: keyClientKey, autoSendSessionId: true);

 runApp(MyApp());
﻿
Замените 'YOUR_BACK4APP_APP_ID' и 'YOUR_BACK4APP_CLIENT_KEY' на ваши фактические учетные данные Back4app.
Шаг 3 – Получение данных одновременно с помощью Future.wait
Создайте виджет TaskProjectScreen: В lib/main.dart, добавьте новый виджет, который будет одновременно получать данные из классов Task и Project:
Dart
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

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

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
class TaskProjectScreen extends StatefulWidget {
  @override
  _TaskProjectScreenState createState() => _TaskProjectScreenState();
}

class _TaskProjectScreenState extends State<TaskProjectScreen> {
  List<ParseObject>? tasks;
  List<ParseObject>? projects;
  String? errorMessage;

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

  Future<void> fetchData() async {
    try {
      // Fetch tasks and projects concurrently
      final futures = [
        _getTasks(),
        _getProjects(),
      ];

      final results = await Future.wait(futures);

      setState(() {
        tasks = results[0] as List<ParseObject>;
        projects = results[1] as List<ParseObject>;
      });
    } catch (e) {
      setState(() {
        errorMessage = e.toString();
      });
    }
  }

  Future<List<ParseObject>> _getTasks() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Task'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load tasks');
    }
  }

  Future<List<ParseObject>> _getProjects() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Project'));
    final response = await query.query();

    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load projects');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (errorMessage != null) {
      return Center(child: Text('Error: $errorMessage'));
    }

    if (tasks == null || projects == null) {
      return Center(child: CircularProgressIndicator());
    }

    return ListView(
      children: [
        ListTile(title: Text('Tasks')),
        ...tasks!.map((task) => ListTile(
              title: Text(task.get<String>('name') ?? 'No name'),
              subtitle: Text('Completed: ${task.get<bool>('completed') ? 'Yes' : 'No'}'),
            )),
        ListTile(title: Text('Projects')),
        ...projects!.map((project) => ListTile(
              title: Text(project.get<String>('title') ?? 'No title'),
              subtitle: Text(project.get<String>('description') ?? 'No description'),
            )),
      ],
    );
  }
}
﻿
Этот виджет получает задачи и проекты одновременно с помощью Future.wait, сокращая общее время ожидания, обрабатывая оба запроса одновременно.
Шаг 4 – Тестирование и запуск вашего приложения
Запустите ваше приложение с помощью flutter run.
Вы должны увидеть список задач и проектов, отображаемых на экране. Оба набора данных извлекаются одновременно, что делает процесс получения данных быстрее и эффективнее.
Заключение
В этом учебном пособии вы узнали, как использовать Future.wait для оптимизации асинхронных операций в вашем приложении Flutter. Извлекая данные из нескольких источников одновременно и интегрируясь с Back4app, вы сделали ваше приложение более отзывчивым и сократили общее время ожидания для ваших пользователей.
Использование Future.wait в сочетании с надежным бэкендом, таким как Back4app, позволяет вам эффективно управлять несколькими асинхронными задачами и улучшать производительность ваших приложений Flutter. Для получения дополнительной информации о использовании Back4app с Flutter, ознакомьтесь с документацией Back4app по Flutter. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как использовать Flutter Completers с бэкендом на Back4app
Разработка приложений на JavaScript в реальном времени