1.Promise 基礎知識梳理
創建一個Promise實例
const promise = new Promise(function(resolve, reject) { if (success){ resolve(value); } else { reject(error); } });
Promise構造函數接受一個函數作為參數,該函數的兩個參數分別是resolve和reject。它們是兩個函數,JavaScript 引擎提供,不用自己部署。
Promise實例生成以后,可以使用then方法分別制定resolved狀態和rejected狀態的回調函數。
promise.then(value => {}, error => {})
then方法返回的是一個新的Promise實例(注意,不是原來那個Promise實例)。因此可以采用鏈式寫法,即then方法后面再調用另一個then方法。
fetch("/posts.json").then(file=> {file.json()}).then(data => {});
上面的代碼使用then方法,依次指定了兩個回調函數。第一個回調函數完成以后,會將返回結果作為參數,傳入第二個回調函數。
Promise.all方法用於將多個Promise實例包裝成一個新的實例。
const p = Promise.all([p1, p2, p3]);
上面代碼中,Promise.all方法接受一個數組作為參數,p1,p2,p3都是 Promise 實例,如果不是,就會先調用下面講到的Promise.resolve方法,將參數轉為Promise實例,再進一步處理。
p的狀態由p1,p2,p3決定,分成兩種情況。
(1)只有p1,p2,p3的狀態都變成fulfilled,p的狀態才會變成fulfilled,此時p1,p2,p3的返回值組成一個數組,傳遞給p的回調函數。
(2)只要p1,p2,p3之中有一個被rejected,p的狀態就變成rejected,此時第一個被rejected的實例的返回值,會傳遞給p的回調函數。
Promise.race方法也是用於將多個Promise實例包裝成一個新的實例。
const p = Promise.race([p1, p2, p3]);
上面代碼中,只要p1,p2,p3之中有一個實例率先改變狀態,p的狀態就跟着改變。那個率先改變的 Promise 實例的返回值,就傳遞給p的回調函數。
Promise.resolve()將現有對象轉為 Promise 對象。
2. 一道關於Promise的應用示例
const timeout = ms => new Promise((resolve) => { setTimeout(() => { resolve(); }, ms) }); const ajax1 = () => timeout(1000).then(() => { console.log('1') return 1; }); const ajax2 = () => timeout(1000).then(() => { console.log('2') return 2 }); const ajax3 = () => timeout(1000).then(() => { console.log('3') return 3 }); const mergePromise = ajaxArray => { let result = [] let promise = Promise.resolve() ajaxArray.forEach(function (item) { promise = promise.then(item) result.push(promise) }) return Promise.all(result) }; mergePromise([ajax1, ajax2, ajax3]).then(data => { console.log('done') console.log(data) //[1,2,3] });
按順序合並Promise,並將返回結果以數組的形式輸出。
