javascript – 将回调变为承诺

我正在使用google maps api,这段代码正在异步返回一个地方列表.如何在调用所有数据时调用此函数并使其触发？这是我迄今为止尝试过的 –

$.search = function(Boxes) {

    function findNextPlaces(place_results,searchIndex) {
        var dfd = $.Deferred();
        if (searchIndex < Boxes.length) {
            service.radarSearch({
                bounds: Boxes[searchIndex],types: ["food"]
            },function (results,status) {
                if (status != google.maps.places.PlacesServiceStatus.OK) {
                    return dfd.reject("Request["+searchIndex+"] Failed: "+status);
                }
                console.log( "bounds["+searchIndex+"] returns "+results.length+" results" );
                for (var i = 0,result; result = results[i]; i++) {
                    var marker = createMarker(result);
                    place_results.push(result.reference); // marker?
                }
            });
            return dfd.then(findNextPlaces);
        } else {
            return dfd.resolve(place_results).promise();
        }
    }

    return findNextPlaces([],0);
};

解决方法

为了回答标题隐含的问题,“将回调转化为承诺”,简单的答案是使用一个非常简单的“promisifier模式”(我的术语),其中Deferred的.resolve()方法被建立为回调：

带回叫的原始呼叫：

obj.method(param1,param2,... paramN,callbackFn);

已转换的调用,使用延迟包装器：

$.Deferred(function(dfd) {
    obj.method(param1,dfd.resolve);
}).promise();

无论obj.method是否异步,都可以这样做.优点是,您现在可以在同一代码块中使用Deferreds / promises的完整可链接性,或者更常见的是,在其他地方分配或返回生成的Promise.

这是一种在这个问题的情况下可以使用模式的方式……

$.search = function(Boxes,types) {

    function findplaces(Box) {
        var request = {
           bounds: Box,types: types
        };

        //***********************
        // Here's the promisifier
        //***********************
        return $.Deferred(function(dfd) {
            service.radarSearch(request,dfd.resolve);
        }).promise();
        //***********************
        //***********************
        //***********************
    }

    function handleResults(results,status,searchIndex) {
        var message,marker;
        if (status != google.maps.places.PlacesServiceStatus.OK) {
            message = "bounds[" + searchIndex + "] Failed : " + status;
        }
        else {
            message = "bounds[" + searchIndex + "] returns " + results.length + " results";
            for (var i = 0,result; result = results[i]; i++) {
                marker = createMarker(result);
                place_Results.push(result.reference);
            }
        }
        return message;
    }

    var place_Results = [],p = $.when();//resolved starter promise

    //This concise master routine comprises a loop to build a `.then()` chain.
    $.each(Boxes,function(i,Box) {
        p = p.then(function() {
            return findplaces(Box).done(function(results,status) {
                // This function's arguments are the same as the original callback's arguments.
                var message = handleResults(results,i);
                $('#side_bar').append($("<div/>").append(message));
            });
        });
    });

    //Now,chain a final `.then()` in order to make the private var `place_Results` available via the returned promise. For good measure,the `types` array is also repeated back.
    return p.then(function() {
        return {
            types: types,results: place_Results
        };
    });
};

$.search()现在可以使用如下：

$.search(Boxes,["food"]).done(function(obj) {
    alert(obj.results.length + ' markers were a added for: "' + obj.types.join() + '"');
});

DEMO – 注意：由于在jQuery 1.8.3上对jQuery.Deferred.then()进行了重大修订,因此需要jQuery 1.8.3.

这不完全等同于问题中的代码,但可能有助于诊断您报告的问题.特别是,：

>它不会因错误而停止
>它会将成功和错误消息放在’#side_bar’中.

它应该很简单,可以调整代码来做你想做的事情.

原文地址：https://www.jb51.cc/js/150443.html