Promise-04 微任务和宏任务
2020-09-11 本文已影响0人
呆桃冲鸭冲鸭
宏任务： setTimeout、setInterval...
微任务：Promise、MutationObserver...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生promise</title>
</head>
<body>
</body>
<!-- 宏任务 script-->
<script>
console.log("Promise=====444");
// 宏任务
setTimeout(()=>{
console.log("Promise=====333");
},0);
// 三种状态 1.pending 2.fulfilled 3.rejected
let p = new Promise((resolve,reject)=>{
console.log("Promise=====111");
resolve("suc...");
// rejected("err...");
});
//微任务
p.then(res=>{
console.log("Promise=====222");
},err=>{
console.log(err);
});
// Promise=====444
// Promise=====111
// Promise=====222
// Promise=====333
</script>
</html>
<!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';
console.log("Promise=====444");
// 宏任务
setTimeout(()=>{
console.log("Promise=====333");
},0);
// 三种状态 1.pending 2.fulfilled 3.rejected
let myP = new MyPromise((resolve,reject)=>{
console.log("Promise=====111");
resolve("suc...");
// reject("err...");
});
//微任务
myP.then(res=>{
console.log("Promise=====222");
},err=>{
console.log(err);
});
</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
this.resolveFnArr.push(onResolved)
this.rejectFnArr.push(onRejected)
};
}
打印结果
