Привет всем 👋,
Это моя третья статья о концепциях JavaScript ES6. Если вы еще не читали другого, вы можете прочитать его здесь – классы, модули. В этой статье я собираюсь поговорить обо всем, что вам нужно, чтобы начать с обещаний JavaScript.
Оглавление –
- Вступление
- Функции обратного вызова
- Обещания
- Обещание цепочки
- Статические методы
Вступление
Во время изучения JavaScript вы, возможно, слышали несколько причудливых слов, таких как асинхронные, обратные вызовы, обещания и т. Д., Которые смущает многих людей.
Итак, сегодня мы постараемся как можно больше удалить эту путаницу, раз, рассказывая об этих темах.
Давайте поговорим о том, что такое обещание?
Обещания просто похожи на реальные обещания, например, я обещаю написать для вас потрясающую статью о психическом здоровье. Таким образом, может быть два результата: либо я выполняю ( разрешение ) это или нет ( отклонить ).
То же самое относится и к JavaScript обещает Анкет Обещание является частью кода, которая обещает произвести результат, поэтому он либо разрешит его, либо отклонит его.
И согласно выводу, мы можем иметь код, который обрабатывает решимость или отклонение.
Прежде чем JavaScript обещания появились в картинке, мы использовали функции обратного вызова для обработки асинхронного кода.
Давайте поговорим о том, что означает асинхронный код?
Код JavaScript прочитана по строке, и Асинхронно Код – это код, который занимает некоторое время для завершения. Таким образом, они выходят за пределы основного потока программы, позволяя немедленно выполнять асинхронный код, не ожидая.
Давайте поймем это с примером –
// 📂 main.js
console.log("Start");
console.log("Normal Flow");
console.log("End");
Посмотрим на выход –
Здесь мы видим, что код прочитан по строке по строке, и вывод производится соответствующим образом.
Теперь давайте посмотрим на тот же пример с асинхронным кодом –
// 📂 main.js
console.log("Start");
// Asynchronous Code
setTimeout(() => {
console.log("Async code: It'll take some time...");
}, 3000);
console.log("End");
Здесь мы видим, что добавили асинхронный код, который займет некоторое время. Давайте посмотрим на вывод в этом случае –
Мы можем видеть, что в этом случае, когда был прочитал асинхронный код, он вышел из обычного потока, поскольку это потребовалось некоторое время, в то время как во время этого следующие коды начали выполнять, не ожидая завершения асинхронного кода. И вывод асинхронного кода произошел, когда он завершил свое выполнение.
Это был небольшой пример. Некоторые примеры реальной жизни извлекают данные из базы данных или сервера, отправляют изображение и т. Д. Все это требует времени, чтобы завершить, а также может потерпеть неудачу и произвести ошибку; Таким образом, нам нужны некоторые способы обработки асинхронного кода.
И поэтому обратный вызов функционирует и обещания входят в картинку.
Начнем с некоторых оснований функций обратного вызова –
Функции обратного вызова
Когда функция передается в качестве аргумента другой функции, она называется функцией обратного вызова.
Давайте поймем, как функции обратного вызова используются для обработки асинхронного кода с примером –
// 📂 main.js
console.log("Start");
const displayMiddle = () => {
console.log("middle: I'm called by setTimeout so I'll take some time to complete...");
};
const displayEnd = () => {
console.log("End");
};
// Asynchronous Code
setTimeout(displayMiddle, 3000);
displayEnd();
Я слегка изменил первый пример, но он все еще такой же, как и функции, называемые последовательными. Кроме того, он дает тот же результат, что и раньше –
Теперь давайте посмотрим, как мы можем использовать функцию обратного вызова для обработки этого асинхронного кода –
// 📂 main.js
console.log("Start");
const displayMiddle = (callback) => {
console.log(
"middle: I'm called by setTimeout so I'll take some time to complete..."
);
// callback function will run only when outer function will complete
callback();
};
const displayEnd = () => {
console.log("End");
};
// Asynchronous Code; displayEnd() passed as an argument
setTimeout(displayMiddle, 3000, displayEnd);
Здесь мы видим, что мы прошли Показать функционируйте как аргумент к Displaymiddle функция; Таким образом, это называется функцией обратного вызова.
Примечание: Обратите внимание, что мы не используем скобку () во время передачи функций.
После передачи функции Displayend в качестве функции обратного вызова, мы размещаем ее на последнюю часть функции Displaymiddle. И теперь, когда функция Displaymiddle вызвана, она завершит выполнение, тогда выполняется только функция Displayend.
Посмотрим на выход –
Здесь мы видим, что функция Displayend ожидает завершения функции DisplayMiddle, а затем выполняется.
Проблемы с функциями обратного вызова –
Нелегко справиться с сложным асинхронным кодом с обратными вызовами; Это затрудняет чтение кода, трудно отлаживать, а также его легче сломать.
Другая проблема – это то, что называется Обратный обратный ход Анкет Когда мы начинаем неоднократно гнездовать обратные вызовы, это приводит к более беспорядочному коду, который, скорее всего, сломается.
Посмотрим на небольшой пример –
// 📂 main.js
function load(data, callback) {
console.log(data);
callback("right");
}
load("Alok", function (sign) {
if (sign === "right") {
load("Aman", function (sign) {
if (sign === "right") {
load("Rajan", function (sign) {
console.log("Done");
});
}
});
}
});
Выход –
Здесь мы видим, что у нас есть функция, которая постоянно вызывает функцию обратного вызова. Даже этот код трудно объяснить; Теперь представьте себе замену консоли. Это приводит к коду, которым легко сломать и трудно управлять.
Мы можем справиться с такими случаями с обещаниями JavaScript, но во -первых, посмотрим, что обещает JavaScript.
Обещания
Обещание – это специальный объект JavaScript, который связывает « Производство кода » и « Потребляющий код » вместе.
Производство кода: Код, который занимает некоторое время, чтобы запустить.
Потребляющий код: Код, который должен ждать результата от создания кода.
В обещании есть три государства –
1) В ожидании – Если код выполняется
2) удовлетворено – Если код выполняется успешно, то он дает результат
3) отвергнуто – Если возникает какие -либо ошибки, то это допускает ошибку
Давайте поймем обещания с помощью его синтаксиса –
// 📂 main.js
let promise = new Promise((resolve, reject) => {
// Some code which takes time to execute...
// if code executes successfully
resolve(result);
// if some error occurs
reject(error);
});
Используя Новое обещание () , мы можем создать обещание. Требуется функция с двумя аргументами – разрешение и отклонить Анкет
Оба решимости и отклонение Функции обратного вызова которые имеют конкретные цели –
разрешение – Если код работает успешно, разрешение вызывается с результатом.
отклонить – Если возникает ошибка, отклонение вызывается с ошибкой.
Подвести итоги –
Теперь посмотрим пример –
// 📂 main.js
let promise = new Promise((resolve, reject) => {
let x = 3;
if (x === 3) {
resolve("true");
} else {
reject("false");
}
});
Здесь мы видим, что мы создали обещание, которое вызовы разрешают или отклоняют на основе условия.
Примечание: Обещание может вызвать только одну функцию обратного вызова, либо разрешить, либо отклонить, и если мы добавим больше разрешения или отклонение, она рассмотрит первую и проигнорирует остальные.
Это был код продюсера, который создал обещание. Теперь давайте посмотрим, как использовать его с помощью потребителей.
Потребители: тогда, поймай, наконец
потом:
Тогда является наиболее важным и наиболее используемым потребителем. Это позволяет нам выполнять обещание.
Давайте посмотрим пример того, как мы можем использовать вышеуказанное обещание, используя тогда –
// 📂 main.js
let promise = new Promise((resolve, reject) => {
let x = 3;
if (x === 3) {
resolve("true");
} else {
reject("false");
}
});
// resolve runs the first function in .then
// reject runs the second function in .then
promise.then(
(resolver) => console.log(resolver), // true
(error) => console.log(error) // doesn't run
)
Первый аргумент Тогда это функция, которая работает, если обещание разрешено, в то время как вторая функция работает, если обещание отклоняется.
Таким образом, используя эти функции, мы можем обрабатывать обещание и использовать его в соответствии с нашей необходимостью, например, загрузка сценария (который требует некоторого времени для загрузки) в Обещание а затем справиться с этим, используя Тогда – Отображение страницы (после успешного загрузки сценария).
ловить:
Мы также можем использовать поймать Чтобы справиться с обещанием, если оно отклонилось, то есть произведена любая ошибка (точно так же, как try {…} catch {…} ).
Посмотрим пример –
// 📂 main.js
let promise = new Promise((resolve, reject) => {
let x = 4;
if (x === 3) {
resolve("true");
} else {
reject("false");
}
});
// reject runs the code in catch
promise
.then((resolver) =>
console.log(resolver)) // doesn't run
.catch(
(error) => console.log(error) // false
);
Здесь мы видим, что мы использовали улов, чтобы справиться с отказом.
в конце концов:
Наконец можно использовать для выполнения обещания, когда оно является урегулировано (либо разрешен, либо отвергнут , это не имеет значения).
Он используется, когда мы должны сделать что -то независимо от: обещание разрешено или отвергается.
Посмотрим пример –
// 📂 main.js
let promise = new Promise((resolve, reject) => {
let x = 4;
if (x === 3) {
resolve("true");
} else {
reject("false");
}
});
promise
.then((resolver) =>
console.log(resolver)) // doesn't run
.catch(
(error) => console.log(error) // false
)
.finally(() =>
console.log("Computation Done!!!")); // Computation Done!!!
Обещание цепочки
Помните, мы обсуждали что -то под названием Обратный обратный ход Ранее в этой статье, в которой мы должны выполнять последовательность асинхронных задач.
Итак, давайте посмотрим, как мы можем справиться с этим с помощью обещаний:
Мы используем Обещание цепочка Чтобы достичь этого. Давайте посмотрим пример, чтобы понять это –
// 📂 main.js
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve(1), 5000);
});
// Promise chaining
promise
.then((resolver) => {
console.log(resolver);
return resolver + 1;
})
.then((resolver) => {
console.log(resolver);
return resolver + 1;
})
.then((resolver) => {
console.log(resolver);
})
.catch(() => console.log("Error Occurred"))
.finally(() => console.log("Done"));
Здесь мы видим, что мы использовали цепь .then выполнить последовательность асинхронных задач после цепи .then У нас есть поймать Блок для обработки ошибки, если он произведен, и в самом конце, у нас есть Наконец Блок, чтобы что -то сделать, когда все обещания урегулированы.
Когда .then Верните что -нибудь, затем передается следующему .then И так далее, пока обещание не улажено.
Примечание: Здесь звонок Обещание. Тогда Также возвращает обещание, чтобы мы могли позвонить в следующее .then в теме.
Давайте посмотрим на вывод –
Здесь мы видим, что все .потом S пробежал один за один, давая свой результат, то есть 1 , 2 и 3 и передавать какое -то значение к следующему .then И наконец, Наконец Блок запустил производство Готово Анкет
И мы можем ясно видеть, что гораздо проще читать и понять, а также легче управлять.
Статические методы
Давайте поговорим о некоторых статических методах обещаний, которые очень полезны –
Обещание. Все
Это требует множества обещаний, выполняет их все параллели и возвращает массив результатов, когда все полное выполнение.
Посмотрим пример –
// 📂 main.js
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve("I'm Promise 1"), 3000);
});
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => resolve("I'm Promise 2"), 2000);
});
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => resolve("I'm Promise 3"), 1000);
});
// Passing an array of Promises
Promise.all([promise1, promise2, promise3]).then(
(resolvers) => console.log(resolvers) // (3) ["I'm Promise 1", "I'm Promise 2", "I'm Promise 3"]
);
Здесь мы видим, что у нас есть три обещания. Мы передали их все как массив Обещание. Все и справился с ними в .then который производит массив в результате.
Массив результатов содержит выходной сигнал по порядку, поскольку обещания были переданы, независимо от того, какая первая заканчивается.
Если в любом из обещаний есть ошибка, она бросает ошибку. Это продолжается только тогда, когда все обещания успешны.
Обещание. Все
В Обещание. Все Мы продолжаем только тогда, когда все обещания успешны, а Обещание. AllSettled Просто ждите, пока все обещания не будут урегулированы, независимо от разрешения или отклонения.
В результате это дает множество объектов:
{status:"fulfilled", value:result} // if resolved
{status:"rejected", reason:error} // if rejected
Посмотрим пример –
// 📂 main.js
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve("I'm Promise 1"), 3000);
});
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => reject("Ooops!!!"), 2000);
});
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => resolve("I'm Promise 3"), 1000);
});
Promise.allSettled([promise1,promise2,promise3]).then((resolvers) =>
console.log(resolvers)
);
Посмотрим на выход –
Обещание
Обещание. Расе принимает множество обещаний и ожидает только первого урегулированного обещания независимо от разрешения или отклонения, и дает результат или ошибку.
Посмотрим пример –
// 📂 main.js
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => resolve("I'm Promise 1"), 3000);
});
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => reject("Ooops!!!"), 2000);
});
let promise3 = new Promise((resolve, reject) => {
setTimeout(() => resolve("I'm Promise 3"), 1000); // takes least time so finishes first
});
Promise.race([promise1, promise2, promise3])
.then((resolver) => console.log(resolver)) // I'm Promise 3
.catch((reject) => console.log(reject));
Здесь мы можем увидеть обещание3 занимает наименьшее время, поэтому он заканчивается первым, таким образом, вывод.
Прочитайте предыдущий блог в серии
👈 Начало работы с модулями JavaScript
Я старался сделать это простой и точным, и если вы найдете опечатку/ошибку, сообщите мне об этом, чтобы я мог исправить это 🙂
Спасибо, что прочитали до последнего 🙏
Если вы найдете это полезным, вы можете поделиться этим с другими:)
Давайте подключимся, бросьте Привет И давайте поговорим 👋👋👋
Оригинал: “https://dev.to/thecoollearner/getting-started-with-javascript-promises-e0”