什麼是Promise,我們用它來做什麼?
一、什麼是Promise?我們用Promise來解決什麼問題?
Promise 是非同步程式設計的一種解決方案:從語法上講,promise是一個物件,從它可以獲取非同步操作的訊息;從本意上講,它是承諾,承諾它過一段時間會給你一個結果。promise有三種狀態:pending(等待態),fulfiled(成功態),rejected(失敗態);狀態一旦改變,就不會再變。創造promise例項後,它會立即執行。
我相信大家經常寫這樣的程式碼:
// 當引數a大於10且引數fn2是一個方法時 執行fn2 function fn1(a, fn2) { if (a > 10 && typeof fn2 == 'function') { fn2() } } fn1(11, function() { console.log('this is a callback') })
一般碰到的回撥巢狀都不會很多,一般就一到兩級,但是某些情況下,回撥巢狀很多時,程式碼就會非常繁瑣,會給我們的程式設計帶來很多的麻煩,這種情況俗稱——回撥地獄。
這時候我們的promise就應運而生、粉墨登場了
promise是用來解決兩個問題的:
- 回撥地獄,程式碼難以維護, 常常第一個的函式的輸出是第二個函式的輸入這種現象
- promise可以支援多個併發的請求,獲取併發請求中的資料
- 這個promise可以解決非同步的問題,本身不能說promise是非同步的
二、es6 promise用法大全
Promise是一個建構函式,自己身上有all、reject、resolve這幾個眼熟的方法,原型上有then、catch等同樣很眼熟的方法。
那就new一個
let p = new Promise((resolve, reject) => {
//做一些非同步操作
setTimeout(() => {
console.log('執行完成');
resolve('我是成功!!');
}, 2000);
});
Promise的建構函式接收一個引數:函式,並且這個函式需要傳入兩個引數:
- resolve :非同步操作執行成功後的回撥函式
- reject:非同步操作執行失敗後的回撥函式
then 鏈式操作的用法
所以,從表面上看,Promise只是能夠簡化層層回撥的寫法,而實質上,Promise的精髓是“狀態”,用維護狀態、傳遞狀態的方式來使得回撥函式能夠及時呼叫,它比傳遞callback函式要簡單、靈活的多。所以使用Promise的正確場景是這樣的:
p.then((data) => {
console.log(data);
})
.then((data) => {
console.log(data);
})
.then((data) => {
console.log(data);
});
reject的用法 :
把Promise的狀態置為rejected,這樣我們在then中就能捕捉到,然後執行“失敗”情況的回撥。看下面的程式碼。
let p = new Promise((resolve, reject) => {
//做一些非同步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的隨機數
if(num<=5){
resolve(num);
}
else{
reject('數字太大了');
}
}, 2000);
});
p.then((data) => {
console.log('resolved',data);
},(err) => {
console.log('rejected',err);
}
);
then中傳了兩個引數,then方法可以接受兩個引數,第一個對應resolve的回撥,第二個對應reject的回撥。所以我們能夠分別拿到他們傳過來的資料。多次執行這段程式碼,你會隨機得到下面兩種結果:
或者
catch的用法
我們知道Promise物件除了then方法,還有一個catch方法,它是做什麼用的呢?其實它和then的第二個引數一樣,用來指定reject的回撥。用法是這樣:
p.then((data) => {
console.log('resolved',data);
}).catch((err) => {
console.log('rejected',err);
});
效果和寫在then的第二個引數裡面一樣。不過它還有另外一個作用:在執行resolve的回撥(也就是上面then中的第一個引數)時,如果丟擲異常了(程式碼出錯了),那麼並不會報錯卡死js,而是會進到這個catch方法中。請看下面的程式碼:
p.then((data) => {
console.log('resolved',data);
console.log(somedata); //此處的somedata未定義
})
.catch((err) => {
console.log('rejected',err);
});
在resolve的回撥中,我們console.log(somedata);而somedata這個變數是沒有被定義的。如果我們不用Promise,程式碼執行到這裡就直接在控制檯報錯了,不往下運行了。但是在這裡,會得到這樣的結果:
也就是說進到catch方法裡面去了,而且把錯誤原因傳到了reason引數中。即便是有錯誤的程式碼也不會報錯了,這與我們的try/catch語句有相同的功能
all的用法:誰跑的慢,以誰為準執行回撥。all接收一個數組引數,裡面的值最終都算返回Promise物件
Promise的all方法提供了並行執行非同步操作的能力,並且在所有非同步操作執行完後才執行回撥。看下面的例子:
let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})
let p = Promise.all([Promise1, Promise2, Promise3])
p.then(funciton(){
// 三個都成功則成功
}, function(){
// 只要有失敗,則失敗
})
有了all,你就可以並行執行多個非同步操作,並且在一個回撥中處理所有的返回資料,是不是很酷?有一個場景是很適合用這個的,一些遊戲類的素材比較多的應用,開啟網頁時,預先載入需要用到的各種資源如圖片、flash以及各種靜態檔案。所有的都載入完後,我們再進行頁面的初始化。
race的用法:誰跑的快,以誰為準執行回撥
race的使用場景:比如我們可以用race給某個非同步請求設定超時時間,並且在超時後執行相應的操作,程式碼如下:
//請求某個圖片資源
function requestImg(){
var p = new Promise((resolve, reject) => {
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = '圖片的路徑';
});
return p;
}
//延時函式,用於給請求計時
function timeout(){
var p = new Promise((resolve, reject) => {
setTimeout(() => {
reject('圖片請求超時');
}, 5000);
});
return p;
}
Promise.race([requestImg(), timeout()]).then((data) =>{
console.log(data);
}).catch((err) => {
console.log(err);
});
-
requestImg函式會非同步請求一張圖片,我把地址寫為"圖片的路徑",所以肯定是無法成功請求到的。timeout函式是一個延時5秒的非同步操作。我們把這兩個返回Promise物件的函式放進race,於是他倆就會賽跑,如果5秒之內圖片請求成功了,那麼遍進入then方法,執行正常的流程。如果5秒鐘圖片還未成功返回,那麼timeout就跑贏了,則進入catch,報出“圖片請求超時”的資訊。執行結果如下:
好了,我相信大家對用法已經懂了,那麼我們來手寫一款自己的promise吧
三、根據promiseA+實現一個自己的promise
步驟一:實現成功和失敗的回撥方法
要實現上面程式碼中的功能,也是promise最基本的功能。首先,需要建立一個建構函式promise,建立一個promisel類,在使用的時候傳入了一個執行器executor,executor會傳入兩個引數:成功(resolve)和失敗(reject)。之前說過,只要成功,就不會失敗,只要失敗就不會成功。所以,預設狀態下,在呼叫成功時,就返回成功態,呼叫失敗時,返回失敗態。程式碼如下:
class Promise {
constructor (executor){
//預設狀態是等待狀態
this.status = 'panding';
this.value = undefined;
this.reason = undefined;
//存放成功的回撥
this.onResolvedCallbacks = [];
//存放失敗的回撥
this.onRejectedCallbacks = [];
let resolve = (data) => {//this指的是例項
if(this.status === 'pending'){
this.value = data;
this.status = "resolved";
this.onResolvedCallbacks.forEach(fn => fn());
}
}
let reject = (reason) => {
if(this.status === 'pending'){
this.reason = reason;
this.status = 'rejected';
this.onRejectedCallbacks.forEach(fn => fn());
}
}
try{//執行時可能會發生異常
executor(resolve,reject);
}catch (e){
reject(e);//promise失敗了
}
}
promise A+規範規定,在有異常錯誤時,則執行失敗函式。
步驟二:then方法鏈式呼叫
then方法是promise的最基本的方法,返回的是兩個回撥,一個成功的回撥,一個失敗的回撥,實現過程如下:
then(onFulFilled, onRejected) {
if (this.status === 'resolved') { //成功狀態的回撥
onFulFilled(this.value);
}
if (this.status === 'rejected') {//失敗狀態的回撥
onRejected(this.reason);
}
}
let p = new Promise(function(){
resolve('我是成功');
})
p.then((data) => {console.log(data);},(err) => {});
p.then((data) => {console.log(data);},(err) => {});
p.then((data) => {console.log(data);},(err) => {});
返回的結果是:
我是成功
我是成功
我是成功
為了實現這樣的效果,則上一次的程式碼將要重新寫過,我們可以把每次呼叫resolve的結果存入一個數組中,每次呼叫reject的結果存入一個數組。這就是為何會在上面定義兩個陣列,且分別在resolve()和reject()遍歷兩個陣列的原因。因此,在呼叫resolve()或者reject()之前,我們在pending狀態時,會把多次then中的結果存入陣列中,則上面的程式碼會改變為:
Promise A+規範中規定then方法可以鏈式呼叫
在promise中,要實現鏈式呼叫返回的結果是返回一個新的promise,第一次then中返回的結果,無論是成功或失敗,都將返回到下一次then中的成功態中,但在第一次then中如果丟擲異常錯誤,則將返回到下一次then中的失敗態中
鏈式呼叫成功時
鏈式呼叫成功會返回值,有多種情況,根據舉的例子,大致列出可能會發生的結果。因此將鏈式呼叫返回的值單獨寫一個方法。方法中傳入四個引數,分別是p2,x,resolve,reject,p2指的是上一次返回的promise,x表示執行promise返回的結果,resolve和reject是p2的方法。則程式碼寫為:
function resolvePromise(p2,x,resolve,reject){
....
}
- 返回結果不能是自己
var p = new Promise((resovle,reject) => {
return p; //返回的結果不能是自己,
})
當返回結果是自己時,永遠也不會成功或失敗,因此當返回自己時,應丟擲一個錯誤
function resolvePromise(p2,x,resolve,reject){
if(px===x){
return reject(new TypeError('自己引用自己了'));
}
....
}
返回結果可能是promise
function resolvePromise(promise2,x,resolve,reject){
//判斷x是不是promise
//規範中規定:我們允許別人亂寫,這個程式碼可以實現我們的promise和別人的promise 進行互動
if(promise2 === x){//不能自己等待自己完成
return reject(new TypeError('迴圈引用'));
};
// x是除了null以外的物件或者函式
if(x !=null && (typeof x === 'object' || typeof x === 'function')){
let called;//防止成功後呼叫失敗
try{//防止取then是出現異常 object.defineProperty
let then = x.then;//取x的then方法 {then:{}}
if(typeof then === 'function'){//如果then是函式就認為他是promise
//call第一個引數是this,後面的是成功的回撥和失敗的回撥
then.call(x,y => {//如果Y是promise就繼續遞迴promise
if(called) return;
called = true;
resolvePromise(promise2,y,resolve,reject)
},r => { //只要失敗了就失敗了
if(called) return;
called = true;
reject(r);
});
}else{//then是一個普通物件,就直接成功即可
resolve(x);
}
}catch (e){
if(called) return;
called = true;
reject(e)
}
}else{//x = 123 x就是一個普通值 作為下個then成功的引數
resolve(x)
}
}
- 返回結果可能為一個普通值,則直接 resolve(x);
- Promise一次只能呼叫成功或者失敗
也就是當呼叫成功就不能再呼叫失敗了,如果兩個都呼叫的時候,哪個先呼叫就執行哪一個。程式碼部分還是上面那部分
個人認為,這個地方比較繞,需要慢慢的一步一步的理清楚。
根據promise A+規範原理,promise在自己的框架中,封裝了一系列的內建的方法。
- 捕獲錯誤的方法 catch()
- 解析全部方法 all()
- 競賽 race()
- 生成一個成功的promise resolve()
- 生成一個失敗的promise reject()
最後給大家附上全部原始碼,供大家仔細品讀。
function resolvePromise(promise2,x,resolve,reject){
//判斷x是不是promise
//規範中規定:我們允許別人亂寫,這個程式碼可以實現我們的promise和別人的promise 進行互動
if(promise2 === x){//不能自己等待自己完成
return reject(new TypeError('迴圈引用'));
};
// x是除了null以外的物件或者函式
if(x !=null && (typeof x === 'object' || typeof x === 'function')){
let called;//防止成功後呼叫失敗
try{//防止取then是出現異常 object.defineProperty
let then = x.then;//取x的then方法 {then:{}}
if(typeof then === 'function'){//如果then是函式就認為他是promise
//call第一個引數是this,後面的是成功的回撥和失敗的回撥
then.call(x,y => {//如果Y是promise就繼續遞迴promise
if(called) return;
called = true;
resolvePromise(promise2,y,resolve,reject)
},r => { //只要失敗了就失敗了
if(called) return;
called = true;
reject(r);
});
}else{//then是一個普通物件,就直接成功即可
resolve(x);
}
}catch (e){
if(called) return;
called = true;
reject(e)
}
}else{//x = 123 x就是一個普通值 作為下個then成功的引數
resolve(x)
}
}
class Promise {
constructor (executor){
//預設狀態是等待狀態
this.status = 'panding';
this.value = undefined;
this.reason = undefined;
//存放成功的回撥
this.onResolvedCallbacks = [];
//存放失敗的回撥
this.onRejectedCallbacks = [];
let resolve = (data) => {//this指的是例項
if(this.status === 'pending'){
this.value = data;
this.status = "resolved";
this.onResolvedCallbacks.forEach(fn => fn());
}
}
let reject = (reason) => {
if(this.status === 'pending'){
this.reason = reason;
this.status = 'rejected';
this.onRejectedCallbacks.forEach(fn => fn());
}
}
try{//執行時可能會發生異常
executor(resolve,reject);
}catch (e){
reject(e);//promise失敗了
}
}
then(onFuiFilled,onRejected){
//防止值得穿透
onFuiFilled = typeof onFuiFilled === 'function' ? onFuiFilled : y => y;
onRejected = typeof onRejected === 'function' ? onRejected :err => {throw err;}
let promise2;//作為下一次then方法的promise
if(this.status === 'resolved'){
promise2 = new Promise((resolve,reject) => {
setTimeout(() => {
try{
//成功的邏輯 失敗的邏輯
let x = onFuiFilled(this.value);
//看x是不是promise 如果是promise取他的結果 作為promise2成功的的結果
//如果返回一個普通值,作為promise2成功的結果
//resolvePromise可以解析x和promise2之間的關係
//在resolvePromise中傳入四個引數,第一個是返回的promise,第二個是返回的結果,第三個和第四個分別是resolve()和reject()的方法。
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e);
}
},0)
});
}
if(this.status === 'rejected'){
promise2 = new Promise((resolve,reject) => {
setTimeout(() => {
try{
let x = onRejected(this.reason);
//在resolvePromise中傳入四個引數,第一個是返回的promise,第二個是返回的結果,第三個和第四個分別是resolve()和reject()的方法。
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e);
}
},0)
});
}
//當前既沒有完成也沒有失敗
if(this.status === 'pending'){
promise2 = new Promise((resolve,reject) => {
//把成功的函式一個個存放到成功回撥函式陣列中
this.onResolvedCallbacks.push( () =>{
setTimeout(() => {
try{
let x = onFuiFilled(this.value);
resolvePromise(promise2,x,resolve,reject);
}catch(e){
reject(e);
}
},0)
});
//把失敗的函式一個個存放到失敗回撥函式陣列中
this.onRejectedCallbacks.push( ()=>{
setTimeout(() => {
try{
let x = onRejected(this.reason);
resolvePromise(promise2,x,resolve,reject)
}catch(e){
reject(e)
}
},0)
})
})
}
return promise2;//呼叫then後返回一個新的promise
}
catch (onRejected) {
// catch 方法就是then方法沒有成功的簡寫
return this.then(null, onRejected);
}
}
Promise.all = function (promises) {
//promises是一個promise的陣列
return new Promise(function (resolve, reject) {
let arr = []; //arr是最終返回值的結果
let i = 0; // 表示成功了多少次
function processData(index, data) {
arr[index] = data;
if (++i === promises.length) {
resolve(arr);
}
}
for (let i = 0; i < promises.length; i++) {
promises[i].then(function (data) {
processData(i, data)
}, reject)
}
})
}
// 只要有一個promise成功了 就算成功。如果第一個失敗了就失敗了
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (var i = 0; i < promises.length; i++) {
promises[i].then(resolve,reject)
}
})
}
// 生成一個成功的promise
Promise.resolve = function(value){
return new Promise((resolve,reject) => resolve(value);
}
// 生成一個失敗的promise
Promise.reject = function(reason){
return new Promise((resolve,reject) => reject(reason));
}
Promise.defer = Promise.deferred = function () {
let dfd = {};
dfd.promise = new Promise( (resolve, reject) => {
dfd.resolve = resolve;
dfd.reject = reject;
});
return dfd
}
module.exports = Promise;
本文為轉載文章,原文請檢視https://juejin.im/post/5afe6d3bf265da0b9e654c4b?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com#heading-0。