1. 前言
- 玩下吧 手写 promise,看看能写成啥样
2. promise 基础结构
setTimeout(() => {
var random = Math.random()
if(random < 0.7) resolve("成功的数据")
else reject("错误的信息")
}, 1000);
})
promise.then(function(data){
console.log(data)
}, function(err){
console.log(err)
})
3. 手写`promise
- 搞个
Promise类 或者构造函数- 原型上挂个
then和catch
3. 构造函数代码
function MyPromise(callback){
console.log(1, "执行了MyPromise的构造函数");
// 每一个promise对象内部,都会有一个状态信息, 有三个可能值
// pending 状态 表示等待状态, promise对象的默认状态,
// resolve 状态 表示成功状态, 当调用了resolve函数时,状态变成成功状态
// reject 状态 表示失败状态, 当调用了reject函数时,状态变成失败状态
// 注意: 状态值只能变化一次,一旦变更为成功或失败状态,则会一致保持这个状态
this.state = "pending"; // 初始化状态
console.log("out", this) // promise对象
// myResolve和myReject是在外部调用的,所以函数中this指向并不是当前promise对象
let self = this
// 定义成功时的回调函数
function myResolve(data){
console.log(3, data, this, self) // Object [global] , promise
self.state = "resolve" // 修改状态值为成功
self.value = data; // 成功时value属性记录成功数据
self.success(data) // 成功时,调用then函数中成功回调
}
// 定义失败时的回调函数
function myReject(err){
console.log(3, err, this, self)
self.state = "reject" // 修改状态值为失败
self.msg = err; // 失败时用msg属性记录失败信息
self.fail(err) // 失败时,调用then函数中失败回调
}
// MyPromise在创建对象时,其回调函数会直接执行, 所以在构造函数中直接调用, 并传入成功和失败状态对应的函数
callback(myResolve, myReject);
}
4. 原型
// then方法是promise对象调用的方法,所以定义到构造函数原型中
MyPromise.prototype.then = function(success, fail=()=>{}){
// 由于then函数可以在任意时刻调用, 所以调用then时,promise状态值不确定
if(this.state == "pending"){
// 说明此时异步任务还未结束, 还不能调用success或fail, 此时可以把success和fail这个回调函数传入this这个promise对象, 在异步任务结束后调用
this.success = success;
this.fail = fail;
}
if(this.state == "resolve"){
// 如果当前状态是成功状态, 则调用then参数中的第一个成功回调
success(this.value) // 参数传入成功数据
}
if(this.state == "reject"){
// 如果当前状态是失败状态, 则调用then参数中的第二个失败回调
fail(this.msg) // 参数传入失败信息
}
// then函数返回当前promise对象, 用于链式调用
return this;
}
5. 使用
// 使用构造函数创建实例对象, 创建时,构造函数会执行
var p = new MyPromise(function(resolve, reject){
console.log(2, '执行了myPeomise回调')
setTimeout(() => {
var random = Math.random()
if(random < 0.7) resolve("成功的数据")
else reject("错误的信息")
}, 1000);
})
// 在异步任务结束前,调用then函数
p.then(function(data){
console.log(4, data)
},function(err){
console.log(4, err)
}).then(function(){})
// 在异步任务结束后, 调用then函数
setTimeout(() => {
p.then(function(data){
console.log(5, data)
},function(err){
console.log(5, err)
})
}, 2000);
6. 后记
- 只是初具雏形
- 简单理解下 就行
参考资料
promise应用
async/await
promise