angular.js - 关于angular中rest API 异步数据传送的问题
淡淡烟草味
淡淡烟草味 2017-05-15 16:51:50
0
4
682

最近在做一个小项目,由于team里面缺少前端工程师,临时把我抓了过去写完全没有经验的angular。
我看了一些基础的书,感到angular中的rest API 异步传输机制非常神奇。
同时也在想,如果你的下一个http请求中的参数需要上一个请求get的结果,又该如何保证一定能拿到参数,不为空值。
我试过将第二个或第三个等等http请求放在.success后面,确实是成功的,但是这样感觉代码非常冗余,嵌套层次也超级多。
请问大家有什么建议?

淡淡烟草味
淡淡烟草味

répondre à tous(4)
習慣沉默

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

phpcn_u1582
$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.

小葫芦

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

}]);
洪涛

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)->
    ...
  ]
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal