Функция обратного вызова:

В JavaScript вы также можете передать функцию в качестве аргумента функции. Эта функция, которая передается в качестве аргумента внутри другой функции, называется функцией обратного вызова.

function greeting(name, callback) {
console.log('Hello' + ' ' + name);
callback();
}

// callback function
function Demo() {
console.log('I am callback function');
}

// passing function as an argument
greeting('Surya', Demo);

ВЫВОД:

Привет, Сурья
Я функция обратного вызова

В приведенной выше программе есть две функции. При вызове функции greeting() передаются два аргумента (строковое значение и функция).

Функция Demo() является функцией обратного вызова.

Функция обратного вызова для асинхронного режима:

Преимущество использования функции обратного вызова заключается в том, что вы можете дождаться результата предыдущего вызова функции, а затем выполнить другой вызов функции.

В этом примере мы собираемся использовать метод setTimeout() для имитации программы, выполнение которой требует времени, например данных, поступающих с сервера.

function greeting() {
console.log('Hello World');
}

function Demo(name) {
console.log('Hi' + ' ' + name);
}

// calling the function
setTimeout(greeting, 2000);
Demo('Surya');

ВЫВОД:

Привет, Сурья
Привет, мир

Как известно, метод setTimeout() выполняет блок кода через заданное время.

Здесь функция greeting() вызывается через 2000 миллисекунд (2 секунды). Во время этого ожидания выполняется Demo('Surya');. Вот почему «Привет, Сурья» печатается перед «Привет, мир».

Приведенный выше код выполняется асинхронно (вторая функция; Demo() не ждет завершения первой функции; greeting()).

Функция обратного вызова для синхронного:

В приведенном выше примере вторая функция не ожидает завершения первой функции. Однако, если вы хотите дождаться результата предыдущего вызова функции перед выполнением следующего оператора, вы можете использовать функцию обратного вызова. Например,

// Callback Function Example
function greeting(name, myFunction) {
console.log('Hello world');

// callback function
// executed only after the greet() is executed
myFunction(name);
}

// callback function
function Demo(name) {
console.log('Hello' + ' ' + name);
}


setTimeout(greeting, 2000, 'John', Demo);

ВЫВОД:

Привет, мир
Привет, Джон

В приведенной выше программе код выполняется синхронно. Функция sayName() передается в качестве аргумента функции greet().

Метод setTimeout() выполняет функцию greet() только через 2 секунды. Однако функция sayName() ожидает выполнения функции greet().

Обещание JavaScript

В JavaScript обещание — это хороший способ обработки асинхронных операций. Он используется, чтобы узнать, успешно ли завершена асинхронная операция или нет.

Обещание может иметь одно из трех состояний.

  • В ожидании
  • Выполнено
  • Отклоненный

Создайте обещание:

Чтобы создать объект обещания, мы используем конструктор Promise().

let promise = new Promise(function(resolve, reject){
//do something
});

Конструктор Promise принимает функцию в качестве аргумента. Функция также принимает две функции resolve() и reject().

Если обещание успешно возвращается, вызывается функция resolve(). И, если возникает ошибка, вызывается функция reject().

Пример:

const p1=new Promise((разрешить,отклонить)=›{

setTimeout(()=›{

решить (успех)

},2000) });

p1.then(console.log)

ВЫВОД:

const p1=new Promise((resolve,reject)=›{

setTimeout(()=›{

отклонить(“отклонить”)

},2000)

});

p1.then(console.log)

ВЫВОД:

Поскольку мы отклонили запрос, нам нужно использовать метод .catch() для отлова ошибок.

const p1=new Promise((resolve,reject)=›{

setTimeout(()=›{

отклонить("Отклонить")

},2000)

});

p1.then(console.log).catch(console.log)

ВЫВОД:

Ад обратного звонка:

Это большая проблема, вызванная кодированием со сложными вложенными обратными вызовами. Здесь каждый обратный вызов принимает аргумент, являющийся результатом предыдущих обратных вызовов. Таким образом, структура кода выглядит как пирамида, что затрудняет чтение и поддержку. Кроме того, если в одной функции есть ошибка, это повлияет на все остальные функции.

