Синхронне програмування - це просто. Ви просто викликаєте функцію, отримуєте значення, що вона повертає і продовжуєте робити все, що вам потрібно. Асинхронне програмування, з іншого боку, дуже незвичне. Так, у нас є Promise, який значно спрощує взаємодію з асинхронними функціями. Тим не менш, це не елегантне рішення. Отже, чи є спосіб краще? Є! У цій статті я розповім вам про async і await функції в ES7, а також поясню, як вони можуть змінити спосіб роботи з асинхронними завданнями.
Традиційний підхід
Перш ніж заглиблюватися в деталі асинхронних функцій ES7, давайте розглянемо традиційний спосіб роботи з Promise.
getPromise()
function getPromise(value){
return new Promise(resolve,reject){
//симуляція async завдання
setTimeout(function(){
if(value % 2 === 0){
resolve('Resolved!');
}
else{
reject('Rejected!');
}
},5000);
}
}
Припустимо, що функція getPromise() щось робить асинхронно і видає
Rejected/Resolved після 5 секунд. Щоб використати функцію, ви зробите щось
на зразок цього:
function caller(){
getPromise(2).then(successCallback,failureCallback);
}
Якщо ми маємо resolve, викликається successCallback. Якщо reject \-
failureCallback. Тепер, давайте подивимося, як цей код може бути покращений
за допомогою нових асинхронних функцій в ES7.
Нові можливості ES7
ES7 вводить дві нові ключові слова : async і await. await, як випливає з
назви, дозволяє очікувати на асинхронні функції. Щоб використовувати ключове
слово await ваші функції повинні бути відзначені як async. Давайте
подивимося, як ми можемо змінити наш попередній фрагмент використовувати
await.
async function caller(){
var message = await getPromise(2);
console.log(message);
return message;
}
При використанні await, ви чекаєте на асинхронні функції у неблокуючий
спосіб. У цьому випадку ваша функція caller зупиняється на функції
getPromise(), але не блокується. Як тільки функція getPromise() виконана,
значення повертається і зберігається в змінній message. Це зрозумілий,
простий і дуже схожий на синхронний спосіб програмування. Також зверніть
увагу, що функція caller повертає message так само, як і значення.
Оскільки ви зазначили функцію як async, значення буде обгорнуте і повернуте
як Promise.
Але як щодо відмови? Що робити, якщо getPromise() відхиляє Promise? Для
обробки відмов потрібно обернути ваш код у try/catch
async function caller(){
try{
var message = await getPromise(2);
console.log(message);
return message;
}
catch(err){
console.log(err.message); //rejected
}
}
У цьому випадку, якщо функція getPromise() надсилає відмову, то управління
передається в блок catch. Відхилене значення може бути отримане від об'єкта
err.
Висновок
ES7 синтаксис для роботи з Promise - це, безумовно, простий і потужний інструмент. ES6 не повністю реалізований у всіх браузерах, про підтримку асинхронних функцій ES7 на даний момент тим більше нічого невідомо. Якщо ви не можете більше чекати, скористайтесь компілятором Traceur. У разі, якщо Ви не в курсі, Traceur - це компілятор, який приймає ваш ES6 код і перетворює його у ES5 еквівалент. Ви також повинні включити експериментальні функції в компіляторі.
Ще немає коментарів