理解異步之美：Promise與async await（一）

理解異步之美：Promise與async await（二）

你可能會放出一個怪物

異步與同步相比，最難以掌控的就是異步的任務會什么時候完成和完成之后的回調問題，

難以掌控的觸發狀態，讓你自己寫的代碼當時還可以讀懂，但是過幾天、半個月之后如果不重新盤一邊邏輯，你哪知道哪個內容會先執行，借用這么一個例子

listen( "click", function handler(evt){
    setTimeout( function request(){
        ajax( "http://some.url.1", function response(text){
            if (text == "hello") {
                handler();
            }
            else if (text == "world") {
                request();
            }
        } );
    }, 500) ;
} );

doSomething();

很難以理解這種地獄式的回調（回調地獄）會對可讀性有多么大的摧毀。

首先 執行listern（）

其次 doSomething（）

500ms（或者更遠）后執行ajax（）

ajax完成后

如果text === hello 執行handler（）

如果text === world 執行request（）

難受嗎？？？

在你不知道的javascript一書中，對于回調的信任問題做了闡述
當你使用第三方的庫的方法處理回調時很有可能遇到以下信任內容：

cdn.xitu.io/2018/8/11/165291ae72b4fd0a?w=1834&h=360&f=png&s=83534">

怎么解決？？？？ 這種信任問題該怎么辦？

事實證明 你需要一個承諾

當你把一件事情交給別人去做（可能馬上就能完成的也可能是需要一段時間的）這個人在任務完成或者失敗后都會給你一個回應，這樣的人你是不是特別放心的把事情交給他，他沒回應你那么他是正在辦事、回應你了就是成功了或者失敗了。

在javascript中這樣的人就是Promise。

Promise的實例有三個狀態，Pending（進行中）、Resolved（已完成）、Rejected（已拒絕）。當你把一件事情交給promise時，它的狀態就是Pending，任務完成了狀態就變成了Resolved、沒有完成失敗了就變成了Rejected。

言歸正傳：寫一個簡單的promise

let promise = new Promise((resolve,reject)=>{
    // 接收一個callback。參數是成功函數與失敗函數
    setTimeout(()=>{
       let num = parseInt(Math.random()*100);
       // 如果數字大于50就調用成功的函數，并且將狀態變成Resolved
       if(num > 50){
          resolve(num);
       }else{
        // 否則就調用失敗的函數，將狀態變成Rejected
          reject(num)
       }
    },10000)
})

當Promise執行的內容符合你預期的成功條件的話，就調用resolve函數，失敗就調用reject函數，這兩個函數的參數會被promise捕捉到。可以在之后的回調中使用。

創建一個承諾我們已經做完了，那么如何使用承諾后的結果呢？

promise.then(res=>{
    console.log(res);
    //在構造函數中如果你執行力resolve函數就會到這一步
},err=>{
    // 執行了reject函數會到這一步
    console.log(err);
})

then方法接收兩個函數，第一個是承諾成功（狀態為resolved）的回調函數，一個承諾失敗（狀態為rejected）的回調函數。

then方法的返回值不是一個promise對象就會被包裝成一個promise對象，所以then方法支持鏈式調用。

promise.then(res=>{ return 42}).then(res=>{console.log(res)})
// 打印出42

then方法的鏈式調用可以幫我們串行的解決一些邏輯，當我們平時書寫有順序的異步時間，比如

ajax('first');
ajax('second');
ajax('third');
需要按順序來執行怎么辦？
ajax('first').success(function(res){
    ajax('second').success(function(res){
        ajax('third').success(function(res){
            //串行完畢可以執行你想要的內容了
        });
    })
})
多么美麗而又讓人望而卻步的三角形啊！！

如果使用then的鏈式調用呢？

let promise = new Promise((resolve,reject)=>{
    ajax('first').success(function(res){
        resolve(res);
    })
})
promise.then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    // 串行完畢你要做的xxx可以開始了
})

而且每次執行resolve的時候，都可以把每次ajax的回調數據進行傳遞到最后。清晰簡單明了。

說完串行了，那么并行怎么辦？？？
當有多個異步事件，之間并無聯系而且沒有先后順序，只需要全部完成就可以開始工作了。

串行會把每一個異步事件的等待時間進行一個相加，明顯會對完成進行一個阻塞。那么并行的話該怎么確定全部完成呢？

Promise.all 與 Promise.race的妙用

Promise.all 接收一個數組，數組的每一項都是一個promise對象。當數組中所有的promise的狀態都達到resolved的時候，Promise.all的狀態就會變成resolved，如果有一個狀態變成了rejected，那么Promise.all的狀態就會變成rejected（任意一個失敗就算是失敗），這就可以解決我們并行的問題。調用then方法時的結果成功的時候是回調函數的參數也是一個數組，按順序保存著每一個promise對象resolve執行時的值。

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(1);
    },10000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },9000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },11000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //[1,2,3] 證明與哪個promise的狀態先變成resolved無關
})

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       reject(1);
    },10000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },9000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },11000)
});
let promiseAll =Promise.all([promise1,promise2,promise3]);
promiseAll.then(res=>{
    console.log(res);
},err=>{
    console.log(err)
})

看結果不難看出來符合之前所說的

Promise.race 競速模式 也是接受一個每一項都是promise的數組。但是與all不同的是，第一個promise對象狀態變成resolved時自身的狀態變成了resolved，第一個promise變成rejected自身狀態就會變成rejected。第一個變成resolved的promsie的值就會被使用。

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       reject(1);
    },10000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },9000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },11000)
});
Promise.race([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //打印出2 為什么不打印出1呢？因為promise2先完成了其余的就忽略來
},rej=>{
    console.log('rejected');
    console.log(rej)};
)
// 大家可以嘗試自己改變時間進行測試

Promsie.race還有一個很重要的實際用處就是，有時候我們要去做一件事，但是超過三秒鐘左右我們就不做了那怎么辦？
這個時候可以使用Promise.race方法

Promise.race([promise1,timeOutPromise(3000)]).then(res=>{})
// timeOutPromise延時3s左右 由于是用setTimeout來實現的并不一定準確3s（一般主線程在開發中不會阻塞3s以上的所以不會有太大問題）

這就是我對于Promise的一些基本理解。

很難受的一件事 白天辛苦寫的1736個字的內容莫名其妙的被我刪掉了。。。。。內容都去哪了？？？ 很藍瘦。。。 所以晚上又重新梳理了一遍。

下一期的內容是針對于網上常見的Promise的自我實現進行一個分析，

總之一句話抓住Promise的承諾思想，就可以很好的去編寫promise的代碼。

async 與await將會在下期或者下下期進行講解。（很抱歉，想一口氣講完的但是內容太多，我也需要慢慢梳理爭取給大家一個高質量的文章，）

51CTO可能更新較慢（保持明天一更，但不限Web前端），如果想第一時間看到這個系列文章的后續，可以關注一下我們的掘金