Async Функции - Глава 3: Async / a ждать

Введение

Эта статья является продолжением серии из трех частей в асинхронных функциях. Вы можете прочитать первые две части здесь:

Перезвони	Часть 1.
Обещания	Часть 2

Как мы видели в предыдущей статье, цепочка для обещания улучшает как аспекты чтения кода, так и упроблем кода.

С введением Async/ждут в ES7, код выглядит и больше ведет себя как синхронный код. Тем не менее, вы должны знать, что async/a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a ждать в основном синтаксический сахар, построенный на вершине обещаний.

Как работает Async/ждут?

Async – ключевое слово «async», при добавлении перед функцией, указывает на то, что он возвращает обещание и функции внутри него асинхронные по своей природе и обозначены ключевое слово «ждут».

A ждать – ключевое слово «await» может использоваться только в функции, которая определяется ключевым словом «async». «Await» сообщает JavaScript Engine, чтобы убедиться, что выполнение приостановлено, пока функция не завершит выполнение и не возвращает обещание.

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

Без async/await:

Предположим, у нас есть функция getcake, которая возвращает торт. Есть еще две функции, BuleGGS и BakeCake. Для того, чтобы выпекать торт, нам нужно сначала купить яйца. Однако в функции Buareeggs есть тайм-аут, установленный на 2 секунды, что означает, что функция BakeCake будет работать немедленно, и функция Buyeggs будет работать через интервал времени 2 секунды.

Следовательно, выход «undefined» (поскольку вариабельные «яйца» еще не назначаются значение), и «торт» отображается в качестве вывода на консоли.

//Function getCake calls the buyEggs & bakeCake functions
//the code execution will not wait for Promise to be resolved
const getCake = function() {
    //Buy Eggs
    const eggs = buyEggs();
    console.log(eggs); //Output -> undefined

    //Bake Cake
    const cake = bakeCake();
    console.log(cake); //Output -> Cake on the console
}

//Function Buy Eggs returns a promise after 2 seconds
const buyEggs = function() {
    setTimeout(() => {
        return 'Eggs';
    }, 2000);    
}

//Bake cake returns cake - But Cake can only be baked after buying eggs
const bakeCake = function() {
    return 'Cake';
}

//Call the getCake() async method
getCake();

//Program Output
//undefined
//Cake

После добавления Async/await:

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

Следующим шагом будет добавить ключевое слово «Async» в функцию GetCake, чтобы указать, что внутри функции есть асинхронные функции.

Кроме того, добавьте ключевое слово «a ждать» перед функцией buyeggs, чтобы указать механизм JavaScript, что выполнение кода должно быть приостановлено, пока обещание не будет разрешено от функции buleggs.

//Function getCake calls the buyEggs & bakeCake functions
//The async keyword to the getCake function indicates that the function needs to be run asynchronously
//The await keyword to function call buyEggs ensures that 
//the code execution will not proceed unless the promise is returned from buyEggs()
const getCake = async function() {
    //Buy Eggs
    const eggs = await buyEggs(); //Adding await ensures that code execution is paused until promise is resolved
    console.log(eggs); // Output -> Eggs

    //Bake Cake
    const cake = bakeCake();
    console.log(cake); // Output -> Cake
}

//Function Buy Eggs returns a promise after 2 seconds
const buyEggs = function() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Eggs');
        }, 2000);
    });
}

//Bake cake returns cake - But Cake can only be baked after buying eggs
const bakeCake = function() {
    return 'Cake';
}

//Call the getCake() async method
getCake();

// Program Output
//Eggs
//Cake

Async возвращает обещание по умолчанию

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

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

То, что я хотел показать в том примере, было то, как функция ведет себя внутренне, когда ключевое слово «Async» добавляется перед ним.

//The below function will return a promise when the 'async' keyword is added 
async function buyEggs(){
    //Do something
}

//The above is same as the below one
function buyEggs() {
    const promise = new Promise((resolve, reject) {
        //Do something
    });
    return promise; 
}

Давайте посмотрим на фактический код кода

//The Sum function is indicated with the 'async' keyword
//Hence the sum of two numbers x & y is wrapped inside a promise
async function sum(x, y) {
    return x + y;
}

//When the async function 'sum' is invoked
//It returns a promise and the return value can be accessed using 'then'
sum(2, 3).then(result => console.log(result));

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

