如何處理調用另一個異步代碼的異步代碼[AngularJs]

Question

我有使用indexedDB和方法getRecipe的工廠，該工廠需要此索引數據庫來接收數據。

問題在於indexedDB在異步調用中返回其實例，而getRecipe是在異步調用中返回其值的另一種方法。

我嘗試通過承諾解決問題，但失敗了。

app.factory('RecipesStorage', ['$q', function($q) { 
var getDb = function () {
   var deferred = $q.defer();

   var db;
   var request = indexedDB.open('recipes', 1);

   request.onupgradeneeded = function (e) {
       console.log('Upgrading indexedDb');
       var thisDb = e.target.result;

       if (!thisDb.objectStoreNames.contains('recipe')) {
           thisDb.createObjectStore('recipe');
       }
   }

   request.onsuccess = function (e) {
       db = e.target.result;
       window.db = db;
       deferred.resolve(db);
   }

   request.onerror = function (e) {
       console.error('Error when opening indexedDB');
   }

   return deferred.promise;
};

var getRecipe = function (recipeId, callback) {
        getDb().then(function(db) {
            var transaction = db.transaction(['recipe'], 'readonly');
            var objectStore = transaction.objectStore('recipe');

            var data = objectStore.get(recipeId);

            data.onsuccess = function (e) {
                var result = e.target.result;
                console.log('GetRecipe:', result);
                callback(result);
            }

            data.onerror = function (e) {
                console.error('Error retrieving data from indexedDB', e);
            }
        });
};

return {getRecipe:getRecipe};
}]);

但這確實有效。 在getRecipe中，此函數不會被調用。 我不知道哪里出了問題。

Answer 1

我們可以使用承諾鏈來使其工作。

（我沒有數據庫，所以我模擬了異步響應並使用$q包裝了數據）

演示小提琴

fessmodule.controller('fessCntrl', function ($scope, RecipesStorage) {

    $scope.alertSwap = function () {
       RecipesStorage.getDb()
                        .then(function (result) {
                           $scope.data = result;                           
                        }, function (result) {
                            alert("Error: No data returned");
                        });
    }

});

fessmodule.$inject = ['$scope', 'RecipesStorage'];

fessmodule.factory('RecipesStorage', ['$q', function ($q) {

    var getDb = function () {        
        var data = [{
            "PreAlertInventory": "5.000000",
            "SharesInInventory": "3.000000"
        } ];   
        var deferred = $q.defer();
        deferred.resolve(data);
        return getRecipe(data);        
    };

    var getRecipe = function(db){    
        var data = [{        
            "TotalSharesBought": "0.000000",
            "TotalShareCost": "0.000000",
            "EstimatedLosses": "0.000000"
        }]; 
        db.push(data[0]);
        var deferred = $q.defer();
        deferred.resolve(db);
        return deferred.promise;
    }

    var factory = {
        getDb: getDb
    };

    return factory;
}]);

參考

• 您可以鏈接承諾以創建代碼流
• 錯誤會傳播，因此您可以在鏈的末端抓住它

Answer 2

我看不到您的代碼中的問題。 也許這個助聽器可以幫助您找出問題所在。 我是根據您的代碼創建的，它顯然可以工作。

Answer 3

真正的問題是在我的版本中，我在1.0.8版中使用了angular，但是當我將其切換到1.2.0版時，它開始按預期方式工作。 謝謝 ：）