angularjs 處理多個(gè)異步請(qǐng)求方法匯總
在實(shí)際業(yè)務(wù)中經(jīng)常需要等待幾個(gè)請(qǐng)求完成后再進(jìn)行下一步操作。但angularjs中$http不支持同步的請(qǐng)求。
解決方法一：
$http.get('url1').success(function (d1) {
$http.get('url2').success(function (d2) {
//處理邏輯
});
});
解決方法二：
then中的方法會(huì)按順序執(zhí)行。
var app = angular.module('app',[]);
app.controller('promiseControl',function($scope,$q,$http) {
function getJson(url){
var deferred = $q.defer();
$http.get(url)
.success(function(d){
d = parseInt(d);
console.log(d);
deferred.resolve(d);
});
return deferred.promise;
}
getJson('json1.txt').then(function(){
return getJson('json2.txt');
}).then(function(){
return getJson('json1.txt');
}).then(function(){
return getJson('json2.txt');
}).then(function(d){
console.log('end');
});
});
解決方法三：
$q.all方法第一個(gè)參數(shù)可以是數(shù)組(對(duì)象)。在第一參數(shù)中內(nèi)容都執(zhí)行完后就會(huì)執(zhí)行then中方法。第一個(gè)參數(shù)的方法的所有返回值會(huì)以數(shù)組(對(duì)象)的形式傳入。
var app = angular.module('app',[]);
app.controller('promiseControl',function($scope,$q,$http) {
$q.all({first: $http.get('json1.txt'),second: $http.get('json2.txt')}).then(function(arr){
console.log(arr);
angular.forEach(arr,function(d){
console.log(d);
console.log(d.data);
})
});
});
$q的詳細(xì)使用方法網(wǎng)上的有很多教程。我也是剛接觸。講不好，不敢亂講。上面的代碼是我按我的理解寫(xiě)的，經(jīng)過(guò)了測(cè)試沒(méi)有問(wèn)題。
- Node.js模擬發(fā)起http請(qǐng)求從異步轉(zhuǎn)同步的5種用法
- 原生JavaScript實(shí)現(xiàn)Ajax異步請(qǐng)求
- JavaScript利用fetch實(shí)現(xiàn)異步請(qǐng)求的方法實(shí)例
- 原生JS發(fā)送異步數(shù)據(jù)請(qǐng)求
- 詳解Vuejs2.0之異步跨域請(qǐng)求
- SpringMVC環(huán)境下實(shí)現(xiàn)的Ajax異步請(qǐng)求JSON格式數(shù)據(jù)
- jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
- JS多個(gè)異步請(qǐng)求 按順序執(zhí)行next實(shí)現(xiàn)解析
相關(guān)文章
Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)
這篇文章主要介紹了Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
AngularJS遞歸指令實(shí)現(xiàn)Tree View效果示例
這篇文章主要介紹了AngularJS遞歸指令實(shí)現(xiàn)Tree View效果,結(jié)合實(shí)例形式分析了AngularJS基于遞歸指令實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)層次數(shù)據(jù)的相關(guān)操作步驟與注意事項(xiàng),需要的朋友可以參考下2016-11-11
Angular2.js實(shí)現(xiàn)表單驗(yàn)證詳解
這篇文章主要介紹了Angular2.js實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用
本篇文章主要介紹了Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
Angular 多模塊項(xiàng)目構(gòu)建過(guò)程
這篇文章主要介紹了Angular 多模塊項(xiàng)目構(gòu)建過(guò)程，本文大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
AngularJS ng-bind-template 指令詳解
本文注意介紹AngularJS ng-bind-template 指令,這里把相關(guān)資料整理了一下，并附實(shí)例代碼，有需要的小伙伴可以參考下2016-07-07
AngularJS實(shí)現(xiàn)進(jìn)度條功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)進(jìn)度條功能,結(jié)合具體完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)進(jìn)度條功能的原理、相關(guān)知識(shí)點(diǎn)與注意事項(xiàng),需要的朋友可以參考下2017-07-07
這篇文章主要為大家介紹了Angular 獨(dú)立組件入門(mén)教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本篇文章主要介紹了Angular 封裝并發(fā)布組件的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
解決Angular2 router.navigate刷新頁(yè)面的問(wèn)題
今天小編就為大家分享一篇解決Angular2 router.navigate刷新頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08