在 AngularJS 中同步运行工厂方法

Question

我是AngularJS世界的新手，我正在尝试了解如何在AngularJS同步中运行整个Factry方法。

factory.factory("Connections", function($rootScope, $http, $q) {
var deferred = $q.defer();
var connectionStatus;
console.log("start of factory.factory function");
$http.get('http://localhost:8088/ecus').success(function(response) {
deferred.resolve(response);
console.log(" connection status: " + response.status);
connectionStatus = 'available';
})
.error(function(errResponse) {
deferred.reject({
message: "No connection"
});
//   return deferred.promise;
connectionStatus = 'not available';
console.log(connectionStatus);
});
console.log("end of the factory.factory function");
return [{
id: 'conID1',
pathToImage: 'images/default_test   /eBikeImages/Bionx_creme.png',
title: 'connection 1',
status: connectionStatus,
visible: true,
favorite: true
}];
});

这个想法是从 URL 调用中获取连接状态的值，并在返回值(即 JSON 对象(中使用它。 问题是正在调用工厂，但未分配连接状态的值，并且返回的 JSON 具有连接状态的未定义值。 在控制台中，我看到"工厂开始"和"工厂结束"的日志正在 http 调用之前执行！ 任何帮助将不胜感激:)

Answer 1

你已经在使用承诺服务，这将有助于你异步运行函数。

只需返回$http服务功能即可。这本身就是回报承诺。

在这里我要做什么，

factory.factory("Connections", function($rootScope, $http, $q) {
var deferred = $q.defer();
var connectionStatus;
console.log("start of factory.factory function");
$http.get('http://localhost:8088/ecus').success(function(response) {
console.log(" connection status: " + response.status);
connectionStatus = 'available';
deferred.resolve({
id: 'conID1',
pathToImage: 'images/default_test   /eBikeImages/Bionx_creme.png',
title: 'connection 1',
status: connectionStatus,
visible: true,
favorite: true
});
}).error(function(errResponse) {
connectionStatus = 'not available';
console.log(connectionStatus);
deferred.reject({
message: "No connection",
status: connectionStatus,
});
});
console.log("end of the factory.factory function");
return deferred.promise;
});

工厂的调用方将通过.then函数读取您的值

Answer 2

你想以同步方式运行它，但你依赖于异步执行来完成(即这里的 ajax 调用(， 所以你可以尝试的事情：

1>返回一个承诺，并在调用执行后解决该承诺并填充数据并使用数据进行解析，并在注入最终用途.then(function(data){...})并传递回调以获取数据。 或者你可以返回$http直接返回的承诺。但是，由于您正在编写单独的服务，因此最好返回您感兴趣的数据。

2>es2017 的异步和等待(新功能，可能暂时不支持所有地方(

3>(不推荐，会阻止浏览器一段时间(编写自己的代码以使用XmlHttpRequest进行同步 ajax 调用，就像使用 $http 没有可配置的选项来执行此操作。

4>否则，返回一个引用，并在从服务器获得响应时填充该内部对象，并广播一些有意义的事件，如Connections.ready。(它不是通用解决方案，但可以解决您的问题，因为您在服务中使用角度并注入$rootScope(。

享受编码和异步执行处理:)

Answer 3

请查看更新的代码，只需构造一个新的响应

factory.factory("Connections", function($rootScope, $http, $q) {
var deferred = $q.defer();
var connectionStatus;
console.log("start of factory.factory function");
$http.get('http://localhost:8088/ecus').success(function(response) {
var newResponse = {
'response': response,
'connectionStatus': 'available'
};
deferred.resolve(newResponse);
console.log(" connection status: " + response.status);
connectionStatus = 'available';
})
.error(function(errResponse) {
var newResponse = {
'response': errResponse,
'connectionStatus': 'not available'
};
deferred.reject(newResponse);
connectionStatus = 'not available';
console.log(connectionStatus);
});
console.log("end of the factory.factory function");
return [{
id: 'conID1',
pathToImage: 'images/default_test   /eBikeImages/Bionx_creme.png',
title: 'connection 1',
status: connectionStatus,
visible: true,
favorite: true
}];
});

在控制器中，您将写入

<factory name>.then(successFunction, errorFunction);
function SuccessFunction(data){
console.log(data)
}
function errorFunction(data){
console.log(data)
}