Cách gọi $ http Cuộc gọi đồng bộ với AngularJS

Có cách nào để thực hiện cuộc gọi đồng bộ với AngularJS không?

Tài liệu AngularJS không rõ ràng hoặc bao quát để tìm ra một số nội dung cơ bản.

TRÊN DỊCH VỤ:

myService.getByID = function (id) {
    var retval = null;

    $http({
        url: "/CO/api/products/" + id,
        method: "GET"
    }).success(function (data, status, headers, config) {

        retval = data.Data;

    });

    return retval;
}

Không phải hiện tại. Nếu bạn xem mã nguồn (từ thời điểm này vào thời điểm tháng 10 năm 2012) , bạn sẽ thấy rằng cuộc gọi đến XHR mở thực sự được mã hóa cứng để không đồng bộ (tham số thứ ba là đúng):

 xhr.open(method, url, true);

Bạn cần phải viết dịch vụ của riêng bạn đã thực hiện các cuộc gọi đồng bộ. Nói chung, đó không phải là điều bạn thường muốn làm vì bản chất của việc thực thi JavaScript, cuối cùng bạn sẽ chặn mọi thứ khác.

... nhưng .. nếu chặn mọi thứ khác thực sự mong muốn, có lẽ bạn nên xem xét lời hứa và dịch vụ $ q . Nó cho phép bạn đợi cho đến khi một tập hợp các hành động không đồng bộ được thực hiện, và sau đó thực hiện một cái gì đó sau khi hoàn tất. Tôi không biết trường hợp sử dụng của bạn là gì, nhưng điều đó có thể đáng xem.

Ngoài ra, nếu bạn sẽ tự mình thực hiện, có thêm thông tin về cách thực hiện các cuộc gọi ajax đồng bộ và không đồng bộ có thể được tìm thấy ở đây .

Tôi hi vọng điều đó hữu ích.

Tôi đã làm việc với một nhà máy được tích hợp với google maps tự động hoàn thành và những lời hứa được thực hiện, tôi hy vọng bạn phục vụ.

http://jsfiddle.net/the_pianist2/vL9nkfe3/1/

bạn chỉ cần thay thế dịch vụ tự động hoàn thành theo yêu cầu này bằng $ http incuida trước khi xuất xưởng.

