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. 后记
- 只是初具雏形
- 简单理解下 就行