easyexcel（一）寫
阿新 • • 發佈：2020-08-24
1、建構函式Promise(excutor)
- excutor：
- Promise建構函式接受一個執行器作為引數(excutor，其實就是一個回撥函式)，在Promise建構函式執行時，會立即執行傳入的excutor。
- excutor函式被呼叫時，會傳入resolve, reject兩個函式作為引數；當resolve函式被呼叫，Promise狀態變更為fulfilled（完成）；當reject函式被呼叫，Promise狀態變更為rejected（失敗）
- 如果excutor內部丟擲異常，Promise狀態將直接變更為rejected，錯誤物件將作為結果返回。
const p = new Promise((resolve, reject) => { console.log("excutor函式會被立即執行"); resolve("狀態變更為:fulfilled"); // reject("狀態變更為:rejected"); // throw new Error('報錯，Promise狀態將直接變更為rejected') });
2、狀態
Promise一共有3中狀態：
3、例項方法
- then(onFulfilled, onRejected)
- 作用：
- 為Promise註冊onFulfilled和onRejected回撥
- 返回新的promise，實現鏈式呼叫
- 新的promise將以回撥函式返回值來resolve
- 特性：
- then方法本身會自動返回一個新的Promise物件，當然也可以手動在任意(onFulfilled或者onRejected)回撥函式中返回一個Promise物件
const p = new Promise((resolve, reject) => { console.log("excutor函式會被立即執行"); resolve("狀態變更為:fulfilled"); }); // then方法本身會返回一個promise p.then() .then() .then((res) => { console.log(res);//輸出：狀態變更為:fulfilled }); // then方法通過回撥函式可以返回promise p.then( (res) => { return new Promise((resolve, reject) => { resolve("onFulfilled中返回的Promise"); }); }, (reason) => { return new Promise((resolve, reject) => { resolve("onRejected回撥中也可以返回Promise"); }); } ).then((res) => { console.log(res); });
- then方法可以通過返回的Promise物件，實現鏈式呼叫
- 如果回撥函式返回的是普通值，那麼將會在下一個then中作為回撥函式引數被接收
- 如果回撥函式返回的是一個Promise, 下一個then方法將會等待這個Promise執行結束，並接收Promise的執行結果
const p2 = new Promise((resolve, reject) => { console.log("excutor函式會被立即執行"); resolve("狀態變更為:fulfilled"); }); p2.then(res => { return new Promise((resolve, reject) => { setTimeout(() => { resolve('promise執行完畢') }, 1000); }) }).then(res => { console.log(res)//等待1秒鐘，輸出：promise執行完畢 })
- 如果沒有傳入回撥函式，Promise將自動為then方法註冊回撥函式，並在回撥函式中將接收到的值返回，傳遞給下一個then，實現值的穿透。
//沒有給then註冊回撥，發生值穿透 const p3 = new Promise((resolve, reject) => { resolve(1); }); p3.then(2).then(4).then(console.log); //1
- then方法中不允許將本身返回的promise物件作為返回值
const p4 = p3.then(res => { // 不允許，將會報錯 // TypeError: Chaining cycle detected for promise #<Promise> return p4 })
- catch(onRejected)
- 作用
- 給Promise新增onRejected回撥
- 特性
- 返回一個新的Promise
- 新的Promise將以回撥函式返回值來resolve
const promise = new Promise((resolve, reject) => { reject(100); }); promise .catch((reason) => { console.log(reason); //100 return 200; //catch函式返回值將作為新Promise的resolve結果 }) .then((res) => { // 新Promise執行結果 console.log(res); //200 });
- finally(finallyCallback)
- 作用
- 給Promise新增一個事件處理回撥函式
- 特性
- 無論成功還是失敗，都會呼叫傳入的finallyCallback
- finallyCallback會返回一個新的Promise
- finallyCallback內部不能獲取到Promise執行結果
const promise = new Promise((resolve, reject) => { resolve(100); }); promise .finally((res) => { console.log("finally回撥函式無論成功或者失敗，始終會被執行"); // finally回撥函式內獲取不到promise執行結果 console.log(res); }) .then((res) => { // finally回撥函式返回一個新的promise，實現鏈式呼叫 console.log(res); });
4、靜態方法
- Promise.all(promiseArray)
- 作用：
- 接受一個數組作為引數，將執行結果以陣列形式順序返回
- 併發執行陣列中的promise物件
- 特性：
- 接受一個數組作為引數，陣列元素可以是普通值，也可以是promise物件
- 執行結果以陣列形式返回，陣列中元素跟傳入的promiseArray一一對應
- 如果傳入的陣列中元素是普通值，直接原樣將對應值放入結果陣列中
- 如果傳入的陣列中元素是promise物件，將併發執行對應的Promise物件，並等待執行結束，返回結果
const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve("p1"); }, 2000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => { resolve("p2"); }, 1000); }); const promiseAll = Promise.all([1, 2, promise1, 3, 4, promise2, 5]); promiseAll.then((res) => { //併發執行promise //執行結果與傳入的陣列一一對應 //會等待所有任務執行完畢之後統一返回結果 console.log(res); //[1,2,"p1",3,4,"p2",5] });
- 如果傳入的陣列中某一項執行失敗，那麼Promise將會執行失敗
const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve("p1"); }, 2000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => { reject('我這該死的溫柔，居然執行失敗了') }, 1000); }); const promiseAll = Promise.all([1, 2, promise1, 3, 4, promise2, 5]); promiseAll.then((res) => { // 任何一個任務執行失敗 ，整個promise將執行失敗 console.log(res); }).catch(e => { //任何一個任務失敗，將導致整個Promise執行失敗 console.log('fail',e) });
- Promise.allSettled(promiseArray)
非正式版，目前處於stage4階段，尚未完全被瀏覽器支援
- 作用：
- 同Promise.all
- 特性：
- 等待陣列中所有任務執行完畢，返回一個數組
- 無論成功還是失敗，都會有返回結果
- 其它同Promise.all
const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve("p1"); }, 2000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => { reject("我這該死的溫柔，居然執行失敗了"); }, 1000); }); const promiseAll = Promise.allSettled([1, 2, promise1, 3, 4, promise2, 5]); promiseAll .then((res) => { /** Promise.allSettled執行結果 [ { status: 'fulfilled', value: 1 }, { status: 'fulfilled', value: 2 }, { status: 'fulfilled', value: 'p1' }, { status: 'fulfilled', value: 3 }, { status: 'fulfilled', value: 4 }, { status: 'rejected', reason: '我這該死的溫柔，居然執行失敗了' }, { status: 'fulfilled', value: 5 } ] */ console.log(res); }) .catch((e) => { console.log("fail", e); });
- Promise.race(promiseArray)
- 作用
- 接受一個數組, 併發執行陣列中的任務
- 誰執行塊，就返回誰的結果，無論成功還是失敗
- 一般用來做網路超時功能
const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve("p1"); }, 2000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => { resolve("p2"); }, 1000); }); const promise3 = new Promise((resolve, reject) => { // 假設500毫秒後網路超時 setTimeout(() => { reject("超時了"); }, 500); }); const promiseRace = Promise.race([promise1, promise2, promise3]); promiseRace .then((res) => { console.log(res); }) .catch((e) => { // 誰執行塊，就返回誰 console.log("fail", e); });
- Promise.reject(reason)
- 作用：
- 返回一個狀態為失敗的Promise，並將失敗資訊傳遞給對應的處理方法
Promise.reject("rejected")
.then((res) => {
console.log('value', res);
})
.catch((reason) => {
// reason rejected
console.log('reason', reason);
});
- Promise.resolve(value)
- 作用：
- 接受一個值，返回一個Promise
- 特性：
- 如果value是一個普通值，則將普通值作為新Promise的resolve結果
- 如果value是一個Promise，則將value原樣返回
Promise.resolve(100).then((res) => { console.log(res); //100 }); const promise = new Promise((resolve, reject) => { reject(200); }); promise .then((res) => { console.log(res); //200 });
作者：小灰