Promise不會？？看這裏！！！史上最通俗易懂的Promise！！！
1、什麼是Promise？咱們用Promise來解決什麼問題？
Promise 是異步編程的一種解決方案： 從語法上講，promise是一個對象，從它能夠獲取異步操做的消息；從本意上講，它是承諾，承諾它過一段時間會給你一個結果。 promise有三種狀態： pending(等待態)，fulfiled(成功態)，rejected(失敗態)；狀態一旦改變，就不會再變。創造promise實例後，它會當即執行。
我相信你們常常寫這樣的代碼：es6
// 當參數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是異步的
2、es6 promise用法大全
Promise是一個構造函數，本身身上有all、reject、resolve這幾個眼熟的方法，原型上有then、catch等一樣很眼熟的方法。promise
那就new一個bash
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以及各類靜態文件。全部的都加載完後，咱們再進行頁面的初始化。dom
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吧異步
3、根據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+規範規定，在有異常錯誤時，則執行失敗函數。
constructor (executor){
...... try{
executor(resolve,reject);
}catch(e){
reject(e);
}
}
複製代碼
步驟二：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中的結果存入數組中，則上面的代碼會改變爲：
then(onFulFilled, onRejected) {
if (this.status === 'resolved') {
onFulFilled(this.value);
}
if (this.status === 'rejected') {
onRejected(this.reason);
}
// 當前既沒有完成 也沒有失敗
if (this.status === 'pending') {
// 存放成功的回調
this.onResolvedCallbacks.push(() => {
onFulFilled(this.value);
});
// 存放失敗的回調
this.onRejectedCallbacks.push(() => {
onRejected(this.reason);
});
}
}複製代碼
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;
複製代碼
關於這篇promise A+規範的總結，確定會存在不少不足的地方，歡迎各位提出寶貴的意見或建議，也但願能幫助到你從中得到一些知識！
相關文章
- 1. Promise不會？？看這裏！！！史上最通俗易懂的Promise！！！
- 2. 最最最通俗易懂的promise手寫系列（一）
- 3. 看了就會，手寫Promise原理，最通俗易懂的版本！！！
- 4. 最最最通俗易懂的promise手寫系列（二）- 鏈式調用
- 5. 【面試高頻知識點】promise的理解（通俗易懂）
- 6. 【手寫Promise】史上最最最詳細的手寫Promise教程
- 7. 史上最通俗易懂的hashCode()講解
- 8. 史上最通俗易懂的理解雲計算
- 9. Promise之你看得懂的Promise
- 10. 史上最通俗易懂的單點登陸，一遍就能懂
- 更多相關文章...
- • Git 查看提交歷史 - Git 教程
- • SVN 查看歷史信息 - SVN 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 再有人問你分佈式事務，把這篇扔給他
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
