angularjs - example - http get angular 6

$ http publicar en Angular.js

Question

Acabo de empezar a aprender Angular.js. ¿Cómo reescribo el siguiente código en Angular.js?

var postData = "<RequestInfo> "
            + "<Event>GetPersons</Event> "         
        + "</RequestInfo>";

    var req = new XMLHttpRequest();

    req.onreadystatechange = function () {
        if (req.readyState == 4 || req.readyState == "complete") {
            if (req.status == 200) {
                console.log(req.responseText);
            }
        }
    };

    try {
        req.open(''POST'', ''http://samedomain.com/GetPersons'', false);
        req.send(postData);
    }
    catch (e) {
        console.log(e);
    }

Esto es lo que tengo hasta ahora:

function TestController($scope) {
      $scope.persons = $http({
            url: ''http://samedomain.com/GetPersons'',
            method: "POST",
            data: postData,
            headers: {''Content-Type'': ''application/x-www-form-urlencoded''}
        }).success(function (data, status, headers, config) {
                $scope.data = data; // how do pass this to $scope.persons?
            }).error(function (data, status, headers, config) {
                $scope.status = status;
            });

}

html

<div ng-controller="TestController">    
    <li ng-repeat="person in persons">{{person.name}}</li>
</div>

¿Estoy en la dirección correcta?

Answer 1

Aquí hay una variación de la solución dada por Ajay beni . El uso del método permite encadenar múltiples promesas, ya que luego devuelve una nueva promesa.

function TestController($scope) {
    $http({
        url: ''http://samedomain.com/GetPersons'',
        method: "POST",
        data: postData,
        headers: {''Content-Type'': ''application/x-www-form-urlencoded''}
    })
    .then(function(response) {
            // success
        }, 
        function(response) { // optional
            // failed
        }
    );
}

Answer 2

En su función actual si está asignando $scope.persons a $http que es un objeto de promesa, ya que $http devuelve un objeto de promesa.

Entonces, en lugar de asignar scope.persons a $ http, debe asignar $scope.persons dentro del éxito de $http como se menciona a continuación:

function TestController($scope, $http) {
      $http({
            url: ''http://samedomain.com/GetPersons'',
            method: "POST",
            data: postData,
            headers: {''Content-Type'': ''application/x-www-form-urlencoded''}
        }).success(function (data, status, headers, config) {
                $scope.persons = data; // assign  $scope.persons here as promise is resolved here 
            }).error(function (data, status, headers, config) {
                $scope.status = status;
            });

}

Answer 3

usa $ http:

AngularJS: API: $ http

$http.post(url, data, [config]);

Ejemplo de implementación:

$http.post(''http://service.provider.com/api/endpoint'', {
        Description: ''Test Object'',
        TestType: ''PostTest''
    }, {
        headers {
            ''Authorization'': ''Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ=='',
            ''Accept'': ''application/json;odata=verbose''
        }
    }
).then(function (result) {
    console.log(''Success'');
    console.log(result);
}, function(error) {
    console.log(''Error:'');
    console.log(error);
});

Vamos a desglosar esto: Url es un poco obvio, así que saltamos eso ...

1. Datos: Este es el contenido del cuerpo de su solicitud de cartero.

   {
       Description: ''Test Object'',
       TestType: ''PostTest''
   }

2. config: aquí es donde podemos inyectar encabezados, controladores de eventos, almacenamiento en caché ... ver AngularJS: API: $ http: desplazarse hacia abajo para configurar.

   {
       headers {
           ''Authorization'': ''Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ=='',
           ''Accept'': ''application/json;odata=verbose''
       }
   }

3. Respuesta: las acciones $ http devuelven una promesa angular, recomiendo usar .then (successFunction, errorFunction) para procesar esa promesa, consulte AngularJS: The Deferred API (Promises)

   .then(function (result) {
       console.log(''Success'');
       console.log(result);
   }, function(error) {
       console.log(''Error:'');
       console.log(error);
   });