要手寫前先看看用法，用法就是我們的需求
//直接呼叫
let promise=new Promise((resolve,reject)=>{
resolve('123')
})
promise.then(res=>{
console.log(res) //123
},err=>{
})
//不過我們一般不會這樣用 那就要說一下Promise是為了解決什麼問題產生的
複製程式碼
什麼叫promise 解決什麼問題的
// 三個狀態 resolved(解決) rejected(拒絕) pending(等待)
// promise中放了一個函式 函式executor 執行器
// resolve和reject都是函式 呼叫後可以讓狀態進行改變
// promise解決的問題有
//1) 回撥地獄
//2)解決 併發非同步，再同一時刻內獲取併發的結果
//3) 鏈式呼叫 （jquery）
//常用寫法
let promise=new Promise((resolve,reject)=>{
setTimeout(()=>{ //這個定時器就相當於我們的非同步程式碼 （比如ajax）
resolve('123')
})
})
promise.then(res=>{
console.log(res) //123
},err=>{
})
//鏈式呼叫 說明then返回的是一個Promise的例項
promise.then(res=>{
console.log(res)
},err=>{
}).then(res=>{
console.log(res)
},err=>{
})
//執行順序
let promise=new Promise((resolve,reject)=>{
resolve('123')
console.log(1)
})
promise.then(res=>{
console.log(res) //123
},err=>{
})
//列印順序 1，123
//預設promise中的executor(就是Promise中的引數)是同步執行的 //而then中的引數相當於回撥
//值的穿透 then不傳引數就預設走到下一then中
promise.then().then(res=>{
console.log(res) //123
},err=>{
})
//then的問題
// 最常見的 如果返回的是普通值 直接把值作為外層下一次then的引數
promise.then(res=>{
return 1 //返回除了Promise外的引數 直接把值作為外層下一次then的引數
},err=>{
}).then(res=>{
console.log(res) //1
},err=>{
})
// then方法呼叫後，返回的是一個新的promise //會把這個promise下的所有包括當前返回的promise執行完畢 取到成功或失敗的結果
//當做外層下一次then的成功或失敗的結果 執行過程中失敗就直接取失敗 //成功就一直執行 知道完後拿到結果
promise.then((data) => {
return new Promise((resolve,reject)=>{
resolve(new Promise((resolve,reject)=>{
resolve('123456');
}))
})
}, err => {
console.log( err);
}).then(res=>{
console.log(res) //123456
},err=>{
})
複製程式碼
進入主題 手寫promise
class Promise {
constructor(executor) {
// 預設狀態是等待態
this.status = 'pending';
//成功後的值
this.value = undefined;
//失敗的原因
this.reason = undefined;
// 存放成功的回撥 解決非同步呼叫 就是我們常用的寫法那種
this.onResolvedCallbacks = [];
// 存放失敗的回撥 用成功就有失敗
this.onRejectedCallbacks = [];
//resolve，reject 我們executor中的引數
let resolve = (data) => {
//當resolve呼叫時相當於成功 所以改變狀態為成功 reject同理
if (this.status === 'pending') {
this.value = data;
this.status = 'resolved';
this.onResolvedCallbacks.forEach(fn => fn());
}
}
let reject = (reason) => {
if (this.status === 'pending') {
this.reason = reason;
this.status = 'rejected';
this.onRejectedCallbacks.forEach(fn => fn());
}
}
try { // 執行時可能會發生異常
executor(resolve, reject);
} catch (e) {
reject(e); // promise失敗了
}
}
//then 也有兩個引數 成功的回撥 和失敗的回撥
then(onFulFilled, onRejected) {
// 解決onFulFilled,onRejected沒有傳的問題 值得穿透
onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : y => y;
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
let promise2; //then的返回值
if (this.status === 'resolved') {
promise2 = new Promise((resolve, reject) => {
// 成功的邏輯 失敗的邏輯
setTimeout(() => {//模擬Promise執行順序
try {
let x = onFulFilled(this.value);
// 看x是不是promise 如果是promise 取他的結果 作為promise2,成功的結果
// 如果要是返回一個普通值 作為promise2,成功的結果
// resolvePromise可以解析x和promise2之間的關係
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
}
if (this.status === 'rejected') {
promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e);
}
}, 0);
});
}
// 當前既沒有完成 也沒有失敗
if (this.status === 'pending') {
// 存放成功的回撥
promise2 = new Promise((resolve, reject) => {
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onFulFilled(this.value);
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e);
}
}, 0)
});
// 存放失敗的回撥
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
}, 0);
});
})
}
return promise2; // 呼叫then後返回一個新的promise
}
}
function resolvePromise(promise2, x, resolve, reject) {
// 判斷x是不是promise2
// [規範]裡規定了一段程式碼，這個程式碼可以實現我們的promise和別人的promise可以進行互動
if (promise2 === x) { // 不能自己等待自己完成
return reject(new TypeError('迴圈引用'));
}
// x不是null或者是物件或者函式
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
let called; // 防止成功後呼叫失敗
try { // 防止取then是出現異常 Object.defineProperty
let then = x.then; // 取x的then方法 {then:{}}
if (typeof then === 'function') { // 如果then是函式我就認為它是promise
// call 第一個引數是this ，後面的是成功的回撥和失敗的回撥
then.call(x, y => { // 如果y是promise就繼續遞迴解析promise
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject);
}, r => { // 只要失敗了就失敗了
if (called) return;
called = true;
reject(r);
});
} else { // then是一個普通物件，就直接成功即可1
resolve(x);
}
} catch (e) {
if (called) return;
called = true;
reject(e);
}
} else { // x = 123
resolve(x); // x就是一個普通值
}
}
// promise的語法糖，測試
Promise.deferred = Promise.defer = function () {
let dfd = {};
dfd.promise = new Promise((resolve,reject)=>{
dfd.resolve = resolve;
dfd.reject = reject;
})
return dfd;
}
// npm install promises-aplus-tests -g
// promises-aplus-tests 檔名
module.exports = Promise;
// 寫完promise會測試一下
複製程式碼
下課時間到 大家可以試著讀一讀Promise的規範 下次見