AngularJS承諾不會及時解決

Question

我正在嘗試檢索數據以用於可在我的整個應用程序中使用的服務。 問題是我無法及時為使用它的例程解析數據。 這是使用它的例程：

function getTranslation(lookup, language) {

            var i = 0;
            if (vm.translations == null) {

                //vm.translations = getAllTranslations();

                dataService.getTranslations()
              .then(function (data) {
                  vm.translations = data;
              });
            }
            var len = vm.translations.length;
            for (var i=0; i < len; i++) {
                if (vm.translations[i].labelName == lookup) {
                    if (language == "English") {
                        return vm.translations[i].english;
                    } else {
                        if (language == "Spanish") {
                            return vm.translations[i].espanol;
                        }
                    }
                }
            }
            return null;
        }

這是該服務中的調用方法：

function getAllTranslations() {
            return vm.translations = dataService.getTranslations()
            .then(function (data) {
                vm.translations = data;
                return vm.translations;
            });

        }

這是dataService中的方法：

function getTranslations() {
            return $http.get('/api/labeltext')
                .then (getTranslationComplete)
                .catch(getTranslationFailed);
            function getTranslationComplete(response) {
                var deferred = $q.defer();
                return response.data;
            }

            function getTranslationFailed(error) {
                alert("XHR failed for frequent pawner report: " + error.responseText);
            }
        }

我仍在學習angularjs，並希望能夠填充服務中的數據，然后從其他控制器調用它。 但是，當我進入for循環時，該數組為空，並且僅在完成后填充該數組。

Answer 1

那是因為在您的for循環觸發之前，諾言將無法解決。 通過將循環放在.then() ，您將可以訪問響應並定義循環值。 這不是DRY，因為如果在函數中添加else ，則必須重復代碼，並且必須添加相同的循環代碼。 為此，我將循環重構為一個外部函數，並僅在getTranslation()的適當區域內調用它。

    function getTranslation(lookup, language) {

        var i = 0;
        if (vm.translations == null) {

            //vm.translations = getAllTranslations();

            dataService.getTranslations()
          .then(function (data) {
              vm.translations = data;

              var len = vm.translations.length;
              for (var i=0; i < len; i++) {
                if (vm.translations[i].labelName == lookup) {
                    if (language == "English") {
                        return vm.translations[i].english;
                    } else {
                        if (language == "Spanish") {
                            return vm.translations[i].espanol;
                        }
                    }
                }
              }
              });
            }

            return null;
        }

Answer 2

由於您的數據來自promise（ $http ），因此所有需要訪問該數據的后續代碼都必須位於then函數內。

angular.controller('myController', function(dataService) {
    var translationsPromise;

    /**
     * Caches translations from /api/labeltext and performs a lookup
     * @param lookup
     * @param language
     */
    function getTranslation(lookup, language) {

        if (translationsPromise == null) {
            translationsPromise = dataService.getTranslations()
        }

        translationsPromise.then(function(data) {
            vm.translations = data;

            var len = vm.translations.length;
            for (var i = 0; i < len; i++) {
                if (vm.translations[i].labelName == lookup) {
                    if (language == "English") {
                        return vm.translations[i].english;
                    } else {
                        if (language == "Spanish") {
                            return vm.translations[i].espanol;
                        }
                    }
                }
            }
        });
    }



    getTranslation('Some Label', 'English').then(function(translation) {
        // The translation that was found is accessible in this block
    });

});

Answer 3

當數據以異步方式導出時，最好緩存諾言而不是數據。 因此，如果在原始承諾被解決之前再次提出了對相同數據的請求，則可以從緩存中檢索該承諾，然后將其返回或以其他方式利用。 緩存的異步數據並非如此，它不能保證在發出另一個請求時已經到達。

function getTranslation(lookup, language) {
    if (!vm.translationsPromise) {
        vm.translationsPromise = dataService.getTranslations();
    }
    return vm.translationsPromise.then(function (data) {
        var lang = {'English':'english', 'Spanish':'espanol'};
        return data.reduce(function(str, item) {
            return (str !== '') ? str : (item.labelName == lookup) ? item[lang[language]] : str;
        }, '');
    });
}