《JavaScript Promise迷你書》讀書筆記

Aldous 發(fā)布于2019-08-19 17:31 / 1950人閱讀

摘要：定義是抽象異步處理對象以及對其進(jìn)行各種操作的組件簡言之，使用就是將中異步的方式變換成同步來操作。如果對異步回調(diào)函數(shù)進(jìn)行同步調(diào)用的話，處理順序可能會與預(yù)期不符，可能帶來意料之外的后果。如果想在將來某時(shí)刻調(diào)用異步回調(diào)函數(shù)的話，可以使用等異步。

promise定義

Promise是抽象異步處理對象以及對其進(jìn)行各種操作的組件

簡言之，使用Promise就是將javascript中異步的方式變換成同步來操作。Promise則是把類似的異步處理對象和處理規(guī)則進(jìn)行規(guī)范化，并按照采用統(tǒng)一的接口來編寫，規(guī)定方法之外的寫法都會報(bào)錯。簡單的示例：

    var promise = getAsyncPromise("fileA.txt"); //處于Pending狀態(tài)，既不是resolve也不是reject的狀態(tài)。是promise對象剛被創(chuàng)建后的初始化狀態(tài)
    promise.then(function(result){
        // 獲取文件內(nèi)容成功時(shí)的處理 成功時(shí)狀態(tài)為onFulfilled
    }).catch(function(error){
        // 獲取文件內(nèi)容失敗時(shí)的處理 失敗時(shí)狀態(tài)為onRejected
    });

其中，then和catch代表函數(shù)執(zhí)行成功和失敗的預(yù)設(shè)操作

構(gòu)建promise對象,使用new關(guān)鍵字

    var promise = new Promise(function(resolve, reject) {
        // 異步處理
        // 處理結(jié)束后、調(diào)用resolve 或 reject
    });

對象方法 then

    promise.then(onFulfilled, onRejected); //onFulfilled函數(shù)會在promise對象的revolve狀態(tài)調(diào)用，onRejected為在promise對象reject狀態(tài)下調(diào)用
    promise.catch(function());//catch用來代替onRejected拋出錯誤

promise對象中內(nèi)置部分靜態(tài)方法

如Promise.all() ， Promise.race，Promise.resolve(),Promise.reject等

創(chuàng)建XHR的promise對象

function getURL(URL) {
return new Promise(function (resolve, reject) {
    var req = new XMLHttpRequest();
    req.open("GET", URL, true);
    req.onload = function () {
        if (req.status === 200) {
            resolve(req.responseText);//傳入resolve中的參數(shù)會在狀態(tài)改變的時(shí)候，傳到then中
        } else {
            reject(new Error(req.statusText));
        }
    };
    req.onerror = function () {
        reject(new Error(req.statusText));
    };
    req.send();
});
}
// 運(yùn)行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value){
console.log(value);
}).catch(function onRejected(error){
console.error(error);
});

Promise.resolve

作用1. Promise.resolve 是 new Promise(func)的快捷方式，如Promise.resolve(42); 與 new Promise(function(resolve){ resolve(42);});
作用2. 將thenable 對象轉(zhuǎn)換為promise對象。thenable指的是一個(gè)具有 .then方法的對象。

Promise.reject

Promise.reject(new Error("出錯了"))

等價(jià)于

new Promise(function(resolve,reject){
    reject(new Error("出錯了"));
});

使用

Promise.reject(new Error("BOOM!")).catch(function(error){
    console.error(error);
});

promise對象立刻進(jìn)入resolve狀態(tài)

var promise = new Promise(function (resolve){
    console.log("inner promise"); // 1
    resolve(42);
});
promise.then(function(value){
    console.log(value); // 3
});
console.log("outer promise"); // 2

輸出結(jié)果為 1,2,3; 即使resolve立即執(zhí)行，得出的結(jié)果也在下一個(gè)時(shí)間環(huán)里，需要等到下一周期才能執(zhí)行

