最近在做一个小项目,由于team里面缺少前端工程师,临时把我抓了过去写完全没有经验的angular。 我看了一些基础的书,感到angular中的rest API 异步传输机制非常神奇。 同时也在想,如果你的下一个http请求中的参数需要上一个请求get的结果,又该如何保证一定能拿到参数,不为空值。 我试过将第二个或第三个等等http请求放在.success后面,确实是成功的,但是这样感觉代码非常冗余,嵌套层次也超级多。 请问大家有什么建议?
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
$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)-> ... ]
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
Ou utilisez la chaîne de promesses
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
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 :
Ce qui suit est le postService spécifique :
La dernière chose dans blogConroller ressemble probablement à ceci :
Si le backend assure un bon style d'interface REST, il est recommandé d'utiliser le plug-in officiel $resource :
Vous pouvez l'utiliser maintenant :