成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

$q 實(shí)例分析 Angular 中的 Promise

Render / 438人閱讀

摘要：回調(diào)函數(shù)有兩個(gè)參數(shù)，，分別代表執(zhí)行成功與失敗。有兩個(gè)回調(diào)函數(shù)，分別表示執(zhí)行成功和執(zhí)行失敗的回調(diào)，回調(diào)函數(shù)的參數(shù)為在第一步邏輯中標(biāo)記方法傳入的字符串。鏈?zhǔn)讲僮魅绻羞壿嫷膱?zhí)行需要時(shí)間等待，那么，中回調(diào)函數(shù)的返回值為對(duì)象時(shí)，才能夠按順序執(zhí)行。

相信有一些開發(fā)經(jīng)驗(yàn)的朋友就應(yīng)該知道，對(duì)于JavaScript而言，promise十分重要，在開發(fā)中總能用到。因此掌握好它是一件必須做的事情。

我之前寫過(guò)一篇文章，工作總結(jié)：jQuery高級(jí)應(yīng)用之Deferred對(duì)象，介紹jquery中的promise，因此關(guān)于promise的基礎(chǔ)介紹就不再詳細(xì)講解，這篇文章會(huì)重點(diǎn)關(guān)注angular中promise的實(shí)現(xiàn)。

我們首先有一個(gè)簡(jiǎn)單的html標(biāo)簽，下面的例子都會(huì)基于這個(gè)標(biāo)簽來(lái)書寫

$q

在angular中，$q是一個(gè)非常重要的service。通過(guò)$q，angular有兩種比較常用的方式來(lái)實(shí)現(xiàn)promise，分別是ES6風(fēng)格與jquery風(fēng)格。

ES6風(fēng)格實(shí)現(xiàn)

我們直接來(lái)看看js代碼

angular.module("app", [])
.controller("demoController", function($q, $timeout) {
    var a = 1;
    $q(function(resolve, reject) {
        $timeout(function() {
            if(a == 1) {
                console.log("resolve");
                resolve("hello, JAKE");    
            } else {
                console.log("reject");
                reject("JAKE is not here!")
            }
        }, 2000)
    })
    .then(function(greeting) {
        console.log("success, " + greeting);
    }, function(reason) {
        console.log("failed, " + reason);
    })
})

當(dāng)a==1，輸出結(jié)果為

"resolve"
"success, hello, JAKE"

當(dāng)a!=1，輸出結(jié)果為

"reject"
"failed, JAKE is not here!"

點(diǎn)我查看實(shí)例地址

上例中，我直接將第一步邏輯在$q()中處理?；卣{(diào)函數(shù)有兩個(gè)參數(shù)，resolve, reject，分別代表執(zhí)行成功與失敗。

然后在對(duì)應(yīng)的邏輯里面，使用resolve/reject標(biāo)記邏輯的執(zhí)行狀態(tài)。then方法中的代碼會(huì)在第一步的邏輯執(zhí)行完了才執(zhí)行，為了證明這一點(diǎn)，我在第一步的邏輯中設(shè)置了2秒的延遲。then會(huì)等待第一步執(zhí)行完畢。

then有兩個(gè)回調(diào)函數(shù)，分別表示執(zhí)行成功和執(zhí)行失敗的回調(diào)，回調(diào)函數(shù)的參數(shù)為在第一步邏輯中標(biāo)記方法傳入的字符串。如果第一步邏輯執(zhí)行成功，則會(huì)執(zhí)行then第一個(gè)回調(diào)函數(shù)，如果失敗，則會(huì)執(zhí)行第二個(gè)回調(diào)。

jquery 風(fēng)格

與jquery實(shí)現(xiàn)類似，我們需要定義個(gè)defer對(duì)象，并在第一步邏輯中手動(dòng)返回promise

angular.module("app", [])
.controller("demoController", function($q, $timeout) {
    var a = 1;
    
    $q.when(function() {
        var defer = $q.defer();
        $timeout(function() {
            defer.notify("notify jake.");
            
            if(a == 1) {
                console.log("rsolve");
                defer.resolve("hello, jake");
            }
            else {
                console.log("reject");
                defer.reject("jake is not here.")
            }
        }, 2000);
        return defer.promise;
    }())
    .then(function(greeting) {
        console.log("success, " + greeting);
    }, function(reason) {
        console.log("fail, " + reason);
    }, function(update) {
        console.log("notify, " + update);
    })
})

當(dāng)a==1，輸出結(jié)果為

"rsolve"
"notify, notify jake."
"success, hello, jake"

當(dāng)a!=1 輸出結(jié)果為

"reject"
"notify, notify jake."
"fail, jake is not here."

點(diǎn)擊我查看實(shí)例

Angular 中 Promise 的一些方法，其實(shí)從上面的實(shí)例就已經(jīng)能夠知道promise的大概用法，不算復(fù)雜。

1. then(successCallback, errorCallback, notifyCallback)
從字面上我們就能夠看出then三個(gè)回調(diào)的含義，第二個(gè)參數(shù)與第三個(gè)參數(shù)為可選。

2. catch(errorCallback)
相當(dāng)于 then(null, errorCallback)

3. finally(callback, notifyCallback)
無(wú)論promise的返回狀態(tài)是上面，該方法總是會(huì)執(zhí)行。

鏈?zhǔn)讲僮?/b>