1.絕對不能對異步回調(diào)函數(shù)（即使在數(shù)據(jù)已經(jīng)就緒）進(jìn)行同步調(diào)用。
2.如果對異步回調(diào)函數(shù)進(jìn)行同步調(diào)用的話，處理順序可能會與預(yù)期不符，可能帶來意料之外的后果。
3.對異步回調(diào)函數(shù)進(jìn)行同步調(diào)用，還可能導(dǎo)致棧溢出或異常處理錯亂等問題。
4.如果想在將來某時(shí)刻調(diào)用異步回調(diào)函數(shù)的話，可以使用 setTimeout 等異步API。

對比三段代碼：

第一段：直接判斷文件是否加載完成

function onReady(fn) {
    var readyState = document.readyState;
    if (readyState === "interactive" || readyState === "complete") {
        fn();
    } else {
        window.addEventListener("DOMContentLoaded", fn);
    }
}
onReady(function () {
    console.log("DOM fully loaded and parsed");
});
console.log("==Starting==");

第二段：使用setTimeout轉(zhuǎn)同步為異步操作

function onReady(fn) {
    var readyState = document.readyState;
    if (readyState === "interactive" || readyState === "complete") {
        setTimeout(fn, 0); //使用setTimeout轉(zhuǎn)化同步函數(shù)為異步函數(shù)
    } else {
        window.addEventListener("DOMContentLoaded", fn);
    }
}
onReady(function () {
    console.log("DOM fully loaded and parsed");
});
console.log("==Starting==");

第三段：使用promise的resolve將統(tǒng)一為異步的方式，減少判斷

    function onReadyPromise() {
    return new Promise(function (resolve, reject) {
        var readyState = document.readyState;
        if (readyState === "interactive" || readyState === "complete") {
            resolve();
        } else {
            window.addEventListener("DOMContentLoaded", resolve);
        }
    });
}
onReadyPromise().then(function () {
    console.log("DOM fully loaded and parsed");
});
console.log("==Starting==");

關(guān)于傳遞參數(shù)promise的寫法

function doubleUp(value) {
    return value * 2;
}
function increment(value) {
    return value + 1;
}
function output(value) {
    console.log(value);// => (1 + 1) * 2
}

var promise = Promise.resolve(1);//構(gòu)造一個(gè)返回參數(shù)為1的promise對象
promise
    .then(increment) //此時(shí)increment函數(shù)中傳的vaule值為1
    .then(doubleUp) //此時(shí)doubleUp函數(shù)中傳的vaule值為2
    .then(output) //此時(shí)doubleUp函數(shù)中傳的vaule值為 4
    .catch(function(error){
        // promise chain中出現(xiàn)異常的時(shí)候會被調(diào)用
        console.error(error);
    });

Promise.resolve 和Promise.reject會對函數(shù)中return返回的值進(jìn)行包裝，最終then返回的結(jié)果都是新創(chuàng)建的promise對象

Promise.all的使用

function getURL(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest();
        req.open("GET", URL, true);
        req.onload = function () {
            if (req.status === 200) {
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            }
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}
var request = {
        comment: function getComment() {
            return getURL("http://azu.github.io/promises-book/json/comment.json").then(JSON.parse);
        },
        people: function getPeople() {
            return getURL("http://azu.github.io/promises-book/json/people.json").then(JSON.parse);
        }
    };
function main() {
    return Promise.all([request.comment(), request.people()]);
}
// 運(yùn)行示例
main().then(function (value) {
    console.log(value);
}).catch(function(error){
    console.log(error);
});

證明Promise.all的promise數(shù)組是同時(shí)開始執(zhí)行的

// `delay`毫秒后執(zhí)行resolve
function timerPromisefy(delay) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
var startDate = Date.now();
// 所有promise變?yōu)閞esolve后程序退出
Promise.all([
    timerPromisefy(1),
    timerPromisefy(32),
    timerPromisefy(64),
    timerPromisefy(128)
]).then(function (values) {
    console.log(Date.now() - startDate + "ms");
    // 約128ms
    console.log(values);    // [1,32,64,128]
});

Promise.race 只要有一個(gè)promise對象進(jìn)入 FulFilled 或者 Rejected 狀態(tài)的話，就會繼續(xù)進(jìn)行后面的處理

// `delay`毫秒后執(zhí)行resolve
function timerPromisefy(delay) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(delay);
        }, delay);
    });
}
// 任何一個(gè)promise變?yōu)閞esolve或reject 的話程序就停止運(yùn)行
Promise.race([
    timerPromisefy(1),
    timerPromisefy(32),
    timerPromisefy(64),
    timerPromisefy(128)
]).then(function (value) {
    console.log(value);    // => 1
});


