>[danger]什么是Promise 1. 它是異步操作的一個解決方案, 簡單說它就是一個異步操作的容器, 在未來某一個時刻會完成的操作 2. Promise是一個構造函數, 它身上有resolve和reject方法, 原型上有then和catch方法 3. 它只有三種狀態, pending(運行中) fulfilled(成功), rejected(失敗) ******* 擴展: 1. Ajax請求回調太多, 形成回調地獄, 可以配合Promise替代回調函數, 但是Promise本身又是鏈式調用then, 會形成很多的鏈式回調, 代碼也不太方便閱讀 2. 我們可以使用ES7中的Async+Await把請求變為同步請求. 3. 每次調用then, 會返回一個新的Promise對象, 而且return的值會作為下一次then的參數 4. then() 接收resolve / catch() 接收reject / finally 無論如何都執行 ******* >[danger]Promise.all() --- 用于把多個Promise對象, 合并成一個, 如何有一個失敗, 直接進入catch, 如果子Promise自己實現了catch, 則合并的Promise對象不會進入catch, 進入then ~~~ Promise.all([p1, p2, p3]); ~~~ >[danger]Promise.resolve() --- 用于將對象轉成Promise對象 ~~~javascript Promise.resolve('foo') // 返回一個Promise對象 // 等價于 new Promise(resolve => resolve('foo')) ~~~ >[danger]手寫Promise實現 1. Promise雛形, 先理解這個 ``` // 1. 聲明Promise, fn就是你在new Promise傳入的方法體 function Promise(fn) { var value = null; var callbacks = []; //callbacks為數組，因為可能同時有很多個回調 // 接收外面.then時傳入進來的回調函數 this.then = function (onFulfilled) { // 加入到callbacks數組中 callbacks.push(onFulfilled); }; // 當promise內部調用resolve方法時, 將.then傳入進來的回調函數全部執行一遍 function resolve(value) { callbacks.forEach(function (callback) { callback(value); // 把value值帶出去, 帶到then注冊的方法參數中 }); } fn(resolve); // 調用new Promise時, 傳入的方法體, 開始執行了 } ``` 2. 調用promise時, 發現resolve方法馬上同步執行了, 所以還沒等then調用呢. ``` function getUserId() { return new Promise(function (resolve) { resolve(9876); }); } // 2. 調用方法, 得到Promise對象. 調用then注冊回調函數 getUserId().then(function (id) { console.log(id); // 我們發現什么也沒有打印, 證明resolve先執行了, 而then還沒調用.所以這里沒有回調成功 }); ``` 3. 讓resolve里等待主線程執行完畢它再執行, 改裝代碼 ``` function reso(value) { setTimeout(function(){ callbacks.forEach(function (callback) { callback(value); // 把value值帶出去, 帶到then注冊的方法參數中 }); }, 0); } ``` 4. 如果失敗的話怎么處理呢? (最簡單, 最終版, 還不能實現太復雜功能) ``` // 1. 聲明Promise, fn就是你在new Promise傳入的方法體 function Promise(fn) { var value = null; var callbacks = []; //callbacks為數組，因為可能同時有很多個回調 // 接收外面.then時傳入進來的回調函數 this.then = function (onFulfilled, onRejected) { // 加入到callbacks數組中 (注意這里分成功, 失敗情況) callbacks.push({ "onFulfilled": onFulfilled, "onRejected": onRejected }); }; // 當promise內部調用resolve方法時, 將.then傳入進來的回調函數全部執行一遍 function resolve(value) { execute("onFulfilled", value); } function reject(value) { execute("onRejected", value); } function execute(key, value) { setTimeout(function () { callbacks.forEach(function (callbackObj) { callbackObj[key](value); // 把value值帶出去, 帶到then注冊的方法參數中 }); }, 0); } fn(resolve, reject); // 調用new Promise時, 傳入的方法體, 開始執行了 } function getUserId() { return new Promise(function (resolve, reject) { resolve(9876); setTimeout(function () { reject("失敗"); }, 2000); }); } getUserId().then(function (id) { console.log(id); }, function (err) { console.log(err); }) ```