<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function myPromise(excutor) {
// 定义状态
let self = this;
self.status = 'pending'; // 默认状态
self.value = null; // 成功结果
self.reason = null; // 失败原因
// 由于异步任务不会执行（因为状态始终是pending进行中的状态）所以要添加一个缓存数据来支持异步任务执行
self.onFulfilledCallbacks = [];
self.onRejectedCallbacks = [];
// 成功调用的函数
function resolve(value) {
if (self.status === 'pending') {
self.value = value; // 保存成功结果
self.status = 'fulfilled'; // 修改状态为成功
// 异步处理
self.onFulfilledCallbacks.forEach(item => item(value))
}
}
// 失败调用的函数
function reject(reason) {
if (self.status === 'pending') {
self.reason = reason; // 失败原因
self.status = 'rejected'; // 修改状态为失败
// 异步处理
self.onRejectedCallbacks.forEach(item => item(reason))
}
}
try {
// new Promse初始化执行传入这个回调函数
excutor(resolve, reject)
} catch (err) {
reject(err)
}
}
// .then回调函数
myPromise.prototype.then = function (onFulfilled, onRejected) {
// 判断传入的是否为函数，是：直接使用，不是：定义一个方法
onFulfilled = typeof (onFulfilled) === 'function' ? onFulfilled : function (data) { resolve(data) };
onRejected = typeof (onRejected) === 'function' ? onRejected : function (err) { throw err };
let self = this;
// 异步处理（状态为pending且是调用then回调时）
if (self.status === 'pending') {
self.onFulfilledCallbacks.push(onFulfilled);
self.onRejectedCallbacks.push(onRejected);
}
}
// 异步任务，1秒后执行上面封装的Promsie
let demo = new myPromise((resolve, reject) => {
console.log('各位同学很帅');
setTimeout(() => {
resolve(11)
}, 1000)
})
demo.then((data) => {
console.log(data);
})
</script>
</body>
</html>
4192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
