Автор оригинала: Nishant Kumar.
В этом руководстве мы собираемся узнать, как использовать Async/ждут в JavaScript.
Но прежде чем мы туда доберемся, мы должны понимать несколько тем, таких как:
- Контуры событий
- Обратные вызовы
- Обещания
Что такое петли событий в JavaScript?
Шветы событий являются одним из важнейших аспектов JavaScript.
JavaScript – это однопоточный язык программирования, который означает, что только одна задача может работать одновременно. Он имеет стек вызовов, и весь код выполнен в этом стеке вызовов. Давайте понять с примером.
В приведенном выше примере мы можем видеть, что мы регистрируем два значения в консоли.
Когда Сначала () Заканчивает его выполнение, он будет выскочен из стека вызовов, а цикл событий будет спущен к следующей строке. Следующая строка будет храниться в стеке вызовов и будет помечено для выполнения.
Наша консоль будет распечатать следующий результат:
Чтобы лучше понять вещи, давайте посмотрим на другой пример.
console.log('First!');
setTimeout(function second(){
console.log('Timed Out!')
}, 0000)
console.log('Final!');Как обычно, наш код перейдет в стек вызовов, а цикл событий будет петлен по линии по строке.
Мы получим «первым!» В консоли, и она будет перемещена из стека вызовов.
Теперь контур событий переместится на вторую строку и нажимает его в стек вызова. Это встретится с Сетримс Функция, которая представляет собой макро задачу, и она будет выполнена в следующем цикле событий.
И теперь, вам может быть интересно, что такое макрос задачей. Ну, это задача, которая выполняется после всех задач в контуре события, или вы можете сказать, в другом контуре событий. Сетримс и Setinterval Функции могут быть примером задачи макроса, которая выполняется после завершения всех других задач.
Наконец, окончательная линия кода будет выполнена. Мы сначала доберемся в нашей консоли, затем финал, а также Затем истекло.
Как функции обратного вызова работают в JavaScript?
Функции обратного вызова – это те функции, которые были переданы в другую функцию в качестве аргумента.
Давайте посмотрим на пример.
const movies = [
{ title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
{ title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }]
function getMovies(){
setTimeout(() => {
movies.forEach((movie, index) => {
console.log(movie.title)
})
}, 1000);
}
getMovies();У нас есть массив, который содержит список фильмов Star Wars и функции GetMovies () чтобы получить список.
Давайте создадим другую функцию под названием CreateMovie () Отказ Он будет использоваться для добавления нового фильма.
const movies = [
{ title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
{ title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }
]
function getMovies(){
setTimeout(() => {
movies.forEach((movie, index) => {
console.log(movie.title)
})
}, 1000);
}
function createMovies(movie){
setTimeout(() => {
movies.push(movie)
}, 2000);
}
getMovies();
createMovies({ title: `Return of the Jedi`, body:`Luke Skywalker attempts to bring his father back to the light side of the Force. At the same time, the rebels hatch a plan to destroy the second Death Star.` });Но проблема вот мы не получаем третий фильм на консоли. Это потому, что CreateMovie () занимает больше времени, чем GetMovies () Отказ CreateMovie () Функция заняла две секунды, но GetMovies () занял только одну секунду.
Другими словами, GetMovies () бежит до CreateMovies () И список фильмов уже отображается.
Чтобы решить это, мы можем использовать обратные вызовы Отказ
В CreatePost () Пройдите обратный вызов функции и позвоните в функцию сразу после того, как новый фильм выталкивается (вместо того, чтобы ждать две секунды).
const movies = [
{ title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
{ title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }
]
function getMovies(){
setTimeout(() => {
movies.forEach((movie, index) => {
console.log(movie.title)
})
}, 1000);
}
function createMovies(movie, callback){
setTimeout(() => {
movies.push(movie);
callback();
}, 2000);
}
createMovies({ title: `Return of the Jedi`,
body:`Luke Skywalker attempts to bring his father back to the light side of the Force.
At the same time, the rebels hatch a plan to destroy the second Death Star.` }, getMovies);Теперь мы получаем обновленный список фильмов.
Как обещания работают в JavaScript?
Обещание – это значение, которое может создать значение в будущем. Это значение может быть разрешено или нерешено (в некоторых случаях ошибок, как сбой сети). Это работает как реальная обещание.
Он имеет три государства: отработанные, отклоненные или ожидающие.
- Выполнено:
Onfulfulled ()будет называться (например,разрешение ()был вызван). - Отклонено:
Onrejected ()будет называться (например,letroj ()был вызван). - В ожидании: еще не выполнено или отклонено.
Давайте посмотрим на пример.
Обещание принимает два параметра, разрешать и отвергать. Когда что-то идет не так, отказ вызывается или вызывается разрешение.
const movies = [
{ title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
{ title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }
]
function getMovies(){
setTimeout(() => {
movies.forEach((movie, index) => {
console.log(movie.title)
})
}, 1000);
}
function createMovies(movie){
return new Promise((resolve, reject) => {
setTimeout(() => {
movies.push(movie);
const error = false;
if(!error){
resolve();
}
else{
reject('Error: Something went wrong!')
}
}, 2000);
})
}
createMovies({ title: `Return of the Jedi`, body:`Luke Skywalker attempts to bring his father back to the light side of the Force. At the same time, the rebels hatch a plan to destroy the second Death Star.`})
.then(getMovies);Если мы получим ошибку, это будет что-то вроде ошибки: что-то пошло не так! », А если нет, обещание будет разрешено.
Как только обещание будет решено, он требует .потом () Ключевое слово и GetMovies () Отказ
Наконец, Как работает Async/ждут работы в JavaScript
Async означает асинхронный. Это позволяет программе запустить функцию без замораживания всей программы. Это сделано с использованием ключевого слова Async/await.
Async/await облегчает писать обещания. Ключевое слово «async» до функции делает функцию возвращать обещание, всегда. И ключевое слово await используется внутри асинхронизации, что делает программу ждать, пока не решится обещание.
async function example() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("done!"), 2000)
});
let result = await promise; // wait until the promise resolves (*)
alert(result); // "done!"
}
example();Функция выполнения «паузы» на (*) линия и возобновляет, когда обещание выполняется, с Результат становясь его результатом. Так Код выше показывает «Готово!» Через две секунды.
Давайте посмотрим на пример практики.
const movies = [
{ title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
{ title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }
]
function getMovies(){
setTimeout(() => {
movies.forEach((movie, index) => {
console.log(movie.title)
})
}, 1000);
}
function createMovies(movie){
return new Promise((resolve, reject) => {
setTimeout(() => {
movies.push(movie);
const error = false;
if(!error){
resolve();
}
else{
reject('Error: Something went wrong!')
}
}, 2000);
})
}
async function init(){
await createMovies({ title: `Return of the Jedi`, body:`Luke Skywalker attempts to bring his father back to the light side of the Force. At the same time, the rebels hatch a plan to destroy the second Death Star.`});
getMovies(); (*)
}
init();В приведенном выше примере GetMovies () На линии (*) ждет CreateMovies () быть выполненным в асинхронной функции.
Другими словами, CreateMovies () async, поэтому GetMovies () будет работать только после CreateMovies () готово.
Теперь вы знаете все основы циклов событий, обратные вызовы, обещания и ASYNC/ждут. Эти функции были введены в Ecmascript 2017, и они сделали чтение и запись кода JS намного проще и эффективнее.