JavaScript переходит в асинхронный город в краю

Известные разработчики JavaScript заметят, насколько это знакомо, поскольку обратные вызовы XHR используются постоянно! Это просто и довольно просто: разработчик создает запрос XHR, а затем предоставляет обратный вызов для указанного объекта XHR.

Напротив, сложность обратного вызова происходит от порядка выполнения, который не является линейным из-за внутренней природы асинхронного кода:

« Ад обратного вызова » может быть даже хуже, если использовать другой асинхронный вызов внутри вашего собственного обратного вызова.

Вторая остановка: ECMAScript 6

ECMAScript 6 набирает обороты, и у Edge пока есть лидирующая поддержка с 88% охватом.

Среди множества значительных улучшений ECMAScript 6 стандартизирует использование обещаний (ранее называвшихся фьючерсами).

Согласно MDN , обещание — это объект, который используется для отложенных и асинхронных вычислений. Обещание представляет собой операцию , которая еще не завершена, но , как ожидается , в будущем. Обещания — это способ организации асинхронных операций таким образом, чтобы они выглядели синхронно. Именно то, что нам нужно для нашего примера XHR.

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

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

var displayDiv = document.getElementById("displayDiv");

// Part 1 - Create a function that returns a promise
function getJsonAsync(url) {
    // Promises require two functions: one for success, one for failure
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();

        xhr.open('GET', url);

        xhr.onload = () => {
            if (xhr.status === 200) {
                // We can resolve the promise
                resolve(xhr.response);
            } else {
                // It's a failure, so let's reject the promise
                reject("Unable to load RSS");
            }
        }

        xhr.onerror = () => {
            // It's a failure, so let's reject the promise
            reject("Unable to load RSS");
        };

        xhr.send();
    });
}

// Part 2 - The function returns a promise
// so we can chain with a .then and a .catch
getJsonAsync("cards.json").then(json => {
    var result = JSON.parse(json);

    result.collection.forEach(card => {
        var div = document.createElement("div");
        div.innerHTML = `${card.name} cost is ${card.price}`;

        displayDiv.appendChild(div);
    });
}).catch(error => {
    displayDiv.innerHTML = error;
});

// Let's create an async anonymous function
(async function() {
    try {
        // Just have to await the promise!
        var json = await getJsonAsync("cards.json");
        var result = JSON.parse(json);

        result.collection.forEach(card => {
            var div = document.createElement("div");
            div.innerHTML = `${card.name} cost is ${card.price}`;

            displayDiv.appendChild(div);
        });
    } catch (e) {
        displayDiv.innerHTML = e;
    }
})();