Использование Promise.all с примерами на VueJs

В этом руководстве мы рассмотрим, как использовать Promise.all в JavaScript. Мы начнем с базовых примеров на чистом JavaScript, а затем перейдем к более сложным примерам с использованием Vue.js.

Что такое Promise.all?

Promise.all — это метод, который принимает массив промисов (обещаний) и возвращает новый промис, который выполняется, когда все переданные промисы успешно завершены. Если хотя бы один из промисов завершается с ошибкой, новый промис также завершается с ошибкой.

Пример с чистым JavaScript

Давайте рассмотрим пример использования Promise.all на чистом JavaScript:

// Функция, которая возвращает промис
function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId > 0) {
        resolve(`Пользователь с ID ${userId}`);
      } else {
        reject('Ошибка: неверный ID пользователя');
      }
    }, 1000);
  });
}

// Использование Promise.all
Promise.all([
  fetchUserData(1),
  fetchUserData(2),
  fetchUserData(3)
])
  .then((results) => {
    console.log('Результаты:', results);
  })
  .catch((error) => {
    console.error('Ошибка:', error);
  });

В этом примере мы имеем функцию fetchUserData, которая возвращает промис. Мы передаем массив промисов, созданных с помощью этой функции, в Promise.all. Если все промисы успешно выполняются, результаты будут доступны в массиве results.

Пример с Vue.js

Теперь рассмотрим пример с использованием Vue.js. Допустим, у нас есть компонент Vue, который получает данные о пользователях из нескольких источников. Мы можем использовать Promise.all для того, чтобы дождаться получения всех данных перед тем, как отобразить их на странице.

<template>
  <div>
    <h1>Список пользователей</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    try {
      // Получение данных о пользователях из разных источников
      const [usersFromSourceA, usersFromSourceB] = await Promise.all([
        this.fetchUsersFromSourceA(),
        this.fetchUsersFromSourceB()
      ]);

      // Объединение данных о пользователях из обоих источников
      this.users = [...usersFromSourceA, ...usersFromSourceB];
    } catch (error) {
      console.error('Ошибка:', error);
    }
  },
  methods: {
    // Функции для получения данных о пользователях из разных источников
    fetchUsersFromSourceA() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([
            { id: 1, name: 'Анна' },
            { id: 2, name: 'Иван' }
          ]);
        }, 1000);
      });
    },
    fetchUsersFromSourceB() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([
            { id: 3, name: 'Мария' },
            { id: 4, name: 'Сергей' }
          ]);
        }, 1000);
      });
    }
  }
};
</script>

В этом примере у нас есть компонент Vue с двумя функциями fetchUsersFromSourceA и fetchUsersFromSourceB, которые возвращают промисы с данными о пользователях из разных источников. Мы используем Promise.all для ожидания выполнения обоих промисов, и после того, как они успешно завершены, мы объединяем полученные данные и сохраняем их в переменной users.

Таким образом, с помощью Promise.all мы можем эффективно управлять асинхронными операциями и дожидаться выполнения всех промисов, прежде чем продолжать выполнение кода. Это особенно полезно в случаях, когда вам необходимо обрабатывать данные из разных источников или выполнять одновременно несколько асинхронных операций.

Использование Promise.all с примерами на VueJs

Что такое Promise.all?

Пример с чистым JavaScript

Пример с Vue.js

Статьи по теме JS Promise

Комментарии (0)

Не писать ответ

Похожие статьи