angular.js - Isu mengenai penghantaran data tak segerak API rehat dalam sudut

Question

Saya sedang mengerjakan projek kecil baru-baru ini Disebabkan kekurangan jurutera hadapan dalam pasukan, saya telah diminta untuk menulis Angular tanpa pengalaman langsung.
Saya membaca beberapa buku asas dan merasakan bahawa mekanisme penghantaran tak segerak bagi rehat API dalam sudut adalah sangat ajaib.
Pada masa yang sama, saya juga berfikir, jika parameter dalam permintaan http anda yang seterusnya memerlukan hasil permintaan sebelumnya, bagaimana untuk memastikan bahawa parameter boleh diperolehi dan bukan batal.
Saya cuba meletakkan permintaan http kedua atau ketiga selepas .success, dan ia sememangnya berjaya, tetapi rasanya kod itu sangat berlebihan dan terdapat terlalu banyak tahap bersarang.
Adakah anda mempunyai sebarang cadangan?

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)->
    ...
  ]