1. 程式人生 > >promise-async/await

promise-async/await

Promise最早由社群提出並實現,典型的一些庫有Q,when,bluebird等;它們的出現是為了更好地解決JavaScript中非同步程式設計的問題,傳統的非同步程式設計最大的特點就是地獄般的回撥巢狀,一旦巢狀次數過多,就很容易使我們的程式碼難以理解和維護。

promise async

ES6統一各種開源實現方法,提供原生的建構函式Promise,規範後由瀏覽器直接支援。

檢視瀏覽器是否支援:

type of Promise  // 'function'
Promise // function Promise(){}

# promise示例:

 var test = new
Promise(function(resolve, reject) { var flag = Math.random()*2 setTimeout(function() { if (flag > 1) { resolve('ok') } else { reject('fail') } }, 2000) }) // 這裡的test,寫成test() 報錯 not a function test.then( function
(res) { console.log(res) }, function(err) { console.log(err) } ) // 兩個函式分別對應resolve和reject

以上程式碼,一秒後會列印fail/ok,

建構函式Promise的引數是一個函式,這個函式有兩個引數resolve和reject,它們分別是兩個函式,這兩個函式的作用就是將promise的狀態

從pending(等待)轉換為resolved(已解決)

或者

從pending(等待)轉換為rejected(已失敗)

可以這樣理解,

Promise函式體的內部包裹著一個非同步的請求或者操作或者函式;

然後我們可以在這個非同步的操作完成的時候使用resolve函式將我們獲得的結果傳遞出去,或者使用reject函式將錯誤的訊息傳遞出去。

# 鏈式呼叫

let p1 = new Promise((resolve, reject) => {
    let flag = Math.random() > 0.5 ? true : false;
    resolve();
});
// @2 使用then方法進行鏈式的呼叫
p1.then(() => {
    return 1;
}).then((result) => {
    console.log(result);
    return 'hello'
}).then((result) => {
    console.log(result);
});

return 出去的引數可以作為下一個then方法的引數直接呼叫

# catch

.then(null, rejection)

呼叫then方法時不使用resolve引數,即使用catch捕捉函式異常

.catch((error) => {console.log(error)})

# 有一種特殊的語法可以更舒適地與promise協同工作,叫做async/await