AngularJS中的承諾

Question

我嘗試用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並從過濾器返回其內容？

謝謝。

Answer 1

您可以同步執行

AngularJS使用jqLit​​e，您可以使用.ajax創建一個普通的GET請求，並將其傳遞給async:false標志，就像在jQuery中一樣。 使所有AJAX同步的一種方法是：

$.ajaxSetup({async:false});

您也可以在任何請求的選項部分中執行此操作。

但是你不應該

實際上，AJAX在設計上是異步的，JavaScript在執行異步I / O方面蒸蒸日上 ，這就是為什么它是一種很棒的語言。 如果執行同步ajax，屏幕將凍結，直到AJAX到達為止，這將帶來非常糟糕的用戶體驗。

我會做的是從AJAX執行方法返回一個承諾，當它解決有它更新另一個范圍變量，過濾器，來代替。 更好的是，您可以將上面的代碼編寫為：

 return $.getJSON(url);

避免完全推遲。 使用該遞歸稱為遞延反模式 。

Answer 2

getJSON工作異步。 我建議您改用ajax 。

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

Answer 3

您應該返回位於延遲對象內的promise。 您需要做的是將您的返回碼替換為：

return deferred.promise;

說明：承諾是處理異步代碼的一種很好的方法。 您想要做的就是返回調用函數一個允諾，其內容類似於“我給您這個允諾，即當我的回調函數將返回時我返回一個結果”，而當您稍后執行回調時，您應該這樣做（實際上是正確的）使用您要返回的數據解決延遲的問題。 此resolve調用激活鏈接到您已返回的諾言的“ 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
}