javascript的promise

BakerJ 發(fā)布于2019-08-23 15:22 / 2800人閱讀

摘要：函數(shù)將返回對(duì)象如果成功，獲得響應(yīng)內(nèi)容如果失敗，獲得響應(yīng)代碼實(shí)現(xiàn)原理例異步請(qǐng)求一些處理為數(shù)組，因?yàn)榭赡芡瑫r(shí)有很多個(gè)回調(diào)同時(shí)執(zhí)行和，并在它們都完成后執(zhí)行獲得一個(gè)由于執(zhí)行較快，的將獲得結(jié)果。仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄

"use strict";
// ajax函數(shù)將返回Promise對(duì)象:
function ajax(method, url, data) {
    var request = new XMLHttpRequest();
    return new Promise(function (resolve, reject) {
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject(request.status);
                }
            }
        };
        request.open(method, url);
        request.send(data);
    });
}

var log = document.getElementById("test-promise-ajax-result");
var p = ajax("GET", "/api/categories");
p.then(function (text) { // 如果AJAX成功，獲得響應(yīng)內(nèi)容
    log.innerText = text;
}).catch(function (status) { // 如果AJAX失敗，獲得響應(yīng)代碼
    log.innerText = "ERROR: " + status;
});

實(shí)現(xiàn)原理

//例1
function getUserId() {
    return new Promise(function(resolve) {
        //異步請(qǐng)求
        http.get(url, function(results) {
            resolve(results.id)
        })
    })
}

getUserId().then(function(id) {
    //一些處理
})

function Promise(fn) {
    var value = null,
        callbacks = [];  //callbacks為數(shù)組，因?yàn)榭赡芡瑫r(shí)有很多個(gè)回調(diào)

    this.then = function (onFulfilled) {
        callbacks.push(onFulfilled);
    };

    function resolve(value) {
        callbacks.forEach(function (callback) {
            callback(value);
        });
    }

    fn(resolve);
}

Promise.all()

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, "P1");
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, "P2");
});
// 同時(shí)執(zhí)行p1和p2，并在它們都完成后執(zhí)行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 獲得一個(gè)Array: ["P1", "P2"]
});

Promise.race()

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, "P1");
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, "P2");
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // "P1"
});
//由于p1執(zhí)行較快，Promise的then()將獲得結(jié)果"P1"。p2仍在繼續(xù)執(zhí)行，但執(zhí)行結(jié)果將被丟棄

云服務(wù)器 GPU云服務(wù)器 Promises promise promises異步 Promise使用

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

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

相關(guān)文章

JavaScript引擎是如何工作的？從調(diào)用棧到Promise你需要知道的一切

摘要：最受歡迎的引擎是，在和中使用，用于，以及所使用的。怎么處理每個(gè)引擎都有一個(gè)基本組件，稱為調(diào)用棧。也就是說(shuō)，如果有其他函數(shù)等待執(zhí)行，函數(shù)是不能離開(kāi)調(diào)用棧的。每個(gè)異步函數(shù)在被送入調(diào)用棧之前必須通過(guò)回調(diào)隊(duì)列。例如方法是在中傳遞的回調(diào)函數(shù)。 ? 翻譯：瘋狂的技術(shù)宅原文：www.valentinog.com/blog/engine… 從Call Stack，Global Me...

zzbo 2019-06-18 11:16 評(píng)論0 收藏0
JavaScript 異步

摘要：從最開(kāi)始的到封裝后的都在試圖解決異步編程過(guò)程中的問(wèn)題。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。寫一個(gè)符合規(guī)范并可配合使用的寫一個(gè)符合規(guī)范并可配合使用的理解的工作原理采用回調(diào)函數(shù)來(lái)處理異步編程。 JavaScript怎么使用循環(huán)代替(異步)遞歸問(wèn)題描述在開(kāi)發(fā)過(guò)程中，遇到一個(gè)需求：在系統(tǒng)初始化時(shí)通過(guò)http獲取一個(gè)第三方服務(wù)器端的列表，第三方服務(wù)器提供了一個(gè)接口，可通過(guò)...

tuniutech 2019-08-21 18:34 評(píng)論0 收藏0
JavaScript引擎是如何工作的？從調(diào)用棧到Promise你需要知道的一切

摘要：最受歡迎的引擎是，在和中使用，用于，以及所使用的。單線程的我們說(shuō)是單線程的，因?yàn)橛幸粋€(gè)調(diào)用棧處理我們的函數(shù)。也就是說(shuō)，如果有其他函數(shù)等待執(zhí)行，函數(shù)是不能離開(kāi)調(diào)用棧的。每個(gè)異步函數(shù)在被送入調(diào)用棧之前必須通過(guò)回調(diào)隊(duì)列。翻譯：瘋狂的技術(shù)宅原文：https://www.valentinog.com/bl... 本文首發(fā)微信公眾號(hào)：前端先鋒歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 sh...

Simon_Zhou 2019-08-26 13:49 評(píng)論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護(hù)很多人說(shuō)，阮老師已經(jīng)有一本關(guān)于的書了入門，覺(jué)得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開(kāi)發(fā)過(guò)程中，顯得越來(lái)越重要。為了讓編程更美好，我們就需要引入來(lái)降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書（中文版）超詳細(xì)介紹promise的gitbook，看完再不會(huì)promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評(píng)論0 收藏0
異步 JavaScript 與 Promise

摘要：為這些回調(diào)函數(shù)分別命名并分離存放可以在形式上減少嵌套，使代碼清晰，但仍然不能解決問(wèn)題。如果在一個(gè)結(jié)束成功或失敗，同前面的說(shuō)明后，添加針對(duì)成功或失敗的回調(diào)，則回調(diào)函數(shù)會(huì)立即執(zhí)行。異步？我在很多地方都看到過(guò)異步(Asynchronous)這個(gè)詞，但在我還不是很理解這個(gè)概念的時(shí)候，卻發(fā)現(xiàn)自己常常會(huì)被當(dāng)做已經(jīng)很清楚(*￣?￣)。如果你也有類似的情況，沒(méi)關(guān)系，搜索一下這個(gè)詞，就可以得到大致...

livem 2019-08-21 10:26 評(píng)論0 收藏0
javascript異步之Promise.all()、Promise.race()、Promise.

摘要：的執(zhí)行與狀態(tài)無(wú)關(guān)當(dāng)?shù)玫綘顟B(tài)不論成功或失敗后就會(huì)執(zhí)行，原文鏈接參考鏈接對(duì)象同期異步系列文章推薦談一談javascript異步j(luò)avascript異步中的回調(diào)javascript異步與promisejavascript異步之Promise.resolve()、Promise.reject()javascript異步之Promise then和catchjavascript異步之a(chǎn)sync...

clasnake 2019-08-23 14:53 評(píng)論0 收藏0