Давайте возьмем пример выше GetCake и посмотрите, что произойдет, когда мы удаляем ключевое слово Async, но сохраняйте ключевое слово await, рядом с функцией buleggs.

/*
    getCake Function without the async keyword
    await is added to the buyEggs function
*/
const getCake = function() {
    //Buy Eggs
    const eggs = await buyEggs(); //Adding await ensures that code execution is paused until promise is resolved
    console.log(eggs); // Output -> Eggs

    //Bake Cake
    const cake = bakeCake();
    console.log(cake); // Output -> Cake
}

//Output -> Uncaught SyntaxError: await is only valid in async function

Как видите, ошибка синтаксиса высказана «a ждать» может использоваться только внутри асинхронизации. Я думаю, что причина этого заключается в том, что когда JavaScript уведомляет ключевое слово «await», он сначала смотрит на родительскую функцию async, она присутствует внутри и когда она не может найти один, он в конечном итоге жалуется, что вы нарушили декларативный Правила асинхронизации/ждут.

Обработка ошибок

Наконец, последняя тема о Async/aNAIT – это то, как нам нужно приблизиться к обработке ошибок. Если вы помните у примеров обещаний, у нас было «Тогда», а также блок «поймать», который использовался для обработки ошибок.

Использование обещания – Catch Block для обработки ошибок

//Using Promises
const someAsyncFn = function() {
    return new Promise((resolve, reject)) {
            if(someCondition) {
                    resolve(data);
            } else {
                    reject(err);
            }
    }
}

//Invoking someAsyncFn
someAsyncFn
.then(data => console.log(data));
.catch(err => console.log(err)); //Error Handling is done through the 'catch' block

Использование Async/a enaiq – Обработка ошибок с использованием блока TRY/CALL

В нижеприведенном ниже примере код внутри «ASYNC» Функция Fethfruits завернут в попытку и блоке Catch. Когда обещание возвращается «решено», то функция «UpdateUi» вызывается.

Когда обещание решено:

//Using Async Await
const fetchFruits = async function() {
    try {
        const fruits = await getFruits();
        updateUI(fruits);
    } catch (e) {
        showError(e);
    }
}

function getFruits() {
    return new Promise((resolve, reject) => {
        resolve(['apple', 'orange', 'banana']);
    });
}

function updateUI(items) {
    let output = '';
    items.forEach(item => {
        output += `
        ${item}        
        `
    })
    const list = document.querySelector('.list-item');
    list.innerHTML += output;
}

function showError(e) {
    const error = document.querySelector('#error');
    error.appendChild(document.createTextNode(e));
}

fetchFruits();

Когда обещание отклоняется, функция «Showhror», определенная в блоке CATH, будет выполнена, как показано в коде ниже.

Когда обещание отклонено:

//Using Async Await
const fetchFruits = async function() {
    try {
        const fruits = await getFruits();
        updateUI(fruits);
    } catch (e) {
        showError(e);
    }
}

function getFruits() {
    return new Promise((resolve, reject) => {
        reject(['apple', 'orange', 'banana']);
    });
}

function updateUI(items) {
    let output = '';
    items.forEach(item => {
        output += `
        ${item}        
        `
    })
    const list = document.querySelector('.list-item');
    list.innerHTML += output;
}

function showError(e) {
    const error = document.querySelector('#error');
    error.appendChild(document.createTextNode(e));
}

fetchFruits();

Вы можете играть с кодом сюда

Самым большим преимуществом использования ASYNC/enQUIAT является то, что он делает код гораздо более читаемыми и поддерживаемыми. Это заставляет код чувствовать, что он упорядочивается и структурирован аналогично, как будто он синхронно.

Вывод

Быстрый отвод того, что мы покрывали в этой статье:

Что такое асинхр/ждут?
Как они работают?
Async Функции возвращают обещание по умолчанию.
Обработка ошибок

Я надеюсь, что вам понравилось серию из трех частей на асинхронных функциях. Не забудьте связаться со мной в Twitter @skaytech

Вы также можете понравиться:

JavaScript объекты
Функции JavaScript
Война – var vs пусть vs const
ES6 ⇒ Функции стрелки
Setimeout VS Setinterval

Оригинал: “https://dev.to/skaytech/async-functions-chapter-3-async-await-89”