AngularJS 中的承诺答案

【问题标题】：Promises in AngularJSAngularJS 中的承诺
【发布时间】：2015-01-01 18:24:10
【问题描述】：

我尝试使用angularjs、$q 加载json 文件并从angular 过滤器返回数据。

我有一个角度滤镜：

MyApp.filter('my_filter', function ($q){
    return function(input){
        var deferred = $q.defer();
        var j = {};

        $.getJSON(url, function(json) {
            j = json;
            deferred.resolve(json);
        });

        return j;

但我得到了{}。如何同步加载json 并从过滤器返回其内容？

谢谢。

【问题讨论】：

在我回答之前，我可以假设您不使用 JSONP 来加载您的 JSON？
为什么我必须使用 JSONP？我从我的服务器得到了 json 文件，没关系。
NONO，你没有使用 JSONP 的事实是 GOOD ，我只是想确定一下。
为什么不直接使用 Angular 的 $http？它将以承诺的形式为您返回响应。您不应该直接在过滤器中执行此操作。您应该将其移至服务。

标签： javascript jquery angularjs promise

【解决方案1】：

您可以同步执行此操作

AngularJS 使用 jqLite，您可以使用 .ajax 创建一个普通的 GET 请求，并像在 jQuery 中一样传递一个 async:false 标志。使所有 AJAX 同步的一种方法是：

$.ajaxSetup({async:false});

您也可以在任何请求的选项部分执行此操作。

但你不应该

真的，AJAX 在设计上是异步的，JavaScript 在执行异步 i/o 方面蓬勃发展，这就是为什么它是一门很棒的语言。如果您执行同步 ajax，屏幕将冻结，直到 AJAX 到达，这将造成非常糟糕的用户体验。

我要做的是从 AJAX 执行方法返回一个 Promise，当它解析时让它更新另一个范围变量，然后过滤 that。更好的是，您可以将上面的代码编写为：

 return $.getJSON(url);

完全避免延迟。使用延迟的称为the deferred anti-pattern。

【讨论】：

另外，getJSON 返回一个promise，因此在这些情况下通常没有理由将它包装在另一个deferred 中。

【解决方案2】：

getJSON 异步工作。我建议你改用ajax。

$.ajax({
  dataType: "json",
  url: url,
}).done( function(json) {
  j = json;
});

【讨论】：

【解决方案3】：

您应该返回驻留在延迟对象中的承诺。您需要做的是将您的返回码替换为：

return deferred.promise;

说明：Promise 是处理异步代码的一种非常好的方法。你喜欢做的是向调用函数返回一个承诺，上面写着“我给你这个承诺，当我的回调函数返回时，我会返回一个结果”，当稍后执行回调时，你应该（实际上是正确地做) 用您想要返回的数据解决延迟。这个解析调用会激活链接到您返回的承诺的“then”函数。

在接收函数上，您应该“等待”要解决的承诺，例如：

functionThatReturnPromise()
.then(function(result){
    //This is a handler function that called when you call "**deferred.resolve(json)**" so **result** object will hold the **json** object.
...})
.then(function(result){
    //Here you can chain promises as much as you want because "**then**" return the same promise.
})
.catch(function(err){
    //If instead of "**deferred.resolve(json)**" you will call "**deferred.reject(someErr)**" you will end up in this handler function
}

【讨论】：