angular.js - 关于angular中rest API 异步数据传送的问题

Question

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

Answer 1

Poster asal mencadangkan untuk melihat rantai janji bersarang dan rantai janji

Memandangkan $http Angular mempunyai dua kaedah pintasan terbina dalam, kejayaan dan ralat, kaedah standard itu mudah diabaikan.

Poster asal perlu menggunakan sarang janji kemudian
Contohnya

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

Atau gunakan rantai janji

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

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

Keperluan yang berbeza boleh menggunakan borang janji yang berbeza

Sebagai contoh, anda juga boleh menggunakan kaedah Q.all untuk melengkapkan berbilang janji sebelum memproses acara

Answer 2

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

Beroperasi dalam kejayaan boleh memastikan bahawa semua data diperolehi sedikit seperti panggilan berantai.

Answer 3

Sekeping kod yang wujud sebagai baseService dalam projek peribadi:

/**
 * 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;

Berikut ialah postService khusus:

/**
 * 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;

Perkara terakhir dalam blogConroller mungkin seperti ini:

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

Jika bahagian belakang memastikan gaya antara muka REST yang baik, adalah disyorkan untuk menggunakan pemalam rasmi $resource:

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

Anda boleh menggunakannya sekarang:

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