前端JavaScript經(jīng)典之Promise詳解
1. Promise 由來(lái)
在以前我們實(shí)現(xiàn)異步是用的回調(diào)函數(shù)，當(dāng)一個(gè)異步請(qǐng)求需要依賴上一個(gè)異步請(qǐng)求返回的結(jié)果的時(shí)候，就會(huì)形成如下這種的調(diào)用結(jié)構(gòu)。
請(qǐng)求1(function (結(jié)果1) {
請(qǐng)求2(function (結(jié)果2) {
請(qǐng)求3(function(結(jié)果3)) {
請(qǐng)求4(function(結(jié)果4) {})
}
});
});這種結(jié)構(gòu)看著很雜亂且不易維護(hù)，被我們親切的叫做 “回調(diào)地獄”。為了解決回調(diào)地獄的問(wèn)題，Promise 就誕生了。
Promise 誕生的使命：優(yōu)雅的去表示異步回調(diào)。
2. Promise 基礎(chǔ)概念
2.1 創(chuàng)建 promise 實(shí)例
Promise 是一個(gè)構(gòu)造函數(shù)，所以我們?cè)谡{(diào)用一個(gè) Promsie 的時(shí)候，要用 new Promsie 的方式去調(diào)用。
const ps = new Promise();
new Promise 接受一個(gè)函數(shù)類型的參數(shù)。這個(gè)函數(shù)又接收兩個(gè)參數(shù) resolve 和 reject，分別對(duì)映成功回調(diào)和失敗回調(diào)。Promise 內(nèi)部有 3 種狀態(tài) pending（進(jìn)行時(shí)），fulfilled（已成功），rejected（已失?。?/strong>。且這三種狀態(tài)是不可逆的，只能由 pending 到 fulfilled，pending 到 rejected。resolve 使 promise 狀態(tài)由 pending 到 fulfilled，reject 使 promise 狀態(tài)由 pending 到 rejected。
const ps = new Promise(function () {});
const ps = new Promise(function (resolve, reject) {
let number = 10;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
2.2 實(shí)例方法
為了更好的控制下一步執(zhí)行，又誕生了三個(gè)實(shí)例方法 then、catch、finally。
2.2.1 then 方法
then 方法一般接受兩個(gè)參數(shù) resolve、reject。分別對(duì)應(yīng)成功時(shí)的回調(diào)和失敗時(shí)的回調(diào)。
成功狀態(tài)的 promise 實(shí)例
const ps1 = new Promise(function (resolve, reject) {
let number = 10;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps1.then(function (res) {
console.log(res);
});
失敗狀態(tài)的 promise 實(shí)例
const ps2 = new Promise(function (resolve, reject) {
let number = 9;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps2.then(
function (res) {},
function (err) {
console.log(err);
}
);
2.2.2 catch 方法
then 方法支持鏈?zhǔn)秸{(diào)用，then 的執(zhí)行嚴(yán)重依賴上一步的結(jié)果，上一步如果沒(méi)有結(jié)果，那么下一步就不會(huì)執(zhí)行。但是每一步都寫(xiě) reject 特別麻煩，所以誕生了 catch，then 就可以省略 reject 方法，reject 方法就交給 catch 執(zhí)行，同時(shí) catch 還可以捕獲執(zhí)行 resolve 的異常。
const ps2 = new Promise(function (resolve, reject) {
let number = 9;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps2
.then(function (res) {})
.catch(function (err) {
console.log(err);
});2.2.3 finally 方法
有的時(shí)候，無(wú)論成功還是失敗都需要執(zhí)行一些操作，就誕生了 finally。我們可以在這做一些清理工作。
const ps2 = new Promise(function (resolve, reject) {
let number = 9;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps2
.then(function (res) {})
.catch(function (err) {
console.log(err);
})
.finally(function () {
console.log("end");
});
2.2.4 then 的鏈?zhǔn)秸{(diào)用
因?yàn)?then 方法支持鏈?zhǔn)秸{(diào)用，所以我們需要知道使用 then 方法會(huì)有什么效果。只要調(diào)用 promise 實(shí)例的 then 方法一定產(chǎn)生一個(gè)新的 promise，這個(gè) promise 的狀態(tài)由里面的函數(shù)決定。函數(shù)什么時(shí)候有結(jié)果，這個(gè)新 promise 狀態(tài)什么時(shí)候由 pending 轉(zhuǎn) fulfilled。catch 和 finally 同理。
const ps = new Promise(function (resolve, reject) {
let number = 10;
if (number >= 10) {
resolve(number);
} else {
reject("number 小于10");
}
});
ps.then(function (res) {
return res * 10;
})
.then(function (res) {
return res + 2;
})
.then(function (res) {
if (res > 100) {
console.log(res);
} else {
console.log("最后結(jié)果小于100");
}
});
3. Promise 原型方法
為了滿足更多的業(yè)務(wù)需要，又誕生了 6 個(gè)原型方法 Promise.all()、Promise.allSettled()、Promise.any()、Promise.race()、Promise.reject()、Promise.resolve()。且都會(huì)返回一個(gè)確定狀態(tài)的 Promsie 對(duì)象。
統(tǒng)一使用兩個(gè)成功異步 ps1、ps2。兩個(gè)失敗異步 ps3、ps4。作為測(cè)試用例。如下：
const ps1 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve("成功結(jié)果1");
}, 1000);
});
const ps2 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve("成功結(jié)果2");
}, 2000);
});
const ps3 = new Promise(function (resolve, reject) {
setTimeout(() => {
reject("失敗結(jié)果1");
}, 3000);
});
const ps4 = new Promise(function (resolve, reject) {
setTimeout(() => {
reject("失敗結(jié)果2");
}, 2000);
});3.1 Promise.all()
通過(guò)數(shù)組的形式傳入異步操作，所有的異步執(zhí)行都成功，才執(zhí)行成功，如果有一個(gè)失敗了，就執(zhí)行失敗。例子如下：
都成功，執(zhí)行 then 方法，成功返回結(jié)果，通過(guò) res 以數(shù)組的方式返回
Promise.all([ps1, ps2])
.then(function (res) {
console.log("都成功", res);
})
.catch(function (err) {
console.log(err);
});
按傳入順序執(zhí)行，如果有一個(gè)異步執(zhí)行失敗，中斷其他異步操作，執(zhí)行 catch 方法，通過(guò) err 返回失敗結(jié)果
Promise.all([ps1, ps2, ps3, ps4])
.then(function (res) {
console.log("都成功", res);
})
.catch(function (err) {
console.log("執(zhí)行失敗", err);
});
3.2 Promise.allSettled()
所有執(zhí)行都有結(jié)果了就執(zhí)行，無(wú)論成功還是失敗
Promise.allSettled([ps1, ps2, ps3, ps4]).then(function (res) {
console.log("都返回結(jié)果", res);
});
3.3 Promise.any()
任意異步成功了就執(zhí)行
Promise.any([ps1, ps2, ps3, ps4]).then(function (res) {
console.log("任意成功", res);
});
3.4 Promise.race()
任意異步成功或失敗就執(zhí)行。
Promise.race([ps1, ps2, ps3, ps4]).then(function (res) {
console.log("任意成功或失敗", res);
});
3.5 Promise.reject()
返回一個(gè)狀態(tài)為 rejected 的 Promise 對(duì)象
3.6 Promise.resolve()
會(huì)接收 4 種類型的參數(shù)：promise 實(shí)例 、具有 then 方法的對(duì)象、沒(méi)有 then 方法的對(duì)象、不傳參
當(dāng)參數(shù)是一個(gè) Promise 實(shí)例時(shí)，直接返回這個(gè)實(shí)例。
Promise.resolve(ps1);
當(dāng)參數(shù)是一個(gè)具有 then 方法的對(duì)象時(shí)，將這個(gè)對(duì)象轉(zhuǎn)為 Promise 對(duì)象，并立即執(zhí)行對(duì)象的 then 方法
let obj = {
name: "yqcoder",
then(resolve) {
resolve(this.name);
},
};
Promise.resolve(obj);
當(dāng)參數(shù)是一個(gè)沒(méi)有 then 方法的對(duì)象，或者參數(shù)不是對(duì)象時(shí)，就會(huì)返回狀態(tài)為 fulfilled 的新的 Promise 對(duì)象，并將參數(shù)傳入下一個(gè) then。
let obj = {
name: "yqcoder",
};
let ps = Promise.resolve(obj);
ps.then(function (res) {
console.log("結(jié)果", res);
});
當(dāng)不帶任何參數(shù)時(shí)，就會(huì)返回一個(gè)狀態(tài)為 fulfilled 的 Promise 對(duì)象
Promise.resolve();
總結(jié)
到此這篇關(guān)于前端JavaScript經(jīng)典之Promise的文章就介紹到這了,更多相關(guān)前端JS Promise詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于JavaScript中parseInt()的一個(gè)怪異行為解決
parseInt()是內(nèi)置的?JS?函數(shù),用于解析數(shù)字字符串中的整數(shù),下面這篇文章主要給大家介紹了關(guān)于JavaScript中parseInt()的一個(gè)怪異行為解決,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
javascript String 的擴(kuò)展方法集合
String 的擴(kuò)展方法集合，可以是javascript對(duì)string的功能更多2008-06-06
JScript 腳本實(shí)現(xiàn)文件下載 一般用于下載木馬
腳本實(shí)現(xiàn)文件下載，這個(gè)是jscript的，腳本之家以前曾發(fā)布vbscript版本的,原理一樣的。2009-10-10
JavaScript constructor和instanceof,JSOO中的一對(duì)歡喜冤家
現(xiàn)在流行面向?qū)ο?JavaScript當(dāng)然要迎頭趕上. 有說(shuō)法JavaScript就是徹頭徹尾的OO語(yǔ)言,但我覺(jué)得JavaScript實(shí)現(xiàn)面向?qū)ο蟮某绦蜻€是有諸多不便的.2009-05-05
結(jié)合?ES6?類編寫(xiě)JavaScript?創(chuàng)建型模式
這篇文章主要介紹了結(jié)合ES6類編寫(xiě)JavaScript創(chuàng)建型模式，本文開(kāi)始系統(tǒng)性的對(duì)20多種JavaScript?設(shè)計(jì)模式進(jìn)行簡(jiǎn)單概述，然后結(jié)合ES6類的方式來(lái)編寫(xiě)實(shí)例代碼展示其使用方式，需要的朋友可以參考一下2022-07-07
這篇文章主要介紹了CocosCreator熱更新，熱更新是重要的技術(shù)，希望你看完文章可以回去實(shí)驗(yàn)一下，體會(huì)其便捷性2021-04-04
這篇文章主要介紹了webpack 處理CSS資源的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
本文主要給大家介紹的是javascript中的擴(kuò)展方法字符串trim()的使用指南，十分的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2015-05-05
本文主要介紹了使用canvas來(lái)繪制常見(jiàn)的各種圖形實(shí)例，并且會(huì)簡(jiǎn)單封裝一下繪制各圖形的方法，最后會(huì)分享給大家一個(gè)封裝好的快速繪制多邊形的方法。下面跟著小編一起來(lái)看下吧2016-12-12
javascript實(shí)現(xiàn)圣旨卷軸展開(kāi)效果（代碼分享）
本文主要介紹了javascript實(shí)現(xiàn)圣旨卷軸展開(kāi)效果的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03