Что такое Promise.all
Promise.all() — это статический метод, который принимает массив (группу) обещаний в качестве входных данных и выполняет процесс как одно обещание и возвращает в than-able или catch.
Основной синтаксис Promise.all следующий
Promise.all([promise1, promise2,.....])
.then(result=>{
//Congrats! Promise got resolved.
}).catch(err=>{
//Ohh ! Promise got rejected.
})
где promise1, promise2 — асинхронные функции, которые также возвращают обещание.
Когда использовать метод Promise.all
Когда у вас есть группа асинхронных задач, которые нужно обработать за один раз, рекомендуется использовать Promise.all().
Для наглядности рассмотрим пример асинхронных функций, которые решаются функцией Promise.all().
const p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('p1 completed');
},1000);
})
const p2 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('p2 completed');
},2000);
})
const p3 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('p3 completed');
},3000);
})
Promise.all([p1,p2,p3,])
.then(result=>{
console.log(result);
}).catch(err=>{
console.log(err);
})
Результат, полученный из приведенного выше фрагмента кода
[ 'p1 completed', 'p2 completed', 'p3 completed' ]
В приведенном выше примере видно, что p1, p2 и p3 являются асинхронными функциями, поскольку в качестве функции используется setTimeout, поэтому каждая функция будет разрешена соответственно через 1, 2 и 3 секунды, но Promise.all будет разрешен, как только будет разрешена последняя функция, в этом и заключается красота метода Promise.all().
Основное свойство метода Promise.all() заключается в том, что он разрешает все функции и возвращает результат в том же порядке, в котором мы задали массив входных функций.
Если все функции массива (p1,p2,p3) будут разрешены, то только он выдаст результат в таком порядке.
В противном случае, если какая-либо из функций Promise будет отвергнута по какой-либо причине, то метод Promise.all() перейдет в блок catch(). Вы можете увидеть следующий пример для этого сценария.
const p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('p1 completed');
},1000);
})
const p2 = new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('p2 completed');
},2000);
})
const p3 = new Promise((resolve,reject)=>{
setTimeout(()=>{
reject(new Error('p3 rejected'));
},3000);
})
Promise.all([p1,p2,p3,])
.then(result=>{
console.log(result);
}).catch(err=>{
console.log(err);
})
Этот фрагмент кода будет находиться в блоке catch
Error: p3 rejected
Теперь посмотрим на реальный пример Promise.all().
Предположим, у вас есть приборная панель, где вам нужно вызвать 3 API.
До тех пор, пока апи не будет вызван, вы должны показывать загрузчик на экране. Этого можно легко добиться, используя метод Promise.all().
Пожалуйста, ознакомьтесь с приведенным ниже примером
const axios = require('axios');
const task = async (id)=>{
const response = await axios(`https://reqres.in/api/users/${id}`);
const {data} = response;
return data.data;
}
const ids = [1,2,3];
const allTasks = ids.map((pageNumber)=>{
return task(pageNumber);
});
// you can start page loader here
Promise.all(allTasks)
.then((result)=>{
console.log(result);
// once the task is finished then you stop loader over here
}).catch((err)=>{
//If error comes then also you have to stop loader
console.log(err);
})
В приведенном выше примере я создал функцию под названием ‘task’, которая является асинхронной функцией, вызывающей api.
Нам нужно вызвать 3 api для UserID 1, 2 и 3, поэтому мы сгруппировали 3 вызова api в один массив (allTasks) и передали массив в Promise.all(allTasks) в качестве входа и ожидаем разрешения или отказа.
Если все api выполняются успешно, то мы ожидаем результат в формате массива (ответ пользователей).
Если какой-либо из api будет отклонен, то мы должны ожидать ошибку в блоке catch.
Спасибо, ребята, что прочитали мою небольшую статью.
Пожалуйста, ставьте лайк и комментируйте статью, если она вам действительно понравилась.