angular.js - Issues about rest API asynchronous data transmission in angular

Question

I was working on a small project recently. Due to the lack of front-end engineers in the team, I was temporarily asked to write Angular with no experience at all.
I read some basic books and felt that the asynchronous transmission mechanism of rest API in angular is very magical.
At the same time, I am also thinking, if the parameters in your next http request require the get result of the previous request, how to ensure that the parameters can be obtained and not null.
I tried putting the second or third http request after .success, and it was indeed successful, but it felt like the code was very redundant and there were too many nesting levels.
Do you have any suggestions?

Answer 1

The author recommends taking a look at the nested promise and promise chain promise chain

Since Angular’s ​​$http has two built-in shortcut methods, success and error, the standard then method is easy to ignore.

The original poster needs to use promise then nesting
For example

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

Or use promise chain

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

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

Different requirements can use different promise forms

For example, you can also use the Q.all method to complete multiple promises before processing events

Answer 2

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

Operation in success can ensure that all data is obtained. It is a bit like the chain call of promise.

Answer 3

A piece of code that exists as baseService in a personal project:

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

The following is the specific postService:

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

The last thing in blogConroller is probably like this:

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

If the backend ensures a good REST interface style, it is recommended to use the $resource official plug-in:

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

You can use it now:

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