Базовые задачи на Promise в JavaScript

Promise — специальный объект, который хранит своё состояние и используется для обработки результатов асинхронных операций.

Что будет в статье:

• Основные задачи на Promsie, которые часто спрашивают на собеседованиях

• Код задач с подробными комментариями

Чего в статье НЕ будет:

• Теории про Promsie и Event Loop

• Задач на Event Loop, показывающих приоритетность выполнения Promise, setTimeout и т.д.

Статья предназначена для тех, кто уже изучил теорию по Promise и хочет попрактиковаться в решении тестовых задач.

Основные методы Promise

Приведу список методов, которые будут использоваться а задачах:

• "Promise.resolve(value)" — создаёт успешно выполнившийся Promise с результатом value

• "Promise.reject(value)" — создаёт выполнившийся Promise с ошибкой

• ".then" — обработчик событий Promise "onFulfilled" и "onRejected"

• ".catch" — обработчик события Promise "onRejected"

• ".finally" — дает возможность запустить один раз определенный участок кода, который должен выполниться вне зависимости от того, с каким результатом выполнился Promise

Задачи на .then

1. Случаи, когда .then возвращает или не возвращает значение

Promise.resolve("1")     // Promise.resolve вернул "1"     .then(data => {         console.log(data); // => "1"     })      // .then ничего не вернул     .then(data => {         console.log(data); // => "undefined"         return "2";     })      // .then вернул "2"     .then(data => {         console.log(data); // => "2"     })

2. Второй аргумент .then

• Первая задача

Promise.reject(1)     // skip     // обработать reject можно только в .catch     .then(data => {         console.log(data);     })      // второй аргумент .then вместо .catch     .then(null, data => console.log(data)) // => 1      // после обработки ошибки попадаем в .then     // => "ok"     .then(() => console.log('ok'));

• Вторая задача

Promise.reject()     // используем колбэки для .then и для .catch     .then(         data => console.log('ok'),   // => skip         data => console.log('error') // => "error"     )

3. null в .then

Promise.resolve("1")     // skip     .then(null)      // придут данные из Promise.resolve     .then(data => console.log(data)) // => "1"

Задачи на .catch

1. Ошибка из Promise.reject

Promise.reject("Api Error")     // skip из-за Promise.reject     .then(data => console.log('ok'))      // обработка ошибки     .catch(error => {         console.log(error); // => "Api Error"         return "1";     })      // catch вернул "1"     .then(data => {         console.log(data); // => "1"     })

2. Ошибка из Promise.reject в .catch

Promise.reject()     // обработка Promise.reject     .catch(() => {         console.log('error1'); // => "error1"         return Promise.reject();         // аналогично         // return reject();     })      // обработка Promise.reject из предыдущего .catch     .catch(() => {         console.log('error2'); // => "error2"     })

3. Ошибка throw new Error

Promise.resolve()     .then(data => {         // возникновение ошибки         throw new Error('Api Error');         // не имеет значения, что вернули         return 1;     })      // skip, потому что предыдущий .then бросил ошибку     .then(data => console.log('ok'))      // обработка ошибки     .catch(error => {         console.log(error.message); // => "Api Error"         return "2";     })      // .catch вернул "2"     .then(data => {         console.log(data); // => "2"     })

4. Необработанная ошибка в Promise

• Необработанная ошибка в Promise не влияет на работу программы, т.к. Promise не выпускает ошибку за свои пределы.

Promise.resolve()     .then(() => {         throw new Error('Api Error');     })  // код будет работать setTimeout(() => {     console.log('setTimeout'); // => "setTimeout" }, 1000);

5. null в .catch

Promise.reject("Api Error")     // skip: ошибку не обработали     .catch(null)      // skip из-за необработанной ошибки     .then(data => console.log('ok'))      // обработка ошибки     .catch(error => console.log(error)) // => "Api Error"      // .then выполнится     .then(data => console.log('ok')) // => "ok"

Задачи на .finally

• Первая задача

Promise.resolve()     .then(() => {         return "1";     })      // .then вернул "1", но .finally пропустит его мимо себя     .finally(data => {          console.log(data); // => "undefined"         return "2";     })      // из .finally вернули "2", но результат берется из предыдущего .then или .catch     .then(data => console.log(data)) // => "1"

• Вторая задача

Promise.reject()     // .finally выполняется в любом случае: даже при возникновении ошибки     .finally(data => {          console.log('finally'); // => "finally"     })

Задачи на несколько Promise

• Если несколько Promise, то ".then" будет выполняться последовательно для каждого:

Promise.resolve()     .then(() => console.log(1))  // "Первый"     .then(() => console.log(2))  // "Третий"  Promise.resolve()     .then(() => console.log(11)) // "Второй"     .then(() => console.log(12)) // "Четвертый"

• При ".catch" аналогично:

Promise.resolve()     .then(() => console.log(1))                          // "Первый"     .then(() => { console.log(2); throw new Error(); })  // "Третий"     .catch(() => console.log(3))                         // "Пятый"     .then(() => console.log(4))                          // "Седьмой"  Promise.resolve()     .then(() => console.log(11))                         // "Второй"     .then(() => { console.log(12); throw new Error(); }) // "Четвертый"     .catch(() => console.log(13))                        // "Шестой"     .then(() => console.log(14))                         // "Восьмой"

Задача на бесконечные микротаски

В качестве бонуса покажу, как повесить браузер микротасками, которыми являются Promise:

const foo = () =>  {     Promise.resolve().then(() => foo()) }  foo();

Заключение

В статье я собрал базовые задачи с собеседований. Чтобы понять Promise, необходимо изучить теорию и приступать к практике. Стоит практиковать задачи в различных вариациях: расширять задачи, изменять существующие примеры и отслеживать изменения.

На этом всё. И да прибудет с нами сила!