Использование 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 мы можем эффективно управлять асинхронными операциями и дожидаться выполнения всех промисов, прежде чем продолжать выполнение кода. Это особенно полезно в случаях, когда вам необходимо обрабатывать данные из разных источников или выполнять одновременно несколько асинхронных операций.

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

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

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

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

jQuery.Maskedinput js - документация на русском с примерами

Маска для ввода телефона +7(___)___-__-__

Отключить автозаполнение input

Настройка Webpack - несколько точек входа и разделение на чанки

Универсальная форма обратной связи — feedBackForm

Слайдер Slick slider в контенте ресурса

Как сделать переменную не реактивной в Vue

Bxslider отображение картинок после полной загрузки слайдера

Как обработать POST данные в PHP

Примеры использования Vuex

Выполнить код после асинхронного запроса axios во Vue

Заготовки JavaScript

Как вызвать метод из другого компонента Vue

Связать значения инпутов через jQuery (биндинг)

Рекурсивно вложенный компонент Vue

Настроить Axios чтобы принимал только JSON

Использование async/await в JavaScript с Vue.js

Js-beautify - библиотека для форматирования HTML, CSS, JS

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

Создание цикла асинхронных вызовов во Vue.js

Манипуляция с HTML во Vue.js и cash-dom

Наш сайт использует куки, нажмите «ОК» если вы не против
OK