转换一个简单的ajax调用以使用promise jQuery / AngularJS

时间:2014-06-30 02:31:46

标签: javascript jquery ajax angularjs promise

我有一种在app中使用AJAX调用的通用方法:

function doAjaxCommand(url, type, async, params, successCallback, failCallback) {
    $.ajax({
        url: url,
        type: type,
        async: async,
        dataType: "json",
        data: JSON.stringify(params)
        contentType: "application/json; charset=utf-8",
        success: function(result) {
            if (result.Success) {
                successCallback(result);
            } else {
                if (failCallback !== undefined) {
                    failCallback(result);
                }
                return false;
            }
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
            console.log(xhr);
            console.log(status);
        }    
    });
}

我听说使用promises可以更好地利用异步操作。但是,我不知道如何使用promises。我从来没有使用过它,而且在我读到的一些链接中我并没有得到完整的想法。你能问我一下吗?甚至如何开始思考?

任何帮助都会被贬低,谢谢!

2 个答案:

答案 0 :(得分:2)

实际上,承诺允许更好的方式来组成'回调。定期回调通常会导致“厄运金字塔”。

    step1(function (value1) {
        step2(value1, function(value2) {
            step3(value2, function(value3) {
              step4(value3, function(value4) {
                // Do something with value4
              });
          });
        });
    });

相反,承诺允许扁平的呼叫流程。例如:使用q.js(https://github.com/kriskowal/q)我们可以做

Q.fcall(promisedStep1)
.then(promisedStep2)
.then(promisedStep3)
.then(promisedStep4)
.then(function (value4) {
    // Do something with value4
})
.catch(function (error) {
// Handle any error from all above steps
})
.done();

jquery也支持promise样式

var jqxhr = $.getJSON( "example.json", function() {
     console.log( "success" );
})
.done(function() {
    console.log( "second success" );
})
.fail(function() {
    console.log( "error" );
})
.always(function() {
   console.log( "complete" );
});

但是你应该使用内置的角度承诺。

答案 1 :(得分:0)

我发现这是解释Angularjs对我的承诺最好的事情:

http://andyshora.com/promises-angularjs-explained-as-cartoon.html

如果您计划定期和安心地与后端进行互动,我建议您Restangular

在angularjs中,如果你想使用默认的$http,请参考Angular的文档:

 $http({method: 'GET', url: '/someUrl'}).
    success(function(data, status, headers, config) {
      // this callback will be called asynchronously
      // when the response is available
    }).
    error(function(data, status, headers, config) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

这暴露了承诺successerror 或者你可以做到

 $http({method: 'GET', url: '/someUrl'}).
    then(function(data, status, headers, config) {
      // this callback will be called asynchronously
      // when the response is available
      $scope.users = response.users;
    })

揭示了异步完成时的then承诺,然后做了一些事情。