/**
*
*
*/
(function (window) {
/**
* 构造函数
* excutor: 执行器函数
*/
function Promise(excutor) {
// 将当前Promise 对象保存起来
const self = this;
self.status = "pending"; // promise 对象指定status属性,初使值为pending
self.data = undefined; // 给promis 指定一个用于存储结果数据的属性
self.callbacks = []; // 每一个元素结构 {onResolved(){}, onRejectd(){}}
// 改变状态的回调函数
function resolve(value) {
// 状态只能改一次 如果当前状态不是pending.直接结束
if (self.status !== "pending") return;
// 将状态改为resolved
self.status = "resolved";
// 保存value数据
self.data = value;
// 如果有代执行的callback函数,立即异步执行回调函数
if (self.callbacks.length > 0) {
self.callbacks.forEach((callbacksObj) => {
// 异步执行 用setTimeout模拟
setTimeout(() => {
callbacksObj.onResolved(value);
}, 0);
});
}
}
// 改变状态的回调函数
function reject(reason) {
self.status = "rejected";
self.data = reason;
// 如果有代执行的callback函数,立即异步执行回调函数
if (self.callbacks.length > 0) {
self.callbacks.forEach((callbacksObj) => {
// 异步执行 用setTimeout模拟
setTimeout(() => {
callbacksObj.onRejected(reason);
}, 0);
});
}
}
// 执行 执行器函数
// 如果执行器抛出异常,promis 变为失败
try {
excutor(resolve, reject);
} catch (error) {
reject(error);
}
}
/**
* then
*/
Promise.prototype.then = function (onResolved, onRejected) {
const self = this;
// 向后传递成功的value
onResolved =
typeof onResolved === "function" ? onResolved : (value) => value;
// 指定默认的失败的回调,实现错误/异常穿透. (向后传递失败的reason)
onRejected =
typeof onRejected === "function"
? onRejected
: (reason) => {
throw reason;
};
// 返回一个新的promise对象
return new Promise((resolve, reject) => {
/**
* 调用指定的回调函数处理, 根据执行结果,改变return 的promise状态
*/
const handle = (callback) => {
/**
* 1. 如果抛出异常,return 的promise 就会失败,reason 就是error
* 2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
* 3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
*/
try {
const result = callback(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
};
if (self.status === "pending") {
// 当前状态还是pending状态,将回调函数保存起来(先执行回调函数,然后改状态)
self.callbacks.push({
onResolved(value) {
// handle(onResolved);
try {
const result = onResolved(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
},
onRejected() {
// onRejected(self.data);
try {
const result = onRejected(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
},
});
} else if (self.status === "resolved") {
setTimeout(() => {
// .then 返回的promise状态由onResolved状态决定
/**
* 1. 如果抛出异常,return 的promise 就会失败,reason 就是error
* 2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
* 3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
*/
try {
const result = onResolved(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
}, 0);
} else {
setTimeout(() => {
// .then 返回的promise状态由onResolved状态决定
/**
* 1. 如果抛出异常,return 的promise 就会失败,reason 就是error
* 2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
* 3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
*/
try {
const result = onRejected(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
}, 0);
}
});
};
/**
* catch
*/
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
};
/**
* Promise.resolve
*/
Promise.resolve = function (value) {
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(
(value) => {
resolve(value);
},
(reason) => {
reject(reason);
}
);
} else {
resolve(value);
}
});
};
/**
* Promise.reject
*/
Promise.reject = function (reason) {
return new Promise((resolve, reject) => {
reject(reason);
});
};
/**
* Promise.all
*/
Promise.all = function (promises) {
let data = new Array(promises.length);
let i = 0;
return new Promise((resolve, reject) => {
promises.forEach((p, index) => {
Promise.resolve(p).then(
(value) => {
data[index] = value;
i++;
if (i === promises.length) {
resolve(data);
}
},
(reason) => {
reject(reason);
}
);
});
});
};
/**
* Promise.race
*/
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
promises.forEach((p) => {
Promise.resolve(p).then(
(value) => resolve(value),
(reason) => reject(reason)
);
});
});
};
// async 函数返回值是一个promise对象
// promise 对象结果由async函数执行的返回值决定
// await 右侧的表达式一般为promise对象,也可以是其他的值
// 如果表达式是promise对象,awaite返回的是promise成功的值
// 如果是一个其他值,直接将这个值作为awaite的返回值
// await必须写在async函数中,但是async函数中可以没有await
// 如果await的promise失败了,就会抛出异常,需要用try catch 来捕获处理
// 宏任务: 定时器回调, Dom事件回调, ajax回调
// 微任务: promise 回调/ mutationObserver 回调
// 先执行完所有的初始化同步代码,然后去执行队列里面的执行函数,队列里面先去执行微队列,然后执行完微队列里面所有的任务,
// 然后去执行宏队列,如果在执行宏队列的时候,产生了新的微任务,则执行完微任务再去接着执行宏队列 (每次执行宏任务之前
// 要保证把所有的微任务全部执行完, (先去看微任务里面有没有任务,有然后全部执行完)然后才去执行下一个宏任务)
})(window);
new Promise((resolve, reject) => {});
// 如果是一般值,p1成功,value就是这个值
const p1 = Promise.resolve(2);
// 如果是成功的primie, p2成功,value 就是这个promise成功的value
const p2 = Promise.resolve(Promise.resolve(3));
// 如果是失败的promise. p3失败,reason 是这个promise 的reason
const p3 = Promise.resolve(Promise.reject(4));
// Promise函数对象的reject方法
// 返回一个指定reason的失败的Promise
Promise.reject = function (reason) {
// 返回一个失败的promise
return new Promise((resolve, reject) => {
reject(reason);
});
};
// promise 函数对象的resolve方法
// 返回一个指定结果的成功的promies
Promise.resolve = function (value) {
// 返回一个成功或者失败的promise
return new Promise((resolve, reject) => {
// 如果value 是一个promise
if (value instanceof Promise) {
// 使用value结果作为promise结果
value.then(resolve, reject);
} else {
// value 不是promise => promise 变为成功,数据是value
resolve(value);
}
});
};
// Promise.all
// 返回一个新的promise
Promise.all = function (promises) {
const values = new Array(promises.length); // 用来保存所有成功values的数组
// 记录成功promise的数量
let i = 0;
return new Promise((resolve, reject) => {
// 遍历promise获取每一个promise的结果
promises.forEach((p, index) => {
Promise.resolve(p).then(
(value) => {
// p成功,将成功的value保存到values中
// 不能直接values.push(value)这样不能保证顺序,成功的会先push
values[index] = value;
i++;
// 如果全部成功,将return的promise改变成功
if (i === promises.length) {
resolve(values);
}
},
(reason) => {
// 只要有一个失败的,return的promise就失败
reject(reason);
}
);
});
});
};
// Promise.race
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
// 遍历promise获取每一个promise的结果
promises.forEach((p, index) => {
p.then(
(value) => {
// 一旦有成功的。返回的变为成功
resolve(value);
},
(reason) => {
// 只要有一个失败的,return的promise就失败
reject(reason);
}
);
});
});
};
/**
*
*
*/
(function (window) {
class Promise {
/**
* 构造函数
* excutor: 执行器函数
*/
constructor(excutor) {
// 将当前Promise 对象保存起来
const self = this;
self.status = "pending"; // promise 对象指定status属性,初使值为pending
self.data = undefined; // 给promis 指定一个用于存储结果数据的属性
self.callbacks = []; // 每一个元素结构 {onResolved(){}, onRejectd(){}}
// 改变状态的回调函数
function resolve(value) {
// 状态只能改一次 如果当前状态不是pending.直接结束
if (self.status !== "pending") return;
// 将状态改为resolved
self.status = "resolved";
// 保存value数据
self.data = value;
// 如果有代执行的callback函数,立即异步执行回调函数
if (self.callbacks.length > 0) {
self.callbacks.forEach((callbacksObj) => {
// 异步执行 用setTimeout模拟
setTimeout(() => {
callbacksObj.onResolved(value);
}, 0);
});
}
}
// 改变状态的回调函数
function reject(reason) {
self.status = "rejected";
self.data = reason;
// 如果有代执行的callback函数,立即异步执行回调函数
if (self.callbacks.length > 0) {
self.callbacks.forEach((callbacksObj) => {
// 异步执行 用setTimeout模拟
setTimeout(() => {
callbacksObj.onRejected(reason);
}, 0);
});
}
}
// 执行 执行器函数
// 如果执行器抛出异常,promis 变为失败
try {
excutor(resolve, reject);
} catch (error) {
reject(error);
}
}
/**
* then
*/
then(onResolved, onRejected) {
const self = this;
// 向后传递成功的value
onResolved =
typeof onResolved === "function" ? onResolved : (value) => value;
// 指定默认的失败的回调,实现错误/异常穿透. (向后传递失败的reason)
onRejected =
typeof onRejected === "function"
? onRejected
: (reason) => {
throw reason;
};
// 返回一个新的promise对象
return new Promise((resolve, reject) => {
/**
* 调用指定的回调函数处理, 根据执行结果,改变return 的promise状态
*/
const handle = (callback) => {
/**
* 1. 如果抛出异常,return 的promise 就会失败,reason 就是error
* 2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
* 3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
*/
try {
const result = callback(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
};
if (self.status === "pending") {
// 当前状态还是pending状态,将回调函数保存起来(先执行回调函数,然后改状态)
self.callbacks.push({
onResolved(value) {
// handle(onResolved);
try {
const result = onResolved(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
},
onRejected() {
// onRejected(self.data);
try {
const result = onRejected(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
},
});
} else if (self.status === "resolved") {
setTimeout(() => {
// .then 返回的promise状态由onResolved状态决定
/**
* 1. 如果抛出异常,return 的promise 就会失败,reason 就是error
* 2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
* 3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
*/
try {
const result = onResolved(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
}, 0);
} else {
setTimeout(() => {
// .then 返回的promise状态由onResolved状态决定
/**
* 1. 如果抛出异常,return 的promise 就会失败,reason 就是error
* 2. 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
* 3. 如果回调函数返回的是promise, 则return的promise的结果就是这个promsie的结果
*/
try {
const result = onRejected(self.data);
if (result instanceof Promise) {
result.then(
(value) => resolve(value), // 当result 成功的时候,return 的promsie 也成功
(reason) => reject(reason) // 当result 失败的时候,return 的promsie 也失败
);
} else {
// 如果回调函数执行返回非Promise, return 的promise 就会成功,成功的value值就是返回的值
resolve(result);
}
} catch (error) {
reject(error);
}
}, 0);
}
});
}
/**
* catch
*/
catch(onRejected) {
return this.then(undefined, onRejected);
}
/**
* Promise.resolve
*/
static resolve = function (value) {
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(
(value) => {
resolve(value);
},
(reason) => {
reject(reason);
}
);
} else {
resolve(value);
}
});
};
/**
* Promise.reject
*/
static reject = function (reason) {
return new Promise((resolve, reject) => {
reject(reason);
});
};
/**
* Promise.all
*/
static all = function (promises) {
let data = new Array(promises.length);
let i = 0;
return new Promise((resolve, reject) => {
promises.forEach((p, index) => {
Promise.resolve(p).then(
(value) => {
data[index] = value;
i++;
if (i === promises.length) {
resolve(data);
}
},
(reason) => {
reject(reason);
}
);
});
});
};
/**
* Promise.race
*/
static race = function (promises) {
return new Promise((resolve, reject) => {
promises.forEach((p) => {
Promise.resolve(p).then(
(value) => resolve(value),
(reason) => reject(reason)
);
});
});
};
}
})(window);