promise-async/await
阿新 • • 發佈:2019-01-06
Promise最早由社群提出並實現,典型的一些庫有Q,when,bluebird等;它們的出現是為了更好地解決JavaScript中非同步程式設計的問題,傳統的非同步程式設計最大的特點就是地獄般的回撥巢狀,一旦巢狀次數過多,就很容易使我們的程式碼難以理解和維護。
ES6統一各種開源實現方法,提供原生的建構函式Promise,規範後由瀏覽器直接支援。
檢視瀏覽器是否支援:
type of Promise // 'function' Promise // function Promise(){}
# promise示例:
var test = newPromise(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