午夜国产狂喷潮在线观看|国产AⅤ精品一区二区久久|中文字幕AV中文字幕|国产看片高清在线

    Javascript異步編程模型Promise模式詳細(xì)介紹
    來(lái)源:易賢網(wǎng) 閱讀:4115 次 日期:2014-05-09 15:03:28
    溫馨提示:易賢網(wǎng)小編為您整理了“Javascript異步編程模型Promise模式詳細(xì)介紹”,方便廣大網(wǎng)友查閱!

    異步模式在 Web 編程中變得越來(lái)越重要,如何處理異步請(qǐng)求后的操作是一件麻煩事。Promise 是一種異步編程模型,術(shù)語(yǔ)稱作 Deferred 模式,它通過(guò)一組API來(lái)規(guī)范化異步操作,讓異步操作的流程控制更加容易。

    Promise 編程模式也被稱為 thenable,可以理解為 延遲后執(zhí)行。每個(gè) Promise 都擁有一個(gè)叫做 then 的唯一接口,當(dāng) Promise 失敗或成功時(shí),它就會(huì)進(jìn)行回調(diào)。它代表了一種可能會(huì)長(zhǎng)時(shí)間運(yùn)行而且不一定必須完成的操作結(jié)果。這種模式不會(huì)阻塞和等待長(zhǎng)時(shí)間的操作完成,而是返回一個(gè)代表了承諾的(promised)結(jié)果的對(duì)象。

    當(dāng)前的許多 JavaScript 庫(kù)(如 jQuery 和 Dojo、AngularJS)均添加了這種稱為 Promise 的抽象。通過(guò)這些庫(kù),開(kāi)發(fā)人員能夠在實(shí)際編程中使用 Promise 模式。

    下面我們將以 jQuery 為例討論 JavaScript 庫(kù)是如何使用 Promise 模式的來(lái)處理異步的,其實(shí)就是通過(guò)回調(diào)的方式提供容錯(cuò)支持。在某個(gè)操作成功或失敗或任何情況下都執(zhí)行對(duì)應(yīng)的回調(diào),盡量把某段邏輯可能出現(xiàn)的情況都 handle 住。

    首先讓我們來(lái)看看 jQuery 一般是如何操作的:

    代碼如下:

    var $info = $("#info");

    $.ajax({

    url:"/echo/json/",

    data: { json: JSON.stringify({"name": "someValue"}) },

    type:"POST",

    success: function(response)

    {

    $info.text(response.name);

    }

    });

    在這個(gè)例子中,你可以看到當(dāng)設(shè)置成功后會(huì)指定一個(gè)回調(diào),是一種很好的回調(diào)方式,這并不是 Promise,jQuery 官方文檔也不再推薦這種方式(http://api.jquery.com/jQuery.ajax/#jqXHR)。 當(dāng) Ajax 調(diào)用完成后,它便會(huì)執(zhí)行 success 函數(shù)。根據(jù)庫(kù)所使用的異步操作,你可以使用各種不同的回調(diào)(即任務(wù)是否成功,都會(huì)進(jìn)行回調(diào),做出響應(yīng))。使用 Promise 模式會(huì)簡(jiǎn)化這個(gè)過(guò)程,異步操作只需返回一個(gè)對(duì)象調(diào)用。這個(gè) Promise 允許你調(diào)用一個(gè)叫做 then 的方法,然后讓你指定回調(diào)的 function(s) 個(gè)數(shù)。

    下面讓我們來(lái)看看 jQuery 是如何建立 Promise 的:

    代碼如下:

    var $info = $("#info");

    $.ajax({

    url: "/echo/json/",

    data: {

    json: JSON.stringify({

    "name": "someValue"

    })

    },

    type: "POST"

    })

    .then(function (response) {

    $info.text(response.name);

    });

    jQuery ajax 對(duì)象通過(guò)返回 xhr 對(duì)象實(shí)現(xiàn) Promise 模式,所以我們可以調(diào)用 then 方法,這樣做的優(yōu)勢(shì)是你可以鏈?zhǔn)秸{(diào)用,實(shí)現(xiàn)獨(dú)立操作,如下所示 :

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

    var $info = $("#info");

    $.ajax({

    url: "/echo/json/",

    data: {

    json: JSON.stringify({

    "name": "someValue"

    })

    },

    type: "POST"

    })

    .then(function (response) {

    $info.text(response.name);

    })

    .then(function () {

    $info.append("...More");

    })

    .done(function () {

    $info.append("...finally!");

    });

    由于許多庫(kù)都開(kāi)始采用 Promise 模式,所以異步操作會(huì)變的非常容易。但如果站在相反的角度思考,Promise 將會(huì)是什么樣子的呢?其中一個(gè)非常重要的模式是函數(shù)可以接受兩種功能,一個(gè)是成功時(shí)的回調(diào),另一個(gè)是失敗時(shí)的回調(diào)。

    代碼如下:

    var $info = $("#info");

    $.ajax({

    // Change URL to see error happen

    url: "/echo/json/",

    data: {

    json: JSON.stringify({

    "name": "someValue"

    })

    },

    type: "POST"

    })

    .then(function (response) {

    // success

    $info.text(response.name);

    },

    function () {

    // failure

    $info.text("bad things happen to good developers");

    })

    .always(function () {

    $info.append("...finally");

    });

    需要注意的是,在 jQuery 里,無(wú)論成功還是失敗,我們都會(huì)使用一個(gè)調(diào)用來(lái)指定我們想要調(diào)用的。

    其實(shí)這里也可以這樣來(lái)寫(xiě),這也是 jQuery 官方文檔里推薦的方法:

    代碼如下:

    var $info = $("#info");

    $.ajax({

    // Change URL to see error happen

    url: "/echo/json/",

    data: {

    json: JSON.stringify({

    "name": "someValue"

    })

    },

    type: "POST"

    })

    .done(function (response) {

    // success

    $info.text(response.name);

    }).fail(function () {

    // failure

    $info.text("bad things happen to good developers");

    })

    .always(function () {

    $info.append("...finally");

    });

    下面再來(lái)看看 AngularJS 是如何使用 Promise 模式的:

    代碼如下:

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

    m.factory("dataService", function ($q) {

    function _callMe() {

    var d = $q.defer();

    setTimeout(function () {

    d.resolve();

    //defer.reject();

    }, 100);

    return d.promise;

    }

    return {

    callMe: _callMe

    };

    });

    function myCtrl($scope, dataService) {

    $scope.name = "None";

    $scope.isBusy = true;

    dataService.callMe()

    .then(function () {

    // Successful

    $scope.name = "success";

    },

    function () {

    // failure

    $scope.name = "failure";

    })

    .then(function () {

    // Like a Finally Clause

    $scope.isBusy = false;

    });

    }

    你可以在 JSFiddle 里試試這些例子,并且看看會(huì)產(chǎn)生哪些效果。使用 Promise 來(lái)操作異步是一種非常簡(jiǎn)單的方式,而且還可以簡(jiǎn)化你的代碼,確實(shí)是一舉兩得的好方法。

    更多信息請(qǐng)查看IT技術(shù)專欄

    更多信息請(qǐng)查看網(wǎng)絡(luò)編程
    易賢網(wǎng)手機(jī)網(wǎng)站地址:Javascript異步編程模型Promise模式詳細(xì)介紹
    由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)!

    2025國(guó)考·省考課程試聽(tīng)報(bào)名

    • 報(bào)班類型
    • 姓名
    • 手機(jī)號(hào)
    • 驗(yàn)證碼
    關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
    工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
    云南網(wǎng)警備案專用圖標(biāo)
    聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
    咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
    云南網(wǎng)警報(bào)警專用圖標(biāo)