深入解讀Promise物件

promise物件是非同步程式設計的一種解決方案，傳統的方法有**函式和事件，promise物件是乙個容器，儲存著未來才會結束的事件的結果

1.promise物件的狀態不受外界因素的影響，promise物件只有三種狀態，pending(進行中)、resolve(已完成)、reject(已失敗)，只有非同步操作的結果才能決定是哪一種狀態

2.一旦狀態改變，就不會再發生變化，任何時候都可以得到這個結果，promise物件狀態變化只有兩種可能，從pending->resolve、peding->reject

所以我們用promise的時候一般是包在乙個函式中，在需要的時候去執行這個函式

let promise = new promise(function
(resolve, reject) );
promise.then(
function
(value) );
console.log("順序執行");
//promise
//順序執行
//當前指令碼所有同步任務執行完才會執行

function
loadimageasync(url) 
img.onerror = function
()                img.src =url;
});}
loadimageasync("./2.png").then((value) =>);

function
getjson(url) 
if (this.status === 200) 
else
}xhr.send();
});return
promise;
}getjson("a.txt").then((json) =>,(error) =>);

function
runasync1(),2000);
});}
function
runasync2(),2000);
});}
function
runasync3(),2000);
});}
runasync1().then((data) =>).then((data) => ).then((data) =>);

function
getnumber()
else
},2000);
});} 
getnumber().then((value) =>,(error) =>)

function
getnumber()  
else
});});
}getnumber().then((value) =>).
catch((error) =>)

function
getnumber()  
else
});});
}getnumber().then((value) =>).
catch((error) =>)

all()接收乙個陣列作為引數，裡面的值最終都返回乙個promise物件，提供了並行執行非同步操作的能力，並且在所有非同步操作執行完才執行**，有了all，你就可以並行執行多個非同步操作，並且在乙個**中處理所有的返回資料，all方法的效果實際上是「誰跑的慢，以誰為準執行**」

function
runasync1(),2000);
});}
function
runasync2(),1000);
});}
function
runasync3(),3000);
});}
promise.all([runasync1(),runasync2(),runasync3()])
.then((data) =>);

1.race()接收乙個陣列作為引數，裡面的值最終都返回乙個promise物件，提供了並行執行非同步操作的能力，race方法的效果是「誰跑的快，以誰為準執行**」，這就是race方法，這個詞本來就是賽跑的意思

function
runasync1(),1000);
});}
function
runasync2(),2000);
});}
function
runasync3(),3000);
});}
promise.race([runasync1(),runasync2(),runasync3()])
.then((data) =>);

2.用race給某個非同步請求設定超時時間，並且在超時後執行相應的操作：

function
getimg(url)
img.src = "2.png";
});}
function
delaytime(),5000);
});}
promise.race([getimg(),delaytime()])
.then((data) =>).
catch((error) =>);

使用promise.resolve()來建立promise物件，promise.resolve()的返回值是promise物件

promise.resolve("data1").then((value) =>);

使用promise.reject()來建立promise物件，promise.reject()的返回值是promise物件

promise.reject(new error("出錯了")).then((value) =>).
catch((error) =>);

案例一：

var promise1 = new promise((resolve,reject) =>
else
});var promise2 = promise1.then((value) =>);
var promise3 = promise2.catch((error) =>);
console.log(promise1 !== promise2); //
true
console.log(promise1 !== promise3); //
true
console.log(promise2 !== promise3); //
true

案例二：

var promise1 = new promise((resolve,reject) =>);
promise1.then((value) =>);
promise1.then((value) =>);
promise1.then((value) =>);

function
runasync1() , 500);
});}
function
runasync2() , 1000);
});}
promise.race([runasync1(), runasync2()]).then((value) =>).
catch((error) =>);
//1//2
//3

注：promise.prototype.then() -> 返回promise物件

promise.prototype.catch() -> 返回promise物件

promise.prototype.finally() -> 返回promise物件

promise.all() -> 返回promise例項

promise.race() -> 返回promise例項

promise.resolve() -> 返回promise物件

promise.reject() -> 返回promise物件

深入解讀Promise物件

深入理解Promise

promise物件的使用

Promise原始碼深入理解

深入解讀Promise物件

深入理解Promise

promise物件的使用

Promise原始碼深入理解

相關推薦