如果then中邏輯的執(zhí)行需要時(shí)間等待，那么，then中回調(diào)函數(shù)的返回值為promise對(duì)象時(shí)，才能夠按順序執(zhí)行。因此需要我們手動(dòng)返回一個(gè)promise對(duì)象，例子如下

var app = angular.module("app", []);

app.controller("demoController", function($q, $timeout) {
    $q.when(function() {
        var defer = $q.defer();
        $timeout(function() {
            console.log("first");
            defer.resolve();
        }, 2000);
        return defer.promise;
    }())
    .then(function() {
        var defer = $q.defer();
        $timeout(function() {
            defer.resolve();
            console.log("second");
        }, 1000);
        return defer.promise;
    })
    .then(function() {
        console.log("third");    
    })
});

"first"
"second"
"third"

點(diǎn)我查看實(shí)例地址
官方文檔中，認(rèn)為then方法中只需要有返回值

但是如果then的執(zhí)行不需要時(shí)間等待，then中的回調(diào)函數(shù)的第一個(gè)參數(shù)，會(huì)獲取到上一個(gè)then的返回值，然后按順序執(zhí)行，如下例。

var app = angular.module("app", []);

app.controller("demoController", function($q, $timeout) {
    
    function first() {
        var a = 1;
        var defer = $q.defer();
        $timeout(function() {
            if(a == 1) {
                console.log("first resolve");
                defer.resolve("resolve result");    
            } else {
                console.log("first reject");
                defer.reject();
            }
        }, 2000)
        return defer.promise;
    }
    
    var promiseA = first();
    
    promiseA.then(function(result) {
        // $timeout(function() {
        console.log("second, " + result);
        return "document";
        // }, 1000)
        
    })
    .then(function(result) {
        console.log("third, " + result);
    })
    
});

輸出結(jié)果為

"first resolve"
"second, resolve result"
"third, document"

點(diǎn)我查看實(shí)例地址

因?yàn)楸硎銎饋?lái)并不是那么容易，因此建議大家通過(guò)實(shí)例慢慢理解。

$http

$http是對(duì)promise的最佳實(shí)踐。由于controller生命周期會(huì)在controller消亡的時(shí)候結(jié)束，其中的數(shù)據(jù)也會(huì)銷毀，因此我們常常會(huì)將獲取數(shù)據(jù)的操作放在自定義的服務(wù)中。因此我們的實(shí)例如下

angular.module("app", [])
.controller("demoController", function(data) {
    data.getData().then(function(resp) {
        console.log(resp);
    })
})
.factory("data", function($http) {
    return {
        getData: function() {
            var url = "https://hq.tigerbrokers.com/fundamental/finance_calendar/get_day/2016-06-26";
            return $http.get(url);    
        }
    }
})

