В этой части учебника мы рассмотрим что такое промисы в JavaScript, для чего нужны и как работают, думаю будет интересно и полезно.
Что такое промисы в JS:
Если кратко говоря, то это объект, который содержит состояние. Вначале это pending («ожидание»), затем – одно из: fulfilled («выполнено успешно») или rejected («выполнено с ошибкой»).
Для чего нужны промисы в JS:
В первую очередь они нужны для избежание очень большой вложенности во время написания асинхронного кода, например во время использования большого количества колбэк функций.
Во вторых, для отлавливания ошибок, это может очень сильно для этого пригодиться.
Работа с промис в JS:
Теперь разберём работы с промисами, и она крайне проста, давайте для примера разберём такой не большой код:
1 2 3 4 | const p = new Promise(function(resolve, reject) { setTimeout(console.log("resolve"), 2000); resolve }) |
Как видите тут мы создали по сути объект промисы с помощью класса Promise(), в качестве параметра принимает колбэк функцию, который принимает в себя два параметра, это resolve, который нужен для подведения успешного выполнения кода и reject, который наоборот используется для в случае ошибки.
Внутри функции, мы запускаем таймоут, который при истечение двух секунд выводит надпись в консоль, и в конце, если операция прошла успешна, то запускаем функцию resolve().
Но пока не понятно зачем она нужна, если и так всё должно сработать нормально, и в целом в этом нет смысла, чтобы это понять, давайте усложним немного код.
Вот он:
1 2 3 4 5 6 7 8 | const p = new Promise(function(resolve, reject) { setTimeout(console.log("Hello world"), 2000); resolve("Peter") }) p.then(function(data){ console.log("Hello " + data) }) |
Теперь мы resolve() передаём не большую строчку «Peter», потом, чуть ниже используем объект p с методом then(), в нём в качестве параметра используем колбэк функцию, с параметром data.
И как раз этот метод и отвечает за-то, что всё прошло успешно, и внутри функции которую мы передаём, так же сработает только тогда, когда успешно пройдёт программы, или мы запустим функцию resolve(), а параметр data, это как раз то, что мы передаём ы функцию resolve(), в нашем случае строчка.
Но опять же код ни как не поменялся, мы могли так же всё использовать и с обычными колбэк функциями, но вы можете внутри then(), ещё вернуть данные, давайте опять для примера усложним программу.
Вот что у нас теперь получиться:
1 2 3 4 5 6 7 8 9 10 11 | const p = new Promise(function(resolve, reject) { setTimeout(console.log("Hello world"), 2000); resolve("Peter") }) p.then(function(data) { console.log("Hello " + data) return "Dr. Srange"; }).then(function(data) { console.log("Hello " + data) }) |
Как видите тут мы уже в первом then(), возвращаем надпись «Dr. Srange», а во втором мы используем код console.log(«Hello » + data), где data уже не «Peter», а «Dr. Srange», и в таком случае мы получим надпись «Hello Dr. Srange».
Вот доказательство этому:
И таким образом вы можете бесконечно возвращать любые данные, для следующего then(), ну и данные так же можете передавать любые, не только строки.
Ещё может отлавливать ошибки, для можно использовать условие, и в одном, где всё в порядке применять функцию resolve(), а где ошибка то reject().
Вот более полный пример:
1 2 3 4 5 6 7 8 9 | const p = new Promise(function(resolve, reject) { setTimeout(console.log("Hello world"), 2000); let data = "Dr. Srange" if (data === "Peter") { resolve("Peter") } else { reject("error") } }) |
Понятно что это весьма поверхностный пример, но суть я думаю вы поняли.
Для отлавливания и работы с ошибкой используется метод catch(), который используется по принципу then(), только срабатывает когда есть ошибка, вот и всё, и его лучше всего использовать в конце всего этого пути, ну или где то середине, если вы учтёте положительный выход из него.
Ну и есть метод finally(), но про него сказать нечего, так как он всегда срабатывает в конце всего промиса.
Вывод:
В этой части учебника по асинхронному JavaScript мы рассмотрели промисы, что это такое, для чего нужно, и как сними работать, думаю было интересно.
Подписываетесь на соц-сети:
Оценка:
Загрузка...