Какая польза от "обещания" абстракции в CommonJS?

Я читаю эту статью, и раздел об абстракции обещаний кажется мне слишком сложным. В качестве примера приводится следующее:

requestSomeData("http://example.com/foo") // returns a promise for the response
    .then(function(response){ // ‘then’ is used to provide a promise handler
        return JSON.parse(response.body); // parse the body
    }) // returns a promise for the parsed body
    .then(function(data){
        return data.price; // get the price
    }) // returns a promise for the price
    .then(function(price){ // print out the price when it is fulfilled
        print("The price is " + price);
    });

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

requestSomeData("http://example.com/foo")
    .requestHandler(function(response){
        // parse the body
        var data  = JSON.parse(response.body);

        // get the price
        var price = data.price;

        // print out the price
        print("The price is " + price);
    });

ОТВЕТЫ

Ответ 1

Хотя верно, что оба они в конечном итоге совершают одно и то же, разница в том, что ваш второй пример не является асинхронным. Например, рассмотрите, что произойдет, если JSON.parse(...) окажется чрезвычайно дорогостоящей операцией; вам придется висеть, пока все не закончится, что может не всегда быть тем, что вы хотите.

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

Ответ 2

Давайте сравним пример обещания с примером чистого Javascript:

// First we need a convenience function for W3C fiddly XMLHttpRequest.
// It works a little differently from the promise framework.  Instead of 
// returning a promise to which we can attach a handler later with .then(),
// the function accepts the handler function as an argument named 'callback'.

function requestSomeDataAndCall(url, callback) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = resHandler;
    req.open("GET", url, false);
    req.send();
    function resHandler() {
        if (this.readyState==4 && this.status==200) {
            callback(this);
        } else {
            // todo: Handle error.
        }
    }
}

requestSomeDataAndCall("http://example.com/foo", function(res){
    setTimeout(function(){
        var data = JSON.parse(res.responseText);
        setTimeout(function(){
            var price = data.price;
            setTimeout(function(){
                print("The price is "+price);
            },10);
        },10);
    },10);
});

Как отметил Норберт Хартл, JSON.parse() будет висеть в браузере для больших строк. Поэтому я использовал setTimeout() для задержки его выполнения (после паузы в 10 миллисекунд). Это один из примеров решения Криса Коваля. Он позволяет текущему потоку Javascript завершить, освобождая браузер, чтобы представить изменения DOM и прокрутить страницу для пользователя до того, как будет выполнен обратный вызов.

Я надеюсь, что в платформе обещаний commonjs также используется нечто вроде setTimeout, иначе более поздний promises в примере статьи действительно будет работать синхронно, как опасались.

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

function makeResolver(chain) {
    function climbChain(input) {
        var fn = chain.shift();      // This particular implementation
        setTimeout(function(){       // alters the chain array.
            var output = fn(input);
            if (chain.length>0) {
                climbChain(output);
            }
        },10);
    }
    return climbChain;
}

var processChain = [
    function(response){
        return JSON.parse(response.body);
    },
    function(data){
        return data.price; // get the price
    },
    function(price){
      print("The price is " + price);
    }
];

var climber = makeResolver(promiseChain);
requestSomeDataAndCall("http://example.com/foo", climber);

Я надеялся продемонстрировать, что традиционная пересылка обратных вызовов в Javascript в значительной степени эквивалентна promises. Однако после двух попыток, которые, как я показал, со ссылкой на аккуратность кода в исходном примере, promises является гораздо более элегантным решением!

Ответ 3

Второй фрагмент уязвим для атаки на отказ в обслуживании, потому что example.com/foo может просто вернуть недействительный json для сбоя сервера. Даже пустой ответ недействителен JSON (хотя и действительный JS). Это похоже на примеры mysql_* с гладкими отверстиями для инъекций SQL.

И код обещания может быть значительно улучшен. Они равны:

requestSomeData("http://example.com/foo") // returns a promise for the response
    .then(function(response){ // ‘then’ is used to provide a promise handler
        // parse the body
        var data  = JSON.parse(response.body);

        // get the price
        var price = data.price;

        // print out the price
        print("The price is " + price);
    });

и

requestSomeData("http://example.com/foo")
    .requestHandler(function(response){
        try {
            var data = JSON.parse(response.body);
        }
        catch(e) {
            return;
        }

        // get the price
        var price = data.price;

        // print out the price
        print("The price is " + price);
    });

Если мы хотим обработать ошибку, то они будут равны:

requestSomeData("http://example.com/foo") // returns a promise for the response
    .then(function(response){ // ‘then’ is used to provide a promise handler
        // parse the body
        var data  = JSON.parse(response.body);

        // get the price
        var price = data.price;

        // print out the price
        print("The price is " + price);
    }).catch(SyntaxError, function(e) {
        console.error(e);
    });

и

requestSomeData("http://example.com/foo")
    .requestHandler(function(response){
        try {
            var data = JSON.parse(response.body);
        }
        catch(e) {
            //If the above had a typo like `respons.body`
            //then without this check the ReferenceError would be swallowed
            //so this check is kept to have as close equality as possible with
            //the promise code
            if(e instanceof SyntaxError) {
                console.error(e);
                return;
            }
            else {
                throw e;
            }
        }

        // get the price
        var price = data.price;

        // print out the price
        print("The price is " + price);
    });

Ответ 4

Можно также добавить, что преимущество первой версии над второй состоит в том, что она разделяет различные операции в цепочке уточнения (функции не обязательно должны быть записаны на месте). Вторая версия сочетает в себе как низкоуровневый синтаксический анализ с логикой приложения. В частности, использование принципов SOLID в качестве рекомендаций, вторая версия нарушает как OCP, так и SRP.