angulaire.js - Problèmes liés à la transmission de données asynchrone de l'API Rest dans Angular

Question

Je travaillais récemment sur un petit projet En raison du manque d'ingénieurs front-end dans l'équipe, on m'a temporairement demandé d'écrire Angular sans aucune expérience.
J'ai lu quelques livres de base et j'ai senti que le mécanisme de transmission asynchrone de l'API rest en angulaire est très magique.
Dans le même temps, je réfléchis également, si les paramètres de votre prochaine requête http nécessitent le résultat de la requête précédente, comment garantir que les paramètres peuvent être obtenus et non nuls.
J'ai essayé de mettre la deuxième ou la troisième requête http après .success, et cela a effectivement réussi, mais j'avais l'impression que le code était très redondant et qu'il y avait trop de niveaux d'imbrication.
Avez-vous des suggestions?

Answer 1

L'affiche originale suggérait de jeter un œil à la chaîne de promesses imbriquée et à la chaîne de promesses

Étant donné que $http d'Angular a deux méthodes de raccourci intégrées, succès et erreur, la méthode standard then est facile à ignorer.

L'affiche originale doit alors utiliser l'imbrication de la promesse
Par exemple

$http1.post().then(function(data){
    $http2.post(data.data).then(function(data){
        console.log(data);
 })
})

Ou utilisez la chaîne de promesses

$http1.post().then(function(data){

    return $http2.post(data.data);
}).then(function(data){
    console.log(data);
})

Différentes exigences peuvent utiliser différents formulaires de promesse

Par exemple, vous pouvez également utiliser la méthode Q.all pour compléter plusieurs promesses avant de traiter les événements

Answer 2

$http.get('xxxxx')
     .success(function(data){
         $score.data = data;
         // do somethint...
     })

Opérer avec succès peut garantir que toutes les données sont obtenues. C'est un peu comme l'appel en chaîne de la promesse.

Answer 3

Un morceau de code qui existe en tant que baseService dans un projet personnel :

/**
 * Created by thonatos on 14-11-14.
 */

var ajaxService = angular.module('ASS.service.ajaxService', [])
    .factory('ajaxService', ['$http', function ($http) {

        return ({
            post: post,
            get: get,
            del: del,
            put: put
        });

        function post(url, data) {
            var promise = $http.post(url, data).then(function (response) {
                return response.data;
            });
            return promise;
        }

        function get(url) {
            var promise = $http.get(url).then(function (response) {
                return response.data;
            });
            return promise;
        }

        function del(url) {
            var promise = $http.delete(url, auth).then(function (response) {
                return response.data;
            });
            return promise;
        }

        function put(url, data) {
            var promise = $http.put(url, data).then(function (response) {
                return response.data;
            });
            return promise;
        }
    }]);

module.exports = ajaxService;

Ce qui suit est le postService spécifique :

/**
 * Created by thonatos on 14-11-8.
 */

var _postUrl = '/api/post';
var _postsUrl = '/api/posts'
var _user = 'thonatos';

var postService = angular.module('ASS.service.postService', [])
    .factory('postService', ['ajaxService', function (ajaxService) {

        return ({
            add: _add,
            del: _del,
            rev: _rev,
            get: _get,
            getAll: _getAll
        });

        function _add(post) {

            post.category = post.category.name;
            post.author = _user || 'nobody';
            console.log(post);
            return ajaxService.post(_postUrl, post);
        }

        function _del(pid) {
            return ajaxService.delete(_postUrl + '/' + pid);
        }

        function _rev(pid, post) {
            return ajaxService.put(_postUrl + '/' + pid, post);
        }

        function _get(pid) {
            return ajaxService.get(_postUrl + '/' + pid);
        }

        function _getAll(pager) {
            return ajaxService.get(_postsUrl + '/' + pager);
        }
    }]);

module.exports = postService;

La dernière chose dans blogConroller ressemble probablement à ceci :

blog.controller('blogPostCtrl', ['$scope', '$stateParams', 'postService', function ($scope, $stateParams, postService) {

    var _pid = $stateParams.pid;
    var _post = {};

    postService.get(_pid).then(function (response) {
        _post = response;
        $scope.post = _post;
    });

}]);

Answer 4

Si le backend assure un bon style d'interface REST, il est recommandé d'utiliser le plug-in officiel $resource :

app.factory 'User', ['$resource', ($resource)->
    $resource '/api/u/:name', {name: "@name"}
  ]

Vous pouvez l'utiliser maintenant :

app.controller 'mainCtrl', ['$scope', 'User', ($scope, User)->
    ...
  ]