angularjs 處理多個(gè)異步請(qǐng)求方法匯總

更新時(shí)間：2015年01月06日 08:59:51 投稿：hebedich

這篇文章主要介紹了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í)行。

復(fù)制代碼代碼如下:

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ì)象)的形式傳入。

復(fù)制代碼代碼如下:

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)上的有很多教程。我也是剛接觸。講不好，不敢亂講。上面的代碼是我按我的理解寫的，經(jīng)過(guò)了測(cè)試沒(méi)有問(wèn)題。

您可能感興趣的文章:

相關(guān)文章

AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)星星等級(jí)評(píng)分功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
AngularJS入門之動(dòng)畫
AngularJS中ngAnimate模塊支持動(dòng)畫效果，但是ngAnimate模塊并未包含在AngularJS核心庫(kù)中，因此需要使用ngAnimate需要在定義Module時(shí)聲明對(duì)其的引用。下面通過(guò)本文我們來(lái)看看AngularJS動(dòng)畫的詳細(xì)介紹。
2016-07-07
AngularJS驗(yàn)證信息框架的封裝插件用法【w5cValidator擴(kuò)展插件】
這篇文章主要介紹了AngularJS驗(yàn)證信息框架的封裝插件用法,分析了AngularJS表單驗(yàn)證規(guī)則并實(shí)例說(shuō)明了w5cValidator擴(kuò)展插件的相關(guān)使用技巧,需要的朋友可以參考下
2016-11-11
模板視圖和AngularJS之間沖突的解決方法
這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結(jié)合實(shí)例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下
2016-11-11
Angular如何引入第三方庫(kù)的方法詳解
本篇文章主要介紹了Angular如何引入第三方庫(kù)的方法詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
基于angular實(shí)現(xiàn)樹(shù)形二級(jí)表格
這篇文章主要介紹了angular手寫樹(shù)形二級(jí)表格的完整代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-10-10
AngularJS基礎(chǔ) ng-model-options 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-model-options 指令,這里對(duì)ng-model-options指令的基本資料進(jìn)行整理,有需要的小伙伴可以參考下
2016-08-08
在Angular測(cè)試中使用spy的教程詳解
spy?是一種檢查函數(shù)是否被調(diào)用或提供自定義返回值的方法,我們可以使用spy?來(lái)測(cè)試依賴于服務(wù)的組件,并避免實(shí)際調(diào)用服務(wù)的方法來(lái)獲取值,在本文中,您將學(xué)習(xí)如何在?Angular?項(xiàng)目中使用?Jasmine?spy,需要的朋友可以參考下
2024-03-03
AngularJS基于ui-route實(shí)現(xiàn)深層路由的方法【路由嵌套】
這篇文章主要介紹了AngularJS基于ui-route實(shí)現(xiàn)深層路由的方法,涉及AngularJS路由嵌套操作相關(guān)實(shí)現(xiàn)步驟與技巧,需要的朋友可以參考下
2016-12-12
AngularJS入門教程之更多模板詳解
本文主要介紹AngularJS模板的資料知識(shí)，這里幫大家整理了詳細(xì)的模版資料，及實(shí)現(xiàn)示例代碼，幫助大家學(xué)習(xí)AngularJS的知識(shí)，有需要的小伙伴可以參考下
2016-08-08