bxnotes.ru
  • конспекты
  • статьи
Angular в конспектах Angular Bitrix в конспектах Bitrix Git в конспектах Git Js в конспектах Js Linux в конспектах Linux MySQL в конспектах MySQL Php в конспектах Php React в конспектах React
Angular в статьях Angular Bitrix в статьях Bitrix Git в статьях Git Js в статьях Js Linux в статьях Linux MySQL в статьях MySQL Php в статьях Php React в статьях React
Главная
Статьи
js
Promise
Статья из конспекта "Курс современного JavaScript":
  • JavaScript, ECMA, Babel
  • Всплытие. Hoisting.
  • Область видимости. Scope.
  • Let, const, var
  • Замыкания. Closure.
  • This
  • Паттерны
  • Модуль
  • Строитель
  • Фасад
  • Компоновщик
  • Наблюдатель
  • Архитектура среды
  • Callback Hell
  • Promise
  • Async/Await

Promise

Promise в JavaScript

js promise resolve reject
Использования объекта Promise для рефакторинга паттерна "Callback Hell"
Источник — Курс современного JavaScript:
В конспекте →

Объект Promise служит удобной оберткой для обслуживания асинхронного функционала. Основное назначение Promise создавать цепочки вызовов асинхронных функций.

Структура и использование:

const myPromise = new Promise((resolve, reject) => {
// выполнение асинхронного кода...
// resolve(someValue); // вернуть результат как Promise
// reject("причина ошибки"); // если произошла ошибка
});
myPromise
.then((data) => {
return myNextPromise(data);
})
.then((data2) => {
return myNextPromise2(data2);
})
.then((data3) => {
return myNextPromise3(data3);
})
.catch(); // будет вызван в случае ошибки
hosted with ❤ by bxnotes

Перепишем код примера из предыдущей статьи "Callback Hell" в более удобную форму с помощью промисов.

Исходный вариант:

onGetUserInfo(1, (userData) => {
onGetPermissions(userData, (permissions, userData) => {
makePost(permissions, userData);
});
});
hosted with ❤ by bxnotes

Рефактор:

getUserInfo(1)
.then(userData => { return getPermissions(userData); })
.then(([permissions, userData]) => { makePost(permissions, userData); })
.catch(console.log("err"));
hosted with ❤ by bxnotes

Полый код рефакторинга:

const getUserInfo = id => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const userData = {
id: 1,
name: "test"
}
resolve(userData);
},
100);
});
};
const getPermissions = userData => {
return new Promise((resolve, reject) => {
setTimeout(() => {
const permissions = {
write: "y",
read: "y"
};
resolve([permissions, userData]);
},
50);
});
};
const makePost = (permissions, userData) => {
if (permissions.write === "y") {
console.log(`Пользователь ${userData.name} написал пост`);
}
}
// клиентский код
getUserInfo(1)
.then(userData => {
return getPermissions(userData);
})
.then(([permissions, userData]) => {
makePost(permissions, userData);
})
.catch(console.log("err"));
hosted with ❤ by bxnotes

В данном примере мы рассмотрели как использовать объекты Promise для построения цепочки вызовов асинхронных функций и избавились с помощью них от паттерна "Callback hell".

Источник — Курс современного JavaScript:
В конспекте →
Опубликовано 21.09.2018

© 2017–2018 bxnotes
конспекты веб разработчика
feedback@bxnotes.ru