app.factory('Autocomplete', function($q, $http) {

và $ http yêu cầu với

 var deferred = $q.defer();
 $http.get('urlExample').
success(function(data, status, headers, config) {
     deferred.resolve(data);
}).
error(function(data, status, headers, config) {
     deferred.reject(status);
});
 return deferred.promise;

<div ng-app="myApp">
  <div ng-controller="myController">
  <input type="text" ng-model="search"></input>
  <div class="bs-example">
     <table class="table" >
        <thead>
           <tr>
              <th>#</th>
              <th>Description</th>
           </tr>
        </thead>
        <tbody>
           <tr ng-repeat="direction in directions">
              <td>{{$index}}</td>
              <td>{{direction.description}}</td>
           </tr>
        </tbody>
     </table>
  </div>

'use strict';
 var app = angular.module('myApp', []);

  app.factory('Autocomplete', function($q) {
    var get = function(search) {
    var deferred = $q.defer();
    var autocompleteService = new google.maps.places.AutocompleteService();
    autocompleteService.getPlacePredictions({
        input: search,
        types: ['geocode'],
        componentRestrictions: {
            country: 'ES'
        }
    }, function(predictions, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            deferred.resolve(predictions);
        } else {
            deferred.reject(status);
        }
    });
    return deferred.promise;
};

return {
    get: get
};
});

app.controller('myController', function($scope, Autocomplete) {
$scope.$watch('search', function(newValue, oldValue) {
    var promesa = Autocomplete.get(newValue);
    promesa.then(function(value) {
        $scope.directions = value;
    }, function(reason) {
        $scope.error = reason;
    });
 });

});

câu hỏi được thực hiện trên:

deferred.resolve(varResult); 

khi bạn đã làm tốt và yêu cầu:

deferred.reject(error); 

khi có lỗi và sau đó:

return deferred.promise;

var EmployeeController = ["$scope", "EmployeeService",
        function ($scope, EmployeeService) {
            $scope.Employee = {};
            $scope.Save = function (Employee) {                
                if ($scope.EmployeeForm.$valid) {
                    EmployeeService
                        .Save(Employee)
                        .then(function (response) {
                            if (response.HasError) {
                                $scope.HasError = response.HasError;
                                $scope.ErrorMessage = response.ResponseMessage;
                            } else {

                            }
                        })
                        .catch(function (response) {

                        });
                }
            }
        }]


var EmployeeService = ["$http", "$q",
            function ($http, $q) {
                var self = this;

                self.Save = function (employee) {
                    var deferred = $q.defer();                
                    $http
                        .post("/api/EmployeeApi/Create", angular.toJson(employee))
                        .success(function (response, status, headers, config) {
                            deferred.resolve(response, status, headers, config);
                        })
                        .error(function (response, status, headers, config) {
                            deferred.reject(response, status, headers, config);
                        });

                    return deferred.promise;
                };

Gần đây tôi đã gặp phải một tình huống mà tôi muốn thực hiện các cuộc gọi $ http được kích hoạt bởi một trang tải lại. Giải pháp tôi đã thực hiện:

1. Đóng gói hai cuộc gọi thành các chức năng
2. Truyền cuộc gọi $ http thứ hai dưới dạng gọi lại vào chức năng thứ hai
3. Gọi hàm thứ hai trong apon .success

Đây là cách bạn có thể thực hiện không đồng bộ và quản lý mọi thứ như bình thường. Mọi thứ vẫn được chia sẻ. Bạn nhận được một tham chiếu đến đối tượng mà bạn muốn cập nhật. Bất cứ khi nào bạn cập nhật điều đó trong dịch vụ của mình, nó sẽ được cập nhật trên toàn cầu mà không phải xem hoặc trả lại lời hứa. Điều này thực sự tốt vì bạn có thể cập nhật đối tượng cơ bản từ bên trong dịch vụ mà không cần phải rebind. Sử dụng Angular theo cách nó được sử dụng. Tôi nghĩ rằng đó có thể là một ý tưởng tồi để làm cho $ http.get / bài đăng đồng bộ. Bạn sẽ nhận được một độ trễ đáng chú ý trong kịch bản.

app.factory('AssessmentSettingsService', ['$http', function($http) {
    //assessment is what I want to keep updating
    var settings = { assessment: null };

    return {
        getSettings: function () {
             //return settings so I can keep updating assessment and the
             //reference to settings will stay in tact
             return settings;
        },
        updateAssessment: function () {
            $http.get('/assessment/api/get/' + scan.assessmentId).success(function(response) {
                //I don't have to return a thing.  I just set the object.
                settings.assessment = response;
            });
        }
    };
}]);

    ...
        controller: ['$scope', '$http', 'AssessmentSettingsService', function ($scope, as) {
            $scope.settings = as.getSettings();
            //Look.  I can even update after I've already grabbed the object
            as.updateAssessment();

Và một nơi nào đó trong một khung nhìn:

<h1>{{settings.assessment.title}}</h1>

Vì XHR đồng bộ đang bị phản đối, tốt nhất không nên dựa vào điều đó. Nếu bạn cần thực hiện một yêu cầu POST đồng bộ hóa, bạn có thể sử dụng các trợ giúp sau bên trong dịch vụ để mô phỏng bài đăng mẫu.

Nó hoạt động bằng cách tạo một biểu mẫu với các đầu vào ẩn được đăng lên URL được chỉ định.

//Helper to create a hidden input
function createInput(name, value) {
  return angular
    .element('<input/>')
    .attr('type', 'hidden')
    .attr('name', name)
    .val(value);
}

//Post data
function post(url, data, params) {

    //Ensure data and params are an object
    data = data || {};
    params = params || {};

    //Serialize params
    const serialized = $httpParamSerializer(params);
    const query = serialized ? `?${serialized}` : '';

    //Create form
    const $form = angular
        .element('<form/>')
        .attr('action', `${url}${query}`)
        .attr('enctype', 'application/x-www-form-urlencoded')
        .attr('method', 'post');

    //Create hidden input data
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            const value = data[key];
            if (Array.isArray(value)) {
                for (const val of value) {
                    const $input = createInput(`${key}[]`, val);
                    $form.append($input);
                }
            }
            else {
                const $input = createInput(key, value);
                $form.append($input);
            }
        }
    }

    //Append form to body and submit
    angular.element(document).find('body').append($form);
    $form[0].submit();
    $form.remove();
}

Sửa đổi theo yêu cầu cho nhu cầu của bạn.

Điều gì về việc gói cuộc gọi của bạn trong một Promise.all()phương thức tức là

Promise.all([$http.get(url).then(function(result){....}, function(error){....}])

Theo MDN

Promise.all chờ đợi tất cả các thực hiện (hoặc từ chối đầu tiên)