Пример:

const f1=(значение,обратный вызов)=›{

обратный вызов (val);

}

//Множественный обратный вызов

константа callback1=(val)=›{

вернуть значение+10;

}

константа callback2=(val)=›{

вернуть значение+20;

}

константа callback3=(val)=›{

вернуть значение+30;

}

console.log(f1(1,обратный вызов3))

ВЫВОД:

Как избежать ада обратного вызова?

  • JavaScript предоставляет простой способ избежать ада обратных вызовов. Это делается с помощью очереди событий и промисов.
  • Промис – это возвращаемый объект из любой асинхронной функции, к которому можно добавить методы обратного вызова на основе результата предыдущей функции.
  • Обещания используют метод .then() для вызова асинхронных обратных вызовов. Мы можем связать столько обратных вызовов, сколько захотим, и порядок также строго поддерживается.
  • Промисы используют метод .fetch() для получения объекта из сети. Он также использует метод .catch() для перехвата любого исключения при сбое любого блока.
  • Таким образом, эти обещания помещаются в очередь событий, чтобы они не блокировали последующий код JS. Также после возврата результатов очередь событий завершает свою работу.
  • Есть также другие полезные ключевые слова и методы, такие как async, wait, settimeout(), чтобы упростить и лучше использовать обратные вызовы.

Пример:

const p1=(val)=›new Promise((resolve,reject)=›{

setTimeout(()=›{

разрешение (значение + 10)

},1000)

});

p1(1).then(x=›x+20).then(console.log)

ВЫВОД:

Javscript async/await:

Мы используем ключевое слово async с функцией, чтобы обозначить, что функция является асинхронной. Асинхронная функция возвращает обещание.

Пример: асинхронная функция

асинхронная функция f() {
console.log('Асинхронная функция.');
return Promise.resolve(1);

f();

ВЫВОД:

Асинхронная функция.

В приведенной выше программе ключевое слово async используется перед функцией для обозначения того, что функция является асинхронной.

Поскольку эта функция возвращает обещание, вы можете использовать метод цепочки then() следующим образом:

асинхронная функция f() {
console.log('Асинхронная функция.');
return Promise.resolve(1);

f().then(function(result) {
console.log(result)
});

ВЫВОД:

Асинхронная функция
1

Ключевое слово ожидания JavaScript:

Ключевое слово await используется внутри функции async для ожидания асинхронной операции.

Синтаксис для использования ожидания:

let result = await promise;

Использование await приостанавливает асинхронную функцию до тех пор, пока обещание не вернет значение результата (разрешить или отклонить). Например,

// обещание
let promise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('Promise выполнен')}, 4000);
});

// асинхронная функция
асинхронная функция asyncFunc() {

// ждем, пока промис разрешится
let result = await promise;

console.log(результат);
console.log('привет');

// вызов асинхронной функции
asyncFunc();

ВЫВОД:

Обещание решено
привет

В приведенной выше программе создается объект Promise, который разрешается через 4000 миллисекунд. Здесь функция asyncFunc() написана с использованием функции async.

Ключевое слово await ожидает завершения обещания (разрешение или отклонение).

let result = await promise;

Следовательно, hello отображается только после того, как значение обещания станет доступным для переменной результата.

В приведенной выше программе, если await не используется, перед разрешением промиса отображается приветствие.

Асинхронная функция позволяет выполнять асинхронный метод, казалось бы, синхронно. Хотя операция асинхронная, кажется, что операция выполняется синхронно.

Это может быть полезно, если в программе есть несколько промисов. Например,

let promise1;
let promise2;
let promise3;

async function asyncFunc() {
let result1 = await promise1;
let result2 = await promise2;
let result3 = await promise3;

console.log(result1);
console.log(result1);
console.log(result1);
}

В приведенной выше программе await ожидает завершения каждого промиса.

Преимущества использования асинхронной функции