要手写前先看看用法，用法就是我们的需求
//直接调用
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的规范 下次见
