javascript — Angular + requirejs — контроллер не может получить данные возврата ajax с завода?
Мой контроллер не может забрать данные, которые были обработаны с $http.get() в среде requirejs. Любая идея, как я могу это исправить?
UserFactory.js
define(['app'], function (app) {
app.module1.factory('UserFactory', ['$http', function($http) {
//your minsafe controller
var factory = {};
factory.getUsers = function(){
$http.get('api.php').success(function(data) {
// here the data from the api is assigned to a variable named users
return data; // [{"id":"1","name":"Big Kev","email":"[email protected]"},{"id":"2","name":"Judy","email":"[email protected]"},{"id":"3","name":"Suzy","email":"[email protected]"},{"id":"4","name":"Joey","email":"[email protected]"},{"id":"5","name":"DeeD","email":"[email protected]"}]
});
};
return factory;
}]);
});
view.js,
define(['app'], function (app) {
app.module1.controller('View1Ctrl', ['$scope','UserFactory', function($scope,userFactory) {
//your minsafe controller
$scope.message = "Message from View1Ctrl";
$scope.users = userFactory.getUsers();
console.log($scope.users); // undefined
}]);
});
как видите, я получаю undefined за $scope.users, Кажется, что console.log($scope.users); выполняется раньше $http.get('api.php') на заводе. Как я могу это исправить тогда?
Решение
Это не имеет ничего общего с Require; это очень распространенное заблуждение о том, как работает асинхронный код (особенно обещания).
Ты видишь factory.getUsers() делает асинхронный вызов. Ответ будет доступен позже и success будет вызван с ответными данными позже. С другой стороны, $scope.users = userFactory.getUsers() синхронно Почти гарантировано, что асинхронный вызов будет НЕ вернулись ко времени выполнения следующего оператора. И даже если это имеет вернулся, обратный вызов будет НЕ запустить, потому что Javascript является однопоточным в браузере.
Более того, у вас есть еще одна серьезная ошибка: success обратный вызов является «процедурным» в том смысле, что он получает ответ и должен что-то с ним делать. Его возвращаемое значение не учитывается!
Чтобы использовать обещания (или хотя бы $http) правильно в этом случае поменяй factory.getUsers вернуть $http обещание:
factory.getUsers = function(){
return $http.get('api.php');
};
И измените контроллер, чтобы использовать обещание или success/error обратные вызовы:
// option (1) with promise
userFactory.getUsers().then(function(response) {
$scope.users = response.data;
});
// option (2) callback
userFactory.getUsers().success(function(data) {
$scope.users = data;
});
Другие решения
Других решений пока нет …