//代碼第二段 
var winnerPromise = new Promise(function (resolve) {
        setTimeout(function () {
            console.log("this is winner");
            resolve("this is winner");
        }, 4);
    });
var loserPromise = new Promise(function (resolve) {
        setTimeout(function () {
            console.log("this is loser");
            resolve("this is loser");
        }, 1000);
    });
// 第一個(gè)promise變?yōu)閞esolve后程序停止
Promise.race([winnerPromise, loserPromise]).then(function (value) {
    console.log(value);    // => "this is winner"
});

不能進(jìn)行錯誤處理的onRejected

function throwError(value) {
    // 拋出異常
    throw new Error(value);
}
// <1> onRejected不會被調(diào)用
function badMain(onRejected) {
    return Promise.resolve(42).then(throwError, onRejected);
}
// <2> 有異常發(fā)生時(shí)onRejected會被調(diào)用
function goodMain(onRejected) {
    return Promise.resolve(42).then(throwError).catch(onRejected);
}
// 運(yùn)行示例
badMain(function(){
    console.log("BAD");
});
goodMain(function(){
    console.log("GOOD");
});

說明：上面代碼中<1>中throwError 拋出了異常，onRejected 指定的函數(shù)也不會被調(diào)用

.then 和 .catch 都會創(chuàng)建并返回一個(gè) 新的 promise對象。 Promise實(shí)際上每次在方法鏈中增加一次處理的時(shí)候所操作的都不是完全相同的promise對象。

云服務(wù)器 GPU云服務(wù)器讀書筆記編程思想讀書筆記大數(shù)據(jù)時(shí)代讀書筆記 javascript書

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/78607.html

發(fā)表評論

登陸后可評論

0條評論

Aldous

男|高級講師

我要關(guān)注我要私信

TA的文章

美妝專題研究報(bào)告（合集）

閱讀 1684·2021-11-23 09:51
EasyUi項(xiàng)目《網(wǎng)上書城》之權(quán)限登陸，注冊，左側(cè)樹形菜單

閱讀 3697·2021-09-26 09:46
當(dāng)過服務(wù)員、快遞員，現(xiàn)在年薪30W，歷盡山河叛逆少年終會成長

閱讀 2198·2021-09-22 10:02
前端—初級階段2(5-8)

閱讀 1999·2019-08-30 15:56
css3 響應(yīng)式神器 calc()

閱讀 3395·2019-08-30 12:51
flex布局的溫故學(xué)習(xí)

閱讀 2286·2019-08-30 11:12
z-index與堆疊上下文

閱讀 2122·2019-08-29 13:23
vue 1.x 組件數(shù)據(jù)傳遞

閱讀 2380·2019-08-29 13:16

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

《JavaScript Promise迷你書》讀書筆記

相關(guān)文章

JS筆記

javascript正則迷你書-筆記

JavaScript正則表達(dá)式迷你書-筆記

【筆記】你不知道的JS讀書筆記——Promise

**一道筆試題引發(fā)的Promise筆記**

發(fā)表評論

0條評論

Aldous

男|高級講師

TA的文章

美妝專題研究報(bào)告（合集）

EasyUi項(xiàng)目《網(wǎng)上書城》之權(quán)限登陸，注冊，左側(cè)樹形菜單

當(dāng)過服務(wù)員、快遞員，現(xiàn)在年薪30W，歷盡山河叛逆少年終會成長

前端—初級階段2(5-8)

css3 響應(yīng)式神器 calc()

flex布局的溫故學(xué)習(xí)

z-index與堆疊上下文

vue 1.x 組件數(shù)據(jù)傳遞

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

《JavaScript Promise迷你書》讀書筆記

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！