refactor: 分离手写promise
This commit is contained in:
parent
bb2ac051a1
commit
d8433e0682
53
js/js异步.js
53
js/js异步.js
@ -23,56 +23,3 @@
|
|||||||
// 执行顺序不是1,2,3,4,5,而是1,3,4,5,2,这是由于js会优先执行同步代码,当同步代码执行完成之后
|
// 执行顺序不是1,2,3,4,5,而是1,3,4,5,2,这是由于js会优先执行同步代码,当同步代码执行完成之后
|
||||||
// 会查看有没有微任务,如果有,就把微任务放到执行栈里面执行,执行完微任务之后再看宏任务队列里面有没任务,
|
// 会查看有没有微任务,如果有,就把微任务放到执行栈里面执行,执行完微任务之后再看宏任务队列里面有没任务,
|
||||||
// 如果有的话就把宏任务放到执行栈里面执行,知道全部执行完毕
|
// 如果有的话就把宏任务放到执行栈里面执行,知道全部执行完毕
|
||||||
|
|
||||||
|
|
||||||
// 手写一个Promise
|
|
||||||
function MyPromise(fun){ // 构造函数接收一个函数
|
|
||||||
this.status = MyPromise.PENDING // 设置默认状态为待定
|
|
||||||
try {
|
|
||||||
fun.call(this, MyPromise.resolve.bind(this), MyPromise.reject.bind(this))
|
|
||||||
} catch(err){
|
|
||||||
// 如果MyPromise.prototype.then里面有err=>{}处理函数就传递给它
|
|
||||||
this.status = MyPromise.REJECT
|
|
||||||
this.result = err
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Promise 状态常量
|
|
||||||
MyPromise.PENDING = 0
|
|
||||||
MyPromise.FULFILLED = 1
|
|
||||||
MyPromise.REJECT = 2
|
|
||||||
|
|
||||||
|
|
||||||
MyPromise.resolve = function(res) {
|
|
||||||
if(this.status === MyPromise.REJECT) return // Promise 的状态一旦确定就不能修改
|
|
||||||
this.status = MyPromise.FULFILLED
|
|
||||||
this.result = res
|
|
||||||
}
|
|
||||||
|
|
||||||
MyPromise.reject = function(err) {
|
|
||||||
if(this.status === MyPromise.FULFILLED) return // Promise 的状态一旦确定就不能修改
|
|
||||||
this.status = MyPromise.REJECT
|
|
||||||
this.result = err
|
|
||||||
}
|
|
||||||
|
|
||||||
MyPromise.prototype = {
|
|
||||||
then: function(res, err){
|
|
||||||
// Promise的.then要加入到任务队列,不能同步执行用setTimeout模拟
|
|
||||||
var context = this // 保存的上下文
|
|
||||||
setTimeout(function(){
|
|
||||||
// 在.then中无论是onFulfilled的返回值还是onReject的返回值,都会交给下一个.then的onFulfilled处理,只有出现异常的时候才后交给下一个.then的onReject处理
|
|
||||||
try{
|
|
||||||
if(context.status === MyPromise.FULFILLED && res) context.result = res(context.result)
|
|
||||||
if(context.status === MyPromise.REJECT && err) {
|
|
||||||
context.result =err(context.result)
|
|
||||||
context.status = MyPromise.FULFILLED
|
|
||||||
}
|
|
||||||
}catch(err){
|
|
||||||
context.result = err
|
|
||||||
context.status = MyPromise.REJECT
|
|
||||||
}
|
|
||||||
}, 0);
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
52
js/手写Promise.js
Normal file
52
js/手写Promise.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
|
||||||
|
// 手写一个Promise
|
||||||
|
function MyPromise(fun){ // 构造函数接收一个函数
|
||||||
|
this.status = MyPromise.PENDING // 设置默认状态为待定
|
||||||
|
try {
|
||||||
|
fun.call(this, MyPromise.resolve.bind(this), MyPromise.reject.bind(this))
|
||||||
|
} catch(err){
|
||||||
|
// 如果MyPromise.prototype.then里面有err=>{}处理函数就传递给它
|
||||||
|
this.status = MyPromise.REJECT
|
||||||
|
this.result = err
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Promise 状态常量
|
||||||
|
MyPromise.PENDING = 0
|
||||||
|
MyPromise.FULFILLED = 1
|
||||||
|
MyPromise.REJECT = 2
|
||||||
|
|
||||||
|
|
||||||
|
MyPromise.resolve = function(res) {
|
||||||
|
if(this.status === MyPromise.REJECT) return // Promise 的状态一旦确定就不能修改
|
||||||
|
this.status = MyPromise.FULFILLED
|
||||||
|
this.result = res
|
||||||
|
}
|
||||||
|
|
||||||
|
MyPromise.reject = function(err) {
|
||||||
|
if(this.status === MyPromise.FULFILLED) return // Promise 的状态一旦确定就不能修改
|
||||||
|
this.status = MyPromise.REJECT
|
||||||
|
this.result = err
|
||||||
|
}
|
||||||
|
|
||||||
|
MyPromise.prototype = {
|
||||||
|
then: function(res, err){
|
||||||
|
// Promise的.then要加入到任务队列,不能同步执行用setTimeout模拟
|
||||||
|
var context = this // 保存的上下文
|
||||||
|
setTimeout(function(){
|
||||||
|
// 在.then中无论是onFulfilled的返回值还是onReject的返回值,都会交给下一个.then的onFulfilled处理,只有出现异常的时候才后交给下一个.then的onReject处理
|
||||||
|
try{
|
||||||
|
if(context.status === MyPromise.FULFILLED && res) context.result = res(context.result)
|
||||||
|
if(context.status === MyPromise.REJECT && err) {
|
||||||
|
context.result =err(context.result)
|
||||||
|
context.status = MyPromise.FULFILLED
|
||||||
|
}
|
||||||
|
}catch(err){
|
||||||
|
context.result = err
|
||||||
|
context.status = MyPromise.REJECT
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user