<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
const PEDDING = 'pedding'
const RESOLVE = 'resolve'
const REJECT = 'reject'
function MyPromise(fn){
const that = this
that.state = PEDDING
that.value = null
that.resolveCallbacks = []
that.rejectCallbacks = []
function resolve(value) {
if(that.state === PEDDING) {
that.state = RESOLVE
that.value = value
that.resolveCallbacks.map(cb => cb(that.value))
}
}
function reject(value) {
if(that.state === PEDDING) {
that.state = REJECT
that.value = value
that.rejectCallbacks.map(cb => cb(that.value))
}
}
try {
fn(resolve, reject)
}catch(e){
reject(e)
}
}
MyPromise.prototype.then = function(onFullfilled, onRejected){
const that = this
onFullfilled = typeof onFullfilled === 'function'? onFullfilled : v => v
onRejected = typeof onRejected === 'function' ? onRejected : r => {
throw r
}
if (that.state === PEDDING) {
that.resolveCallbacks.push(onFullfilled)
that.rejectCallbacks.push(onRejected)
}
if(that.state === RESOLVE) {
onFullfilled(that.value)
}
if(that.state === REJECT) {
onRejected(that.value)
}
}
console.log('script start')
async function async1() {
await async2()
console.log('async1 end')
}
function async2() {
console.log('async2 end')
}
async1()
setTimeout(()=>{
console.log('settimeout')
}, 0)
new MyPromise((resolve) => {
console.log('promise start')
resolve()
}).then(()=>{
console.log('promise1')
})
console.log('script end')
// script start => async2 end => promise start => promise1 => script end => async1 end => settimeout
</script>
</html>