2016-02-01 4 views
0

У меня есть рабочий запрос $ http.POST на заводе, задача которого - получить объект списка и вернуть его. Просто, как это, кроме свойства объекта, я возвращаю его, чтобы просто расти ноги и листья. Я объясню:Отложенные обещания AngularJS

только немного проблема прямо сейчас, все остальное, кажется, работает нормально, хотя

$scope.updateObj = function(num) { 
    console.log("Obj before:\n" + JSON.stringify($scope.Obj)); 
    $scope.Obj.name = "Obj_" + num; 
    $scope.Obj.list = myFactory.getList($scope.Obj.name); 
    window.setTimeout(console.log("Obj after:\n" + JSON.stringify($scope.Obj)), 3000); 
}; 

В console.log до обновления отображает объект так же, как это определено в myController.js, и console.log после обновления имеет правильную обновленную информацию, но в целом отсутствует свойство списка.

Я установил console.log, проверив Obj после обновления в тайм-аут, чтобы узнать, требуется ли только немного больше времени, но я не думаю, что он работает по назначению. Я думаю, что это асинхронная проблема, но я все еще довольно новичок, и я не очень понимаю, как использовать службу $ q.

tld; dr: Как асинхронно присоединить response.data от $ http до свойства объекта?


myFactory.js

app.factory('myFactory', function($http) { 
    var service = {}; 

    service.getList = function(name) { 
     try { 
      console.log("getting" + name); 
      var temp = $http({ 
       method: 'POST', 
       url: 'yourmom.com', 
       headers: { 
        'Content-Type': 'application/json' 
       }, 
       data: {list: name}, 
       cache: true 
      }).then(
       function success(response) { 
        alert(JSON.stringify(response.data.list)); // <- checks out & is exactly what I expect. 
        return response.data.list; 
       }, 
       function error(response) { 
        throw error(response.status); 
       } 
      ); 
     } 
     catch(err) { 
      alert(err); 
      return undefined; 
     } 
    }; 

    return service; 
}); 

myController.js

app.controller('GUIcontroller', ['$scope', 'myFactory', 'networkFactory', function($scope, myFactory, networkFactory) { 
    $scope.number = undefined; 

    $scope.networkInit = networkFactory.init(); 
    $scope.Obj = { 
     id: 0, 
     name: "", 
     list: {} 
    }; 

    $scope.updateObj = function(num) { 
     console.log("Obj before:\n" + JSON.stringify($scope.Obj)); 
     $scope.Obj.name = "Obj_" + num; 
     $scope.Obj.list = myFactory.getList($scope.Obj.name); 
     console.log("Obj after:\n" + JSON.stringify($scope.Obj)); 
    }; 
}]); 
+0

Вы должны пройти обратный вызов 'setTimeout', вместо вызова' console.log() 'немедленно и передавая ее результат – Bergi

+1

Функция 'getList' должна возвращать обещание (и вы можете опустить try-catch), и вы должны ждать результата обещания вместо использования произвольного тайм-аута – Bergi

ответ

1

Вы должны думать о обещаниях по-разному. Главное преимущество обещаний заключается в том, что вы получаете результат именно тогда, когда это делается, успешно ли оно или выдает ошибку.

Это предлагаемый способ делать то, что вы пытаетесь достичь:

app.factory('myFactory', function($http) { 
    var service = {}; 

    service.getList = function(name) { 
     return $http({ 
       method: 'POST', 
       url: 'yourmom.com', 
       headers: { 
        'Content-Type': 'application/json' 
       }, 
       data: {list: name}, 
       cache: true 
      }); 
    }; 

    return service; 
}); 

app.controller('GUIcontroller', ['$scope', 'myFactory', 'networkFactory', function($scope, myFactory, networkFactory) { 
    $scope.number = undefined; 

    $scope.networkInit = networkFactory.init(); 
    $scope.Obj = { 
     id: 0, 
     name: "", 
     list: {} 
    }; 

    $scope.updateObj = function(num) { 
     $scope.Obj.name = "Obj_" + num; 
     myFactory.getList($scope.Obj.name).then(function(response) { 
      $scope.Obj.list = response; 
     }).catch(function(err) { 
      console.error('Error fetching list: ', err); 
     }); 
    }; 
}]); 
Смежные вопросы