<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my</title>
</head>
<body>
<p>test my</p>
</body>
<script type="module">
// type="module" 严格模式
import MyPromise from './promise.js';
// 三种状态 1.pending 2.fulfilled 3.rejected
let myP = new MyPromise((resolve,reject)=>{
resolve("suc...");
// reject("err...");
});
//微任务
// myP.then(res=>{
// console.log("Promise=====222");
// },err=>{
// console.log(err);
// });
// then链式调用 三种返还值（不返还、返还普通的字符串或数字、返还promise对象）最终返还promise对象
// let p = myP.then(res=>{
// console.log(res)
// // return 111;
// return new MyPromise((resolve,reject)=>{
// resolve("222...");
// });
// });
// p.then(res=>{
// console.log(res)
// })
// 相关方法 catch all race
myP.then(res=>{
console.log("res===");
}).catch(err=>{
console.log(err,'err===')
});
let p1 = new MyPromise((resolve,reject)=>{
setTimeout(()=>{
resolve("suc...1");
},1000);
});
let p2 = new MyPromise((resolve,reject)=>{
setTimeout(()=>{
resolve("suc...2");
},2000);
});
Promise.all([p1,p2]).then(res=>{
console.log(res)
});
Promise.race([p1,p2]).then(res=>{
console.log(res)
});
let p3 = Promise.resolve(123);
console.log(p3)
let p4 = Promise.reject(1234);
console.log(p4)
</script>
</html>
export default class MyPromise{
constructor(handle){
this.state = "pending";
this.result = undefined;
this.resolveFnArr = [];
this.rejectFnArr = [];
handle(this._resolve.bind(this),this._reject.bind(this));
};
_resolve(val){
this.state = "fulfilled";
this.result = val;
// 执行then的回调 变成微任务执行
const run = () => {
let cb;
while(cb = this.resolveFnArr.shift()){
cb && cb(val);
};
};
const observer = new MutationObserver(run);
observer.observe(document.body,{attributes: true});
document.body.setAttribute("my",Math.random());
};
_reject(val){
this.state = "rejected";
this.result = val;
// 执行then的回调 变成微任务执行
const run = () => {
let cb;
while(cb = this.rejectFnArr.shift()){
cb && cb(val);
};
};
const observer = new MutationObserver(run);
observer.observe(document.body,{attributes: true});
document.body.setAttribute("my",Math.random());
};
then(onResolved,onRejected){
// 异步onResolved,onRejected不会立即执行；是在调取_resolve、_reject再执行
// 保存onResolved、onRejected
return new MyPromise((resolve,reject)=>{
let resolveFn = val => {
let res = onResolved && onResolved(val);
//判断是否是MyPromise对象
if(res instanceof MyPromise){
// return res.then((res)=>{
// resolve(res)
// })
return res.then(resolve)
}
resolve(res);
};
let rejectedFn = val => {
onRejected && onRejected(val);
reject(val);
};
this.resolveFnArr.push(resolveFn)
this.rejectFnArr.push(rejectedFn)
});
};
catch(cb){
return this.then(undefined,cb)
};
static all(lists){
return new MyPromise((resolve)=>{
let arr = [];
let num = 0;
lists.forEach(item => {
item.then(res=>{
arr.push(res);
num ++;
if(num===lists.length){
resolve()
};
});
});
});
}
static race(lists){
return new MyPromise((resolve,reject)=>{
lists.forEach(item => {
item.then(res=>{
resolve(res);
},err=>{
reject(err);
});
});
});
}
static resolve(val){
return new MyPromise((resolve)=>{
resolve(val)
});
}
static reject(val){
return new MyPromise((undefined,reject)=>{
reject(val)
});
}
}
网友评论