Promise原理理解, 手写一个Promise
1. Promis 常用情况
new Promise((resolve, reject) => {
resolve(4111111)
}).then(res => {
console.log(res, "res");
}).catch(err => {
console.log(err, "err");
})
Promise.resolve(422222).then(res => {
console.log(res, "res");
})
Promise.reject(433333).catch(err => {
console.log(err, "err");
})
let p1 = new Promise((resolve, reject) => {
resolve(4444444)
})
let p2 = new Promise((resolve, reject) => {
resolve(4555555)
})
Promise.all([p1, p2]).then(ress => {
console.log(ress, "ress");
}).catch(err => {
console.log(err, "err");
})
let p3 = new Promise((resolve, reject) => {
reject(4666666)
})
let p4 = new Promise((resolve, reject) => {
reject(4777777)
})
Promise.race([p3, p4]).then(res => {
console.log(res, "res");
}).catch(err => {
console.log(err, "err");
})
2. Promise 类结构
/**
* Promise异常
*/
class PromiseError extends Error {
constructor(message) {
super(message);
this.name = "(in promise)";
}
}
// 是否纯在失败回调函数
let hasCatch = false;
class Promise {
/**
* 构成函数参数
* @param (resolve, reject) => {)
*/
constructor(executor) {
}
/**
* then方法, 可传入成功的回调函数和失败的回调函数
* @param res => {}
* @param err => {}
*/
then(onResolved, onRejected) {
}
/**
* catch方法 可传入失败的回调函数
* @param err => {}
*/
catch(onRejected){
}
/**
* 静态 resolve 方法 设置成功的值
* @param result
*/
static resolve(result){
}
/**
* 静态 reject 方法 设置失败的值
* @param result
*/
static reject(result) {
}
/**
* 静态 all 方法, 传入 promise 数组, 所有 promise 都成功时触发then的回调,
* 或者其中一个 promise 失败, 触发 catch 回调
* @param promises
*/
static all(promises){
}
/**
* 静态 race 方法, 传入 promise 数组, 其中 promise 状态变更时,就会触发回调
* @param promises
*/
static race (promises) {
}
}
3. 构造函数
/**
* 构成函数参数
* @param (resolve, reject) => {)
*/
constructor(executor) {
// pending 初始, fulfilled 成功, rejected 失败
this.PromiseState = 'pending';
// resolve 或 reject 函数设置的设置的返回值
this.PromiseResult = null
// 声明一个数组,用来存放then方法中的回调
this.callbacks = []
/**
* resolve 方法,传入一个值, 调用成功回调
* @param data
*/
let resolve = (data) => {
// 判断状态, 如果不是初始, 则直接 return
if (this.PromiseState != 'pending') return
// 状态改为成功
this.PromiseState = 'fulfilled';
// 赋值回调函数的返回值
this.PromiseResult = data;
// 异步调用回调函数,用setTimeout模拟异步
setTimeout(() => {
this.callbacks.forEach(item => {
item.onResolved(data);
})
})
}
/**
* reject 方法,传入一个值, 调用失败回调
* @param data
*/
let reject = (data) => {
// 判断状态, 如果不是初始, 则直接 return
if (this.PromiseState != 'pending') return
// 状态改为失败
this.PromiseState = 'rejected';
// 赋值回调函数的返回值
this.PromiseResult = data;
// 异步调用回调函数,用setTimeout模拟异步
setTimeout(() => {
// 判断是否存在失败回调,存在则执行回调,不存在则抛异常
if (hasCatch) {
this.callbacks.forEach(item => {
item.onRejected(data);
})
} else {
hasCatch = true
throw new PromiseError(data);
}
})
}
// 执行传入的函数
try {
executor(resolve, reject)
} catch (err) {
reject(err);
}
}
4. then 函数
/**
* then方法, 可传入成功的回调函数和失败的回调函数
* @param res => {}
* @param err => {}
*/
then(onResolved, onRejected) {
// 判断 onResolved 是否是函数,如果不是函数,则改为函数
if (typeof onResolved !== 'function') {
onResolved = value => value
}
if(onRejected){
hasCatch = true;
}
// 判断 onRejected 是否是函数,如果不是函数,则改为函数
if (typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 返回 一个 promise 对象
return new Promise((resolve, reject) => {
// 回调函数调用
let callback = (callFn) => {
try {
// 调用回调函数
let result = callFn(this.PromiseResult);
// 判断返回值是否是 promise 对象
if(result instanceof Promise){
result.then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
}else {
resolve(result)
}
}catch (err) {
reject(err);
}
}
// 判断状态, 如果是成功, 则将调用成功回调函数
if (this.PromiseState == 'fulfilled') {
setTimeout(() => {
callback(onResolved);
})
}
// 判断状态, 如果是失败, 则将调用失败回调函数
if (this.PromiseState == 'rejected') {
setTimeout(() => {
callback(onRejected);
})
}
// 判断状态, 如果是初始, 则将回调函数插入回调函数数组
if (this.PromiseState == 'pending') {
this.callbacks.push({
onResolved() {
callback(onResolved);
}, onRejected() {
callback(onRejected);
}
})
}
})
}
5. catch 函数
/**
* catch方法 可传入失败的回调函数
* @param err => {}
*/
catch(onRejected) {
// 直接调用then函数
return this.then(undefined, onRejected)
}
6. then 和 catch 调用结果
6.1. then
6.2. catch
7. resolve函数
/**
* 静态 resolve 方法 设置成功的值
* @param result
*/
static resolve(result) {
return new Promise((resolve, reject) => {
if(result instanceof Promise){
result.then(res => {
resolve(res)
}).catch(err => {
reject(result);
})
}else {
resolve(result);
}
})
}
7.1 resolve 使用
8 reject 函数
/**
* 静态 reject 方法 设置失败的值
* @param result
*/
static reject(result) {
return new Promise((resolve, reject) => {
reject(result);
})
}
8.1 reject 函数使用
9. all 函数
/**
* 静态 all 方法, 传入 promise 数组, 所有 promise 都成功时触发then的回调,
* 或者其中一个 promise 失败, 触发 catch 回调
* @param promisess
*/
static all(promisess) {
return new Promise((resolve, reject) => {
// 回调触发次数
let count = 0;
// 对调返回参数数组
let results = [];
promisess.forEach(item => {
item.then(res => {
results.push(res);
count ++;
if(count >= promisess.length){
resolve(results)
}
}).catch(err => {
reject(err)
})
})
})
}
9.1. all 函数使用
都是 resolve
包含 reject
10. race 函数
/**
* 静态 race 方法, 传入 promise 数组, 其中 promise 状态变更时,就会触发回调
* @param promisess
*/
static race(promisess) {
return new Promise((resolve, reject) => {
promisess.forEach(item => {
item.then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
})
}
}
10.1. race 函数使用
11. 完整的代码
/**
* Promise异常
*/
class PromiseError extends Error {
constructor(message) {
super(message);
this.name = "(in promise)";
}
}
// 是否纯在失败回调函数
let hasCatch = false;
class Promise {
/**
* 构成函数参数
* @param (resolve, reject) => {)
*/
constructor(executor) {
// pending 初始, fulfilled 成功, rejected 失败
this.PromiseState = 'pending';
// resolve 或 reject 函数设置的设置的返回值
this.PromiseResult = null
// 声明一个数组,用来存放then方法中的回调
this.callbacks = []
/**
* resolve 方法,传入一个值, 调用成功回调
* @param data
*/
let resolve = (data) => {
// 判断状态, 如果不是初始, 则直接 return
if (this.PromiseState != 'pending') return
// 状态改为成功
this.PromiseState = 'fulfilled';
// 赋值回调函数的返回值
this.PromiseResult = data;
// 异步调用回调函数,用setTimeout模拟异步
setTimeout(() => {
this.callbacks.forEach(item => {
item.onResolved(data);
})
})
}
/**
* reject 方法,传入一个值, 调用失败回调
* @param data
*/
let reject = (data) => {
// 判断状态, 如果不是初始, 则直接 return
if (this.PromiseState != 'pending') return
// 状态改为失败
this.PromiseState = 'rejected';
// 赋值回调函数的返回值
this.PromiseResult = data;
// 异步调用回调函数,用setTimeout模拟异步
setTimeout(() => {
// 判断是否存在失败回调,存在则执行回调,不存在则抛异常
if (hasCatch) {
this.callbacks.forEach(item => {
item.onRejected(data);
})
} else {
hasCatch = true
throw new PromiseError(data);
}
})
}
// 执行传入的函数
try {
executor(resolve, reject)
} catch (err) {
reject(err);
}
}
/**
* then方法, 可传入成功的回调函数和失败的回调函数
* @param res => {}
* @param err => {}
*/
then(onResolved, onRejected) {
// 判断 onResolved 是否是函数,如果不是函数,则改为函数
if (typeof onResolved !== 'function') {
onResolved = value => value
}
if(onRejected){
hasCatch = true;
}
// 判断 onRejected 是否是函数,如果不是函数,则改为函数
if (typeof onRejected !== 'function') {
onRejected = reason => {
throw reason
}
}
// 返回 一个 promise 对象
return new Promise((resolve, reject) => {
// 回调函数调用
let callback = (callFn) => {
try {
// 调用回调函数
let result = callFn(this.PromiseResult);
// 判断返回值是否是 promise 对象
if(result instanceof Promise){
result.then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
}else {
resolve(result)
}
}catch (err) {
reject(err);
}
}
// 判断状态, 如果是成功, 则将调用成功回调函数
if (this.PromiseState == 'fulfilled') {
setTimeout(() => {
callback(onResolved);
})
}
// 判断状态, 如果是失败, 则将调用失败回调函数
if (this.PromiseState == 'rejected') {
setTimeout(() => {
callback(onRejected);
})
}
// 判断状态, 如果是初始, 则将回调函数插入回调函数数组
if (this.PromiseState == 'pending') {
this.callbacks.push({
onResolved() {
callback(onResolved);
}, onRejected() {
callback(onRejected);
}
})
}
})
}
/**
* catch方法 可传入失败的回调函数
* @param err => {}
*/
catch(onRejected) {
// 直接调用then函数
return this.then(undefined, onRejected)
}
/**
* 静态 resolve 方法 设置成功的值
* @param result
*/
static resolve(result) {
return new Promise((resolve, reject) => {
if(result instanceof Promise){
result.then(res => {
resolve(res)
}).catch(err => {
reject(result);
})
}else {
resolve(result);
}
})
}
/**
* 静态 reject 方法 设置失败的值
* @param result
*/
static reject(result) {
return new Promise((resolve, reject) => {
reject(result);
})
}
/**
* 静态 all 方法, 传入 promise 数组, 所有 promise 都成功时触发then的回调,
* 或者其中一个 promise 失败, 触发 catch 回调
* @param promisess
*/
static all(promisess) {
return new Promise((resolve, reject) => {
// 回调触发次数
let count = 0;
// 对调返回参数数组
let results = [];
promisess.forEach(item => {
item.then(res => {
results.push(res);
count ++;
if(count >= promisess.length){
resolve(results)
}
}).catch(err => {
reject(err)
})
})
})
}
/**
* 静态 race 方法, 传入 promise 数组, 其中 promise 状态变更时,就会触发回调
* @param promisess
*/
static race(promisess) {
return new Promise((resolve, reject) => {
promisess.forEach(item => {
item.then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
})
}
}