84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
最近在做一個小項目,由於team裡面缺少前端工程師,臨時把我抓了過去寫完全沒有經驗的angular。 我看了一些基礎的書,覺得angular中的rest API 非同步傳輸機制非常神奇。 同時也在想,如果你的下一個http請求中的參數需要上一個請求get的結果,又該如何保證一定能拿到參數,不為空值。 我試過將第二或第三個等等http請求放在.success後面,確實是成功的,但是這樣感覺程式碼非常冗餘,嵌套層次也超級多。 請問大家有什麼建議?
樓主建議看看 promise 的巢狀 nest promise 和 promise 鍊式 promise chain
由於angular的$http 內建了兩個快捷方法success 和 error 導致標準的then方法容易讓人忽略.
樓主的需求 可以使用promise then的巢狀 例如
$http1.post().then(function(data){ $http2.post(data.data).then(function(data){ console.log(data); }) })
或用promise chain 鍊式
$http1.post().then(function(data){ return $http2.post(data.data); }).then(function(data){ console.log(data); })
不同的需求可以用不同的promise 形式
例如還有可以使用Q.all方法 讓多個promise都完成在處理事件
$http.get('xxxxx') .success(function(data){ $score.data = data; // do somethint... })
在success的裡面操作,可以確保資料都取得到,這裡有點像是promise的鍊式呼叫。
個人專案裡作為baseService存在的一段程式碼:
/** * 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;
下面是具體的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;
最後在blogConroller大概是這樣:
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; }); }]);
如果後台保證良好的 REST 介面風格的話,建議使用 $resource 官方的插件:
app.factory 'User', ['$resource', ($resource)-> $resource '/api/u/:name', {name: "@name"} ]
這時就可以使用:
app.controller 'mainCtrl', ['$scope', 'User', ($scope, User)-> ... ]
樓主建議看看 promise 的巢狀 nest promise 和 promise 鍊式 promise chain
由於angular的$http 內建了兩個快捷方法success 和 error 導致標準的then方法容易讓人忽略.
樓主的需求 可以使用promise then的巢狀
例如
或用promise chain 鍊式
不同的需求可以用不同的promise 形式
例如還有可以使用Q.all方法 讓多個promise都完成在處理事件
在success的裡面操作,可以確保資料都取得到,這裡有點像是promise的鍊式呼叫。
個人專案裡作為baseService存在的一段程式碼:
下面是具體的postService:
最後在blogConroller大概是這樣:
如果後台保證良好的 REST 介面風格的話,建議使用 $resource 官方的插件:
這時就可以使用: