Як $ http синхронного дзвінка з AngularJS

Чи є спосіб здійснити синхронний дзвінок з AngularJS?

Документація AngularJS не дуже чітка або обширна для з'ясування основних елементів.

НА ПОСЛУГІ:

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;
}

Наразі не. Якщо ви подивитеся на вихідний код (з цього моменту жовтень 2012 р.) , Ви побачите, що виклик до відкритого XHR насправді важко закодований, щоб бути асинхронним (третій параметр відповідає дійсності):

 xhr.open(method, url, true);

Вам потрібно буде написати власну службу, яка здійснювала синхронні дзвінки. Як правило, це не те, що ви зазвичай хочете робити через характер виконання JavaScript, ви в кінцевому підсумку блокуєте все інше.

... але .. якщо блокування всього іншого насправді бажано, можливо, ви повинні вивчити обіцянки та послугу $ q . Це дозволяє зачекати, поки буде виконано набір асинхронних дій, а потім виконати щось після того, як всі вони завершені. Я не знаю, у чому полягає ваша справа використання, але це, можливо, варто переглянути.

За межами цього, якщо ви збираєтеся згорнути свій власний, більш детальну інформацію про те , як зробити синхронні і асинхронні виклики Ajax можна знайти тут .

Я сподіваюся, що це корисно.

Я працював з фабрикою, інтегрованою з автозаповненням google Maps, і обіцянками, сподіваюся, ви служите.

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

Вам потрібно замінити цей запит лише на autocompleteService на $ http incuida, який перебуває до заводу.

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

і $ http із запитом

 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;
    });
 });

});

саме питання має бути поставлене на:

deferred.resolve(varResult); 

коли ви зробили добре і прохання:

deferred.reject(error); 

коли є помилка, а потім:

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;
                };

Нещодавно я зіткнувся з ситуацією, коли хотів зробити $ http дзвінки, викликані перезавантаженням сторінки. Рішення, з яким я пішов:

1. Інкапсулює два виклики у функції
2. Передайте другий $ http-дзвінок як зворотний дзвінок у другу функцію
3. Викличте другу функцію в apon .success

Ось спосіб це можна робити асинхронно та керувати речами, як зазвичай. Все ще ділиться. Ви отримуєте посилання на об’єкт, який потрібно оновити. Щоразу, коли ви оновлюєте це у вашій службі, воно оновлюється в усьому світі без необхідності дивитися або повертати обіцянку. Це дійсно приємно, оскільки ви можете оновити базовий об'єкт із сервісу, не маючи необхідності повторно вновлювати його. Використання Angular так, як це призначено для використання. Я думаю, що це, мабуть, погана ідея зробити $ http.get / post синхронним. Ви отримаєте помітну затримку в сценарії.

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();

І десь на виду:

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

Оскільки синхронізація XHR застаріла, краще не покладатися на це. Якщо вам потрібно виконати запит на синхронізацію POST, ви можете використовувати наступні помічники всередині сервісу для імітації форми форми.

Він працює, створюючи форму із прихованими входами, яка розміщується за вказаною URL-адресою.

//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();
}

Модифікуйте відповідно до своїх потреб.

А як щодо того, щоб завершити ваш дзвінок Promise.all()методом, тобто

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

За даними MDN

Promise.all чекає всіх виконань (або першого відхилення)