在 angularJs 中从控制器调用同时$http服务
Calling simultaneous $http services from controller in angularJs?
我正在从angularJs中的控制器调用许多服务,我的一些代码依赖于其他服务结果。有时它运行良好,但有时我会收到未定义的错误,因为服务执行未完成。
如果我正在等待服务执行完成(嵌套代码,即一个服务在另一个服务成功函数等中),这意味着嵌套的$http
请求在父完成后只启动一次,会影响性能。我可以解决这种情况吗?
示例代码,
//init client list
clientService.list().success(function (data, status) {
$scope.clients = data.data;
console.log('clients retrieved');
//sales person
settingService.getSalesPerson().success(function (data, status) {
$scope.sales_persons = data;
console.log('sales persons retrieved');
//init item list
itemService.list().success(function (data, status) {
$scope.items = data.data;
console.log('items retrieved');
//quotation settings
settingService.getQuotationSettings().success(function (data, status) {
var qty = data[0];
$scope.quotation.note = data[0].note;
$scope.quotation.terms_and_condition = data[0].terms_and_condition;
console.log('settings retrieved');
//when change client,updating the address
var watchClientModel = function () {
$scope.$watch('selectedClient', function () {
$scope.quotation.client_id = $scope.selectedClient.id;
$scope.quotation.billing_street = $scope.selectedClient.address_info.billing_street;
$scope.quotation.billing_city = $scope.selectedClient.address_info.billing_city;
$scope.quotation.billing_pobox = $scope.selectedClient.address_info.billing_pobox;
$scope.quotation.billing_country = $scope.selectedClient.address_info.billing_country;
$scope.quotation.shipping_street = $scope.selectedClient.address_info.shipping_street;
$scope.quotation.shipping_city = $scope.selectedClient.address_info.shipping_city;
$scope.quotation.shipping_pobox = $scope.selectedClient.address_info.shipping_pobox;
$scope.quotation.shipping_country = $scope.selectedClient.address_info.shipping_country;
});
};
var watchSalesPersonModel = function () {
$scope.$watch('selectedPerson', function () {
$scope.quotation.sales_person_id = $scope.selectedPerson.id;
console.log('Sales person updated');
});
};
//when udpate
if ($scope.isUpdate) {
//Create Quotation
$scope.pageTitle = "Edit Quotation";
$scope.pageTitleIcon = "fa fa-pencil";
//init quotaion details
quotationService.get($routeParams.quotationId).success(function (data, status) {
$scope.quotation = data;
//get clients
$scope.selectedClient = _.findWhere($scope.clients, {id: $scope.quotation.client_id});
console.log('Client preselected');
//get sales person
$scope.selectedPerson = _.findWhere($scope.sales_persons, {id: $scope.quotation.sales_person_id});
console.log('Sales person preselected');
});
} else {
//when insert
$scope.selectedClient = $scope.clients[0];
$scope.selectedPerson = $scope.sales_persons[0];
$scope.quotation.items.push({
'item': null,
'quantity': 0.00,
'rate': 0.00
});
if (qty.auto_generate) {
$scope.quotation.quotation_number = qty.prefix_string + 1000 + Math.floor((Math.random() * 100000) + 1);
}
}
watchClientModel()
watchSalesPersonModel();
});
});
});
});
在这里,我将所有服务调用作为嵌套 ladder.it 工作正常但会影响性能。
如果我把外面的所有服务呼叫都带回来,得到错误是$scope.selectedClient is undefined
如果您有不相互依赖的查询,则可以彼此分开执行它们,然后等待结果:
//init client list
var clients = clientService.list().success(function (data, status) {
$scope.clients = data.data;
console.log('clients retrieved');
});
//sales person
var sales = settingService.getSalesPerson().success(function (data, status) {
$scope.sales_persons = data;
console.log('sales persons retrieved');
});
//init item list
var items = itemService.list().success(function (data, status) {
$scope.items = data.data;
console.log('items retrieved');
});
//quotation settings
var quotes = settingService.getQuotationSettings().success(function (data, status) {
$scope.qty = data[0];
$scope.quotation.note = data[0].note;
$scope.quotation.terms_and_condition = data[0].terms_and_condition;
console.log('settings retrieved');
});
//when change client,updating the address
$scope.$watch('selectedClient', function () {
var selectedClient = $scope.selectedClient,
address_info = selectedClient.address_info,
quotation = $scope.quotation;
quotation.client_id = selectedClient.id;
quotation.billing_street = address_info.billing_street;
quotation.billing_city = address_info.billing_city;
quotation.billing_pobox = address_info.billing_pobox;
quotation.billing_country = address_info.billing_country;
quotation.shipping_street = address_info.shipping_street;
quotation.shipping_city = address_info.shipping_city;
quotation.shipping_pobox = address_info.shipping_pobox;
quotation.shipping_country = address_info.shipping_country;
});
$scope.$watch('selectedPerson', function () {
$scope.quotation.sales_person_id = $scope.selectedPerson.id;
console.log('Sales person updated');
});
// when all finished loading
$q.all([clients, sales, items, quotes]).then(function () {
// when udpate
if ($scope.isUpdate) {
//Create Quotation
$scope.pageTitle = "Edit Quotation";
$scope.pageTitleIcon = "fa fa-pencil";
//init quotaion details
quotationService.get($routeParams.quotationId).success(function (data, status) {
$scope.quotation = data;
//get clients
$scope.selectedClient = _.findWhere($scope.clients, {id: $scope.quotation.client_id});
console.log('Client preselected');
//get sales person
$scope.selectedPerson = _.findWhere($scope.sales_persons, {id: $scope.quotation.sales_person_id});
console.log('Sales person preselected');
});
} else {
//when insert
$scope.selectedClient = $scope.clients[0];
$scope.selectedPerson = $scope.sales_persons[0];
$scope.quotation.items.push({
'item': null,
'quantity': 0.00,
'rate': 0.00
});
if (qty.auto_generate) {
$scope.quotation.quotation_number = $scope.qty.prefix_string + 1000 + Math.floor((Math.random() * 100000) + 1);
}
}
});
相关文章:
- $http服务未触发成功或错误回调
- Http服务工厂将未定义的返回到Angular中的控制器
- 在http服务单元测试中使用request-js时,chai.request不是一个函数
- Angular $http 服务不加载 json 文件
- 在 angularJs 中从控制器调用同时$http服务
- Angular 中的 HTTP 服务将 POST 数据作为请求正文的键发送,没有值
- AngularJS$http服务中的encodeURIComponent
- 从服务器获取数据,并使用$http服务和ng-change在select事件上显示它
- 如何在AngularJS中动态更改$http服务URL
- 如何在Angular中设置异步HTTP服务的回调,以便在不定义数组的情况下在控制器中填充数组
- Angular-使用httpBackend测试http服务会引发意外异常
- 如何在有角度的$http服务请求中将JSONP指定为dataType
- 使用$http服务将数据发布到本地 json 文件时未发现错误
- ES6 发电机与$http服务
- Angular JS:在HTTP服务(POST)中传递输入参数
- 使用 angular 的 $http 服务来调用 js 文件
- AngularJS - 将then()与$http服务一起使用
- AngularJS$http服务中的调用,返回解析的数据,而不是承诺
- 如果可能的话,我应该使用 angularjs $http服务来处理请求还是 jquery ajax
- 如何将异常从 PHP 抛出到 Angular $http 服务