我們將then中回調(diào)函數(shù)的參數(shù)打印出來(lái)，發(fā)現(xiàn)格式如下

Object {
    config: Object {},
    data: Object {},
    headers: function(d) {},
    status: 200,
    statusText: "OK"
}

這一點(diǎn)與jquery的返回值略有不同，他們分別表示的意思為

config： 請(qǐng)求的配置信息
data： 返回的數(shù)據(jù)
headers: 請(qǐng)求的頭部信息
status: 返回的狀態(tài)碼

點(diǎn)擊查看實(shí)例地址

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111304.html

相關(guān)文章

  • $q 實(shí)例分析 Angular 中的 Promise

    摘要：回調(diào)函數(shù)有兩個(gè)參數(shù)，，分別代表執(zhí)行成功與失敗。有兩個(gè)回調(diào)函數(shù)，分別表示執(zhí)行成功和執(zhí)行失敗的回調(diào)，回調(diào)函數(shù)的參數(shù)為在第一步邏輯中標(biāo)記方法傳入的字符串。鏈?zhǔn)讲僮魅绻羞壿嫷膱?zhí)行需要時(shí)間等待，那么，中回調(diào)函數(shù)的返回值為對(duì)象時(shí)，才能夠按順序執(zhí)行。 相信有一些開發(fā)經(jīng)驗(yàn)的朋友就應(yīng)該知道，對(duì)于JavaScript而言，promise十分重要，在開發(fā)中總能用到。因此掌握好它是一件必須做的事情。 我之前...

    高勝山 評(píng)論0 收藏0

  • $q 實(shí)例分析 Angular 中的 Promise

    摘要：回調(diào)函數(shù)有兩個(gè)參數(shù)，，分別代表執(zhí)行成功與失敗。有兩個(gè)回調(diào)函數(shù)，分別表示執(zhí)行成功和執(zhí)行失敗的回調(diào)，回調(diào)函數(shù)的參數(shù)為在第一步邏輯中標(biāo)記方法傳入的字符串。鏈?zhǔn)讲僮魅绻羞壿嫷膱?zhí)行需要時(shí)間等待，那么，中回調(diào)函數(shù)的返回值為對(duì)象時(shí)，才能夠按順序執(zhí)行。 相信有一些開發(fā)經(jīng)驗(yàn)的朋友就應(yīng)該知道，對(duì)于JavaScript而言，promise十分重要，在開發(fā)中總能用到。因此掌握好它是一件必須做的事情。 我之前...

    liaosilzu2007 評(píng)論0 收藏0

  • Angular $q 完全指南

    摘要：假設(shè)家具廠在一周后做完了這個(gè)衣柜，并如約送到了張先生家包郵哦，親，這就叫做衣柜，也就是已解決。這樣，整個(gè)異步流程就圓滿完成，無(wú)論成功或者失敗，張先生都沒有往里面投入任何額外的時(shí)間成本。 如果想使用 $http 或者其他異步操作, 那 $q 是必須要掌握的概念啦. Lets get started! 如何理解$q, deferred object ? 形象的講解angular中的$q與p...

    U2FsdGVkX1x 評(píng)論0 收藏0

  • AngularJS中$q的promise使用及鏈?zhǔn)秸{(diào)用傳值問(wèn)題

    摘要：規(guī)范中文是提供的一個(gè)服務(wù)。實(shí)際調(diào)用這個(gè)方法最終在此處加入到隊(duì)列中定義此處調(diào)用進(jìn)入此處是鏈?zhǔn)秸{(diào)用傳參關(guān)鍵，實(shí)際是上一個(gè)的的返回值，所以能知道，如果需要所有的都能取到異步任務(wù)的返回值，就得在的函數(shù)中，將值返回。 promise是什么 這里不解釋promise是什么，因?yàn)槲蚁嘈拍銇?lái)看文章的時(shí)候已經(jīng)知道你什么是promise了。此處有promise規(guī)范。 Promise/A+規(guī)范 中文Prom...

    hiyayiji 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<