手撸promise【二、Promise源码】【代码详细注释/测试案例完整】
手撸Promise即完成promise的主要功能
- 声明构造函数
- resolve与reject
- throw抛出异常改变状态
- Promise的对象状态只能修改一次
- then方法执行回调
- 同步任务回调的执行
- 异步任务回调的执行
- 指定多个回调的实现
- 同步修改状态then方法结果返回
- 异步修改状态then方法结果返回
- Promise的API
- 构造函数： then，catch
- 函数对象： resolve，reject，all，race方法
一、 index.html
测试手撸的promise.js
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./promise.js">script>
head>
<body>
<script>
let p = new Promise((resolve, reject) => {
resolve('OK');
// reject("error");
// throw "err";
setTimeout(() => {
// resolve('OK');
// reject('err');
// ............................抛出错误该咋办。。。。。。。。。。。。。。
// throw "err";
}, 1000);
});
console.log(p);
// p.then(value => {
// console.log(value);
// }, reason => {
// console.warn(reason);
// })
const res = p.then(value => {
// alert(value);
return 'hello';
// return new Promise((resolve, reject) => {
// resolve("success");
// // reject("error");
// })
// throw "fail";
}, reason => {
alert(reason);
})
console.log(res);
let res2 = p.catch(reason => {
console.warn(reason);
})
console.log(res2);
// 异常穿透，值传递
p.then(value => {
// console.log(111);
// throw '失败了'
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => {
console.warn(reason);
})
// resolve方法测试用例
const p1 = Promise.resolve('OK');
const p2 = Promise.resolve(new Promise((resolve, reject) => {
reject("errpr");
}));
const p3 = Promise.resolve(Promise.resolve('Oh Yeah!'));
console.log(p1);
// reject测试用例
const r1 = Promise.reject('Error');
const r2 = Promise.reject(new Promise((resolve, reject) => {
resolve('ok')
}))
console.log(r1);
console.log(r2);
// 调用all方法
let a1 = new Promise((resolve, reject) => {
resolve('OK');
})
let a2 = Promise.resolve('Success');
let a3 = Promise.resolve('Oh Yeah');
let result3 = Promise.all([a1, a2, a3]);
console.log(result3);
// 调用race方法
let ra1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
})
})
let ra2 = Promise.reject('Successs');
let ra3 = Promise.resolve('Oh Yeah!')
let result4 = Promise.race([ra1, ra2, ra3]);
console.log(result4);
// then方法回调的异步执行
let then1 = new Promise((resolve, reject) => {
resolve('OK');
console.log(111);
})
then1.then(value => {
console.log(222);
})
console.log(333);
script>
body>
html>
二、 promise.js
function Promise(executor) {
// 添加属性
this.PromiseState = 'pending';
this.PromiseResult = null;
// 生命属性
this.callbacks = [];
const self = this;
// resolve函数
function resolve(data) {
// Promise对象状态只能修改一次
if (self.PromiseState !== 'pending') return;
// 1. 修改对象的状态（promiseState）
self.PromiseState = 'fulfilled';
// 2. 设置对象结果值（promiseResult）
self.PromiseResult = data;
// 调用成功的回调函数
// if (self.callback.onResolved) {
// self.callback.onResolved(data);
// }
setTimeout(() => {
self.callbacks.forEach(item => {
item.onResolved(item);
})
})
}
// reject函数
function reject(data) {
if (self.PromiseState !== 'pending') return;
self.PromiseState = 'rejected';
self.PromiseResult = data;
// 调用失败的回调函数
// if (self.callback.onRejected) {
// self.callback.onRejected(data);
// }
setTimeout(() => {
self.callbacks.forEach(item => {
item.onRejected(data);
})
})
}
try {
// 同步调用【执行器函数】
executor(resolve, reject);
} catch (e) {
// 修改Promise对象状态为失败
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected) {
const self = this;
// 判断回调函数参数->异常穿透
if (typeof onRejected !== 'function') {
onRejected = reason => {
throw reason;
}
}
if (typeof onResolved !== 'function') {
onResolved = value => value;
// value => { return value; }
}
return new Promise((resolve, reject) => {
// 封装函数
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
// 判断
if (result instanceof Promise) {
// 如果是Promise类型的对象
result.then(v => {
resolve(v);
}, r => {
reject(r);
})
} else {
// 结果的对象状态为成功
resolve(result);
}
} catch (e) {
reject(e);
}
}
if (this.PromiseState === 'fulfilled') {
setTimeout(() => {
callback(onResolved);
})
}
if (this.PromiseState === 'rejected') {
setTimeout(() => {
callback(onRejected);
})
}
// 判断pending状态
if (this.PromiseState === 'pending') {
// 保存回调函数
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
})
}
})
}
// 添加 catch方法
Promise.prototype.catch = function(onRejected) {
return this.then(undefined, onRejected);
}
// 添加resolve方法
Promise.resolve = function(value) {
// 返回promise对象
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then(v => {
resolve(v);
}, r => {
reject(r);
})
} else {
resolve(value);
}
})
}
// 添加reject方法
Promise.reject = function(reason) {
return new Promise((resolve, reject) => {
reject(reason);
})
}
// 添加all方法
Promise.all = function(promises) {
// 返回结果为promise对象
return new Promise((resolve, reject) => {
// 声明变量
let count = 0;
let arr = [];
// 遍历
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
count++;
arr[i] = v;
if (count === promises.length) {
// 修改状态
resolve(arr);
}
}), r => {
reject(r);
}
}
})
}
// 添加 race 方法
Promise.race = function(promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
// 修改返回对象的状态为[成功]
resolve(v);
}, r => {
reject(r);
})
}
})
}
三、 测试返回结果展示：
