最近在做一個(gè)小項(xiàng)目,由于team里面缺少前端工程師,臨時(shí)把我抓了過去寫完全沒有經(jīng)驗(yàn)的angular。
我看了一些基礎(chǔ)的書,感到angular中的rest API 異步傳輸機(jī)制非常神奇。
同時(shí)也在想,如果你的下一個(gè)http請求中的參數(shù)需要上一個(gè)請求get的結(jié)果,又該如何保證一定能拿到參數(shù),不為空值。
我試過將第二個(gè)或第三個(gè)等等http請求放在.success后面,確實(shí)是成功的,但是這樣感覺代碼非常冗余,嵌套層次也超級多。
請問大家有什么建議?
樓主建議看看 promise 的嵌套 nest promise 和 promise 鏈?zhǔn)?promise chain
由于angular的$http 內(nèi)置了兩個(gè)快捷方法success 和 error 導(dǎo)致標(biāo)準(zhǔn)的then方法容易讓人忽略.
樓主的需求 可以使用promise then的嵌套
例如
$http1.post().then(function(data){
$http2.post(data.data).then(function(data){
console.log(data);
})
})
或者用promise chain 鏈?zhǔn)?/p>
$http1.post().then(function(data){
return $http2.post(data.data);
}).then(function(data){
console.log(data);
})
不同的需求可以用不同的promise 形式
例如還有可以使用Q.all方法 使多個(gè)promise都完成在處理事件
$http.get('xxxxx')
.success(function(data){
$score.data = data;
// do somethint...
})
在success的里面操作,可以確保數(shù)據(jù)都獲取到,這里有點(diǎn)像promise的鏈?zhǔn)秸{(diào)用。
個(gè)人項(xiàng)目里作為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 接口風(fēng)格的話,建議使用 $resource 官方的插件:
app.factory 'User', ['$resource', ($resource)->
$resource '/api/u/:name', {name: "@name"}
]
這時(shí)就可以使用:
app.controller 'mainCtrl', ['$scope', 'User', ($scope, User)->
...
]