// 要模拟promise的构造函数 function MyPromise(fn) { let that = this; this.data = null; // 要resolve的数据 this.err = null; // 要reject的数据 this.resolveCallback = null; // 存放resolve的回调,即 .then 里面的函数 this.rejectCallback = null; // 存放reject的回调,即 .catch 里面的函数 // 自定义resolve函数 this.resolve = function (data) { that.data = data; // 将resolve的数据存起来 that.then(that.resolveCallback); // resolve函数被执行了就要(再次)执行then方法 }; // 自定义reject函数,同上的resolve this.reject = function (err) { that.err = err; that.catch(that.rejectCallback) }; /* 将自定义的resolve、reject函数 当参数 传到 后面的实例化构造函数中, */ fn(this.resolve, this.reject) } /* 将方法定义到构造方法的prototype上,这样的好处是: 通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存。 当然也可不通过原型,将方法fun以函数的形式定义在构造函数之外,直接在构造函数内 this.fun = fun 也是一样的 */ MyPromise.prototype.then = function (callback) { // callback 已经赋值给了 this.resolveCallback ,说明是第二次执行此方法,是在resolve函数里执行的此方法 this.resolveCallback && this.resolveCallback(this.data); // this.resolveCallback 是null,说明是第一次执行此方法,将callback 赋值给 this.resolveCallback this.resolveCallback || (this.resolveCallback = callback); // 因为存在 .then().catch() 链式调用,所以要return自己 return this; } // 同上面的 MyPromise.prototype.then MyPromise.prototype.catch = function (callback) { this.rejectCallback && this.rejectCallback(this.err); this.rejectCallback || (this.rejectCallback = callback); return this; } // 验证一下 let obj = new MyPromise((resolve, reject) => { setTimeout(() => { resolve("成功的数据") }, 1000) setTimeout(() => { reject("错误信息") }, 2000) }) obj.then(res => { console.log("success:",res) }).catch(err => { console.log("fail:",err) })