常用API · 前端框架Ⅰ

**1. `Promise.resolve(obj)`函數** * 如果 obj 是非 Promise 對象，則將其轉換為 Promise 對象。 * 如果 obj 本身就是一個 Promise 對象，則原封不動地返回該 obj。 * 該方法封裝的 Promise 對象的狀態為 fulfilled（已成功）。 ```js // 非Promise對象 const p01 = Promise.resolve('p01') // Promise對象 const p02 = Promise.resolve(new Promise((resolve, reject) => { resolve('p02') })) p01.then(value => { console.info(value) //p01 }) p02.then(value => { console.info(value) //p02 }) ``` **2. `Promise.reject(obj)`函數** * 與`Promise.resolve(obj)`是一樣的功能，不過該方法封裝的 Promise 對象的狀態為 rejected（已失敗）。 ```js //非Promise對象 const p01 = Promise.reject('p01') //Promise對象 const p02 = Promise.reject( new Promise((resolve, reject) => { resolve('resolve -> p02') }) ) p01 .then((value) => { console.info(value) //這里沒有被調用 }) .catch((reason) => { console.error(reason) //p01 }) p02 .then((value) => { console.info(value) //這里沒有被調用 }) .catch((reason) => { reason.then((value) => { console.info(value) //resolve -> p02 }) }) ``` **3. `Promise.prototype.then`函數的鏈式調用** * 會按照順序依次被調用。 ```js const p = new Promise((resolve,reject) => { resolve(1) }) p.then((value) => { console.log(value) //1 return 2 }).then((value) => { console.log(value) //2 }).then((value) => { console.log(value) //undefined return Promise.resolve(3) }).then((value) => { console.log(value) //3 return Promise.reject(4) }).then((value) => { console.log(value) //這里不被調用 }, (err) => { console.log(err) //4 }) ``` **4. `Promise.prototype.catch`函數捕捉錯誤** * `then(value).catch(reason)`其實就是`then(value, reason)`的別名。 ```js const fun01 = (count) => { return new Promise((resolve, reject) => { if (count === 1) { resolve('成功時的回調') } else { reject('失敗時的回調') } }) } /** * 捕獲異常。 * 可以將函數 then(value, reason) 寫成 then(value).catch(reason) 來捕獲異常 */ fun01(3).then((value) => { console.info('success', value) }) .catch((reason) => { console.error('fail', reason) //fail 失敗時的回調 }) /** * Promise 對象的錯誤具有"冒泡"性質，會一直向后傳遞，直到被捕獲為止。 * 也就是說，錯誤總是會被下一個 catch 語句捕獲。 */ fun01(3).then(value => { console.info('s01', value) }).then((value) => { console.info('s02', value) }).catch(e1 => { console.error('e01', e1) //e01 失敗時的回調 }) ``` **5. `Promise.all([p1, p2, .p3])`函數** * `var p = Promise.all([p1,p2,p3]);` * 可以將多個 Promise 實例封裝成一個新的 Promise 實例。 * `[p1, p2, p3]`參數不一定要求是數組，但是參數必須具有 iterator 接口，并且每個成員都必須是Promise 實例。 * 如果 p1 不是 Promise 實例，則交給`Promise.resolve(obj)`將其轉換為 Promise 實例。 * 新的 Promise 狀態： * 只有 p1、p2、p3 的狀態都變成 fulfilled（已成功），p 的狀態才會變成 fulfilled（已成功），此時 p1、p2、p3 的返回值組成一個數組，傳遞給 p 的回調函數。 * 只要 p1、p2、p3 之中有一個被 rejected（已失敗），p 的狀態就變成 rejected（已失敗），此時第一個被 rejected 實例的返回值，會傳遞給 p 的回調函數。 ```js const p01 = Promise.resolve('p01') const p02 = Promise.resolve('p02') const p03 = Promise.resolve('p03') //p04為rejected狀態 const p04 = Promise.reject('p04') const newP01 = Promise.all([p01, p02, p03]) const newP02 = Promise.all([p01, p04, p02]) newP01.then(value => { console.info(value) //['p01', 'p02', 'p03'] }) newP02.then((value, reason) => { console.info(value) console.info(reason) //p04 }) ``` **6. `Promise.race([p1, p2, .p3])`函數** * `var p = Promise.race([p1,p2,p3]);` * 與`Promise.all([p1, p2, .p3])`是一樣的功能，但是狀態的改變方式不同。 * 只要p1、p2、p3之中有一個實例率先改變狀態，p 的狀態就跟著改變。那個率先改變的 Promise 實例的返回值，就傳遞給 p 的返回值。 ```js const p01 = Promise.resolve('p01') const p02 = Promise.resolve('p02') const p03 = Promise.resolve('p03') const newP01 = Promise.race([p01, p02, p03]) newP01.then((value) => { console.info(value) //p01 }) ```