Первую часть этой статьи вы можете найти здесь.Там есть некоторые интересные функции. :)
Темы, которые я расскажу в этом посте
- Promises - Промисы (обещания)
- Async / Await
Promises
Promises - Обещания являются одной из полезных функций в ES6. Они используются для выполнения асинхронных операций, таких как запрос API, обработка файлов, загрузка изображений и т. д.Итак, что такое
Async? (держитесь, если вы уже знаете)
Асинхронные операции - это операции, требующие некоторого времени для завершения.
Например, скажем, вы определяете функцию, которая делает запрос API на сервер. Эта функция не возвращает результат немедленно. Для получения ответа от сервера требуется несколько секунд.
Поэтому, если вы вызываете эту функцию и присваиваете ее значение для некоторой переменной, она будет
undefined не определено. Поскольку Javascript не знает, что функция обрабатывает некоторые операции async.
Итак, как мы справляемся с этим?
До этого поговорим немного о истории.
Перед обещаниями -
promise программисты использовали обратные вызовы - callbacks. Обратные вызовы являются нормальными функциями в Javascript, который выполняется, когда операция async завершена.
Например, вы определяете функцию, которая делает запрос API на сервер. Затем вы указываете функцию обратного вызова, которая будет выполняться, когда мы получим ответ от сервера.
Таким образом, в приведенном выше случае Javascript не останавливает выполнение, пока мы не получим ответ от API. И мы определили функцию
callback, которая будет выполнена после получения ответа. Думаю, это понятно.
Итак, что такое обещания - promises
Обещания promises- это объекты, которые помогают выполнять асинхронные операции.
Технически это объекты, которые представляют собой завершение операции async. (Если вы что-то не получите, то остаетесь на некоторое время.)
Прежде чем объяснять, как определить обещание promises, я объясню жизненный цикл обещания.
У нас есть три состояния в promises.
- Pending Ожидание: в этом состоянии обещание (promises) просто выполняет операцию async. Например, он делает некоторый запрос API на сервер или загружает некоторые изображения из cdn. Из этого состояния (promises) обещания можно перейти либо к Fulfilled - исполнению, либо к Rejected - отказу.
- Fulfilled : Если (promises) обещание достигло этого состояния, значит, операция async завершена, и у нас есть выходные данные - output. Например, у нас есть ответ от API.
- Rejected : Если (promises) обещание достигло этого состояния, это означает, что асинхронная операция не увенчалась успехом, и у нас есть ошибка, из-за которой операция завершилась неудачей.
Хорошо ... Давайте посмотрим на некий код.
const apiCall = new Promise(function(resolve, reject) {
// async operation is defined here...
});
Promise определяется созданием конструктора с использованием ключевого слова -
new. Тогда конструктор будет иметь функцию (мы называем ее executor function - функцией-исполнителем).
Асинхронная операция определяется внутри функции-исполнителя.
Обратите внимание, что функция-исполнитель имеет два параметра, которые resolve - разрешают или reject - отклоняют.
Первое решение параметра - фактически функция. Он вызывается внутри функции-исполнителя и представляет, что операция async успешна, и мы получаем результат. Функция Resolve помогает обещать перейти от pending -ожидаемого к fulfilled - исполненному состоянию. Надеюсь, вы поняли. :)
Подобно решению, reject также является функцией. Он также вызывается внутри функции-исполнителя, и он показывает, что операция async не выполняется, и мы получили ошибку. Отклонение помогает обещанию перейти от ожидания - pending к отклонению - reject. :)
const apiCall = new Promise(function(resolve, reject) {
if ( API request to get some data ) {
resolve("The request is successful and the response is "+ response);
}
else {
reject("The request is not successful. The error is "+error);
}
});
В приведенном выше коде вы можете видеть, что мы выполнили некоторую асинхронную операцию внутри функции-исполнителя. Затем вызывается функция resolve разрешения, если мы получаем ответ от сервера. И если есть некоторая ошибка, то функция reject error вызывается с сообщением об ошибке.
Мы сделали определение promises - обещания. Давайте посмотрим, как выполнить promises - обещание и обработать результат.
// calling the promise. apiCall
Это оно. мы сделали. :) :)
Просто шучу. Это еще не конец.
В приведенном выше коде функция вызывается и выполняется обещание (т. Е. Выполняется executor function исполнительская функция). Затем вызывается функция resolve - разрешения или reject -отклонения на основе вывода - output.
Но вы можете видеть, что мы не обрабатывали результат, полученный из promise- обещания.
Например, если мы получим ответ от API, мы должны обработать ответ. Или, если мы получим ошибку, нам нужно правильно ее обработать.
Итак, как мы справляемся с этим?
Мы используем обработчики - handlers для получения результата от обещания.
Обработчики (handlers)- это просто функции, которые выполняются, когда происходит какое-то событие, например, нажатие кнопки, перемещение курсора и т. д.
Таким образом, мы можем использовать обработчики для обработки при вызове функции resolve - разрешения или reject - отклонения функции.
Просто. :)
Давайте посмотрим, такой код:
// calling the promise with some handlers.
apiCall.then(function(x) {console.log(x); })
В приведенном выше коде мы приложили обработчик (handler) к (then) обещанию (promise). Затем - then обработчик получает параметр функции. Тогда сам параметр функции имеет параметр x.
Так что происходит.
Обработчик then выполняет function parameter, когда функция resolve вызывается внутри обещания (promise).
Я попытаюсь объяснить это снова.
Обработчик then ищет случай, когда вызывается функция разрешения. Поэтому, когда функция разрешенияresolve вызывается, then обработчик выполняет свой параметр функции.
apiCall.then(function(x) {console.log(x); })
// Output
The request is successful and the response is {name: "Jon Snow"}
Аналогично, есть еще один catch захват обработчика.
Обработчик catch ищет функцию отклонения - reject .
Функция catch выполняет свой функциональный параметр при вызове функции reject.
apiCall.then(function(x) {console.log(x); }).catch(function(x) {console.log(x); })
// Assuming the request is not successful ( reject function is called in the promise. )
Output:
The request is not successful
Думаю, вы поняли.
Вышеприведенный код недостаточно читабельен. Так давайте попробуем:
apiCall
.then(function(x) {
console.log(x);
})
.catch(function(x) {
console.log(x);
})
Теперь это можно прочитать. Большинство программистов пишут это так.
Хорошо. Поэтому я думаю, что вы прошли долгий путь.
Давайте резюмировать..
- Promise определяется с помощью нового ключевого слова с параметром функции. Тогда сама функция имеет два параметра функции, которые разрешают - resolve и отклоняют - reject.
- Функция resolve будет вызвана, когда операция выполнена успешно.
- Функция reject - когда операция даст сбой.
- Обработчик then ищет функцию resolve разрешения.
- Обработчик catch ищет функцию reject отклонения.
- Удостоверьтесь в удобочитаемости кода :) :)
Надеюсь,что вы поймете пример. Тогда вперед.
Async / Await
Если вы понимаете Promise, то Async / Await довольно легко. И если вы не поняли Promise, Async / Await может помочь вам понять это. Может быть, вы также сможете получить ясный выход из Promise - обещаний. :)Async
Ключевое слово Async позволяет любой функции возвращать только обещания.Например, рассмотрите приведенный ниже код
async function hello() {
return "Hello Promise..!"
}
Function hello вернет Promise - обещание.
Вышеприведенный код эквивалентен приведенному ниже коду.
function hello() {
return new Promise(function(resolve, reject) {
// executor function body.
});
}
Так проще?
Другой пример:
async function hello(a, b) {
if (a < b) {
return "Greater";
}
else {
return new Error("Not Greater");
}
}
hello(14, 10)
.then(function(x) {
console.log("Good..! " + x);
})
.catch(function(x) {
console.log("Oops..! " + x);
})
Output:
Oops..! Not Greater.
// if you call hello(4, 10) you get "Good..! Greater"
В приведенном выше коде мы определили функцию async и вернули некоторое значение или вернули некоторую ошибку.
Если вы возвращаете некоторое значение в async-функции, это эквивалентно вызову функции resolve разрешения.
Если вы возвращаете некоторую ошибку, вызывая error constructor using ‘new’ (конструктор ошибок с помощью «new»), то это эквивалентно функции reject - отклонения.
Не забывайте, что функция async вернет обещание. Поэтому, конечно, вы можете вызвать функцию resolve - разрешения и отклонения - reject внутри функции async.
Посмотрим, как это работает.
async function Max(a, b) {
if (a > b) {
return Promise.resolve("Success");
}
else {
return Promise.reject("Error");
}
}
Max(4, 10)
.then(function(x) {
console.log("Good " + x);
})
.catch(function(x) {
console.log("Oops " + x);
});
Output:
Oops Error
// If we pass Max(14, 10) then we should get "Good Success" :)
Await
Как следует из названия, это заставляет Javascript ждать завершения операции. Предположим, вы делаете запрос API с ключевым словом await. Это заставляет Javascript ждать, пока вы не получите ответ от конечной точки. И затем он возобновляет выполнение.Хорошо .. Пойдем глубже
Ожидание await может использоваться только внутри асинхронной функции. Он не работает вне асинхронной функции
Давайте посмотрим пример:
async function hello() {
let response = await fetch('https://api.github.com/');
// above line fetches the response from the given API endpoint.
return response;
}
hello()
.then(function(x) {
console.log(x);
});
...
...
Output:
Response from the API.
В приведенном выше коде вы можете видеть, что мы использовали await ожидание при получении ответа от API.
Операция выборки (fetch) может занять несколько секунд, чтобы получить ответ так, что выполнение будет остановлено и возобновлено позже.
Обратите внимание, что ожидание операции останавливает выполнение внутри функции hello. Остающийся код вне функции hello не будет затронут. Выполнение продолжается вне функции. И когда мы получаем ответ, выполняется параметр функции .then внутри обработчика .
Надеюсь, вы поняли.
Давайте посмотрим пример
jsfiddle.net
В приведенном выше примере вы можете видеть, что мы использовали await функцию для getResponse. И getResponse вернет результат или ошибку через 5 секунд. Таким образом, до этого времени выполнение приостанавливается, а затем возвращается ответ.
Давайте посмотрим пример в реальном времени.
jsfiddle.net
В приведенном выше примере вы можете видеть, что мы использовали несколько ожиданий - awaits. Поэтому для каждого ожидания выполнение останавливается до получения ответа, а затем возобновляется.
Попробуйте использовать тот же пример с некорректным URL-адресом. Вы можете видеть, что ошибка поднята.
Обработка ошибок очень проста в асинхронной async функции. Если ошибка возникает внутри функции async или когда ошибка возникает из других функций, которые вызываются внутри async, используя await, вызывается функция reject - отклонения. Просто.
Надеюсь тебе понравилось. Я рассмотрю гораздо более интересные темы, такие как карта массива, фильтр массивов, сокращение и т. д. В следующей части.
Автор: Srebalaji Thirumalai.
Перевод: Kolesnikov Yaroslav
Комментариев нет:
Отправить комментарий