自定义Promise
作者：互联网
class Promise {
// 构造方法
constructor(executor) {
// resolve函数---里面还需要声明形参去接收实参
// 给实例对象的身上添加属性,直接通过this强行复制的方式去添加,这里的this就指的是新创建(new出来的)的实例对象 this.PromiseState = "pending"; this.PromiseResult = null; // 声明属性用来保存then方法中的回调函数 this.callBacks = [];
// 解决下方this指向问题,可以在这里先把this的指向保存下来 const that = this; // const _this = this; // const self = this; //三种保存this值的常见写法 function resolve(data) { // 判断Promise实例对象的状态(状态变为成功或者失败就不能再次改动) if (that.PromiseState !== "pending") return; // 1.修改对象的状态(PromiseState) // 注意:这里的this指向的不是新new出来实例对象,而是指向全局的Window对象(所以要提前把this的值保存下来) that.PromiseState = "fulfilled"; //或者为resolve(意思都一样) // 2.修改对象结果值(PromiseResult) that.PromiseResult = data; // 调用成功的回调函数 that.callBacks.forEach((item) => { setTimeout(() => { //加定时器让回调函数变为异步操作 item.onResolved(data); //forEach不会遍历数组元素为empty(空)的数组,所以加不加判断条件都不会影响性能 }); }); } // reject函数---里面还需要声明形参去接收实参 function reject(data) { // 判断Promise实例对象的状态(状态变为成功或者失败就不能再次改动) if (that.PromiseState !== "pending") return; // 1.修改对象的状态(PromiseState) that.PromiseState = "rejected"; // 2.修改对象结果值(PromiseResult) that.PromiseResult = data; // 调用失败的回调函数 that.callBacks.forEach((item) => { setTimeout(() => { item.onRejected(data); }); }); }
// 同步调用(执行器函数-executor) try { executor(resolve, reject); } catch (error) { // 修改Promise实例对象的状态为失败 reject(error); } }
// then方法的封装 then(onResolved, onRejected) { const that = this;
// 判断回调函数参数是否传递的是一个函数,如果不是一个函数,就给他添加一个默认值---值为函数 if (typeof onResolved !== "function") { onResolved = (value) => value; //value=>{return value} ES6 }
if (typeof onRejected !== "function") { onRejected = (reason) => { throw reason; }; } return new Promise((resolve, reject) => { // 封装函数 function callBack(type) { try { // 在这里还有传入实参,实参为Promise实例对象成功之后的结果值 // 获取成功函数的执行结果 let result = type(that.PromiseResult); //this指向有问题,在函数内部直接调用,指的是Window
// 判断result是不是Promise的实例对象 if (result instanceof Promise) { // 如果是Promise类型的对象 result.then( (v) => { resolve(v); }, (r) => { reject(r); } ); } else { // 结果的对象状态为成功 resolve(result); } } catch (error) { reject(error); } }
// 调用回调函数并且加上判断条件(判断Promise实例对象身上的PromiseState属性) // 这里的this指的是Promise实例对象(函数包裹第一层的时候里面的this指向的是实例对象,第二层指向的是Window,除非第二层写箭头函数,箭头函数没有自己的this,所以this指向的就是外部的定义时的this,就是Promise实例对象),标准说法为构造函数中的this,后期谁调用指谁 if (this.PromiseState === "fulfilled") { setTimeout(() => { //加定时器更改回调函数为异步执行 callBack(onResolved); }); }
if (this.PromiseState === "rejected") { setTimeout(() => { callBack(onRejected); }); }
// 判断pending状态 if (this.PromiseState === "pending") { // 保存回调函数 this.callBacks.push({ // ES6简写 // onResolved, //相当于onResolved:onResolved // onRejected, //相当于onRejected:onRejected
onResolved: function () { callBack(onResolved); }, onRejected: function () { callBack(onRejected); }, }); } }); }
// catch方法的封装 catch(onRejected) { return this.then(undefined, onRejected); }
// resolve方法的封装 static resolve(value) { return new Promise((resolve, reject) => { if (value instanceof Promise) { value.then( (v) => { resolve(v); }, (r) => { reject(r); } ); } else { resolve(value); } }); }
// reject方法的封装 static reject(reason) { return new Promise((resolve, reject) => { reject(reason); }); }
// all方法的封装 static all(promises) { // 声明一个变量,用来判断promises数组里的Promise对象状态十分都为成功 let count = 0; // 声明一个变量,用来保存成功的结果,结果是一个数组 let arr = [];
// 结果为Promise的对象 return new Promise((resolve, reject) => { // 遍历---这里的变量i必须使用let声明,不然i会被全局污染 for (let i = 0; i < promises.length; i++) { // parmises[i]是其中的一个Promise对象 promises[i].then( (v) => { // 得知对象的状态是成功的 // 如果每一个Promise对象的状态都是成功的,才能去执行resolve函数 count++; // 将当前Promise对象的结果存入到数组中 // arr.push(v);这种方法保存结果有点bug,异步的时候会导致顺序跟数组里面传进来Promise对象顺序不一致 arr[i] = v; // 判断:如果count的值等于promises数组的长度,就说明这个promises数组里的Promise数组状态都为成功 if (count === promises.length) { // 修改状态 resolve(arr); } }, (r) => { reject(r); } ); } }); }
// race方法的封装 static race(promises) { return new Promise((resolve, reject) => { for (let i = 0; i < promises.length; i++) { promises[i].then( (v) => { // 修改返回对象的状态为成功 resolve(v); }, (r) => { // 修改返回对象的状态为失败 reject(r); } ); } }); } }
// 给实例对象的身上添加属性,直接通过this强行复制的方式去添加,这里的this就指的是新创建(new出来的)的实例对象 this.PromiseState = "pending"; this.PromiseResult = null; // 声明属性用来保存then方法中的回调函数 this.callBacks = [];
// 解决下方this指向问题,可以在这里先把this的指向保存下来 const that = this; // const _this = this; // const self = this; //三种保存this值的常见写法 function resolve(data) { // 判断Promise实例对象的状态(状态变为成功或者失败就不能再次改动) if (that.PromiseState !== "pending") return; // 1.修改对象的状态(PromiseState) // 注意:这里的this指向的不是新new出来实例对象,而是指向全局的Window对象(所以要提前把this的值保存下来) that.PromiseState = "fulfilled"; //或者为resolve(意思都一样) // 2.修改对象结果值(PromiseResult) that.PromiseResult = data; // 调用成功的回调函数 that.callBacks.forEach((item) => { setTimeout(() => { //加定时器让回调函数变为异步操作 item.onResolved(data); //forEach不会遍历数组元素为empty(空)的数组,所以加不加判断条件都不会影响性能 }); }); } // reject函数---里面还需要声明形参去接收实参 function reject(data) { // 判断Promise实例对象的状态(状态变为成功或者失败就不能再次改动) if (that.PromiseState !== "pending") return; // 1.修改对象的状态(PromiseState) that.PromiseState = "rejected"; // 2.修改对象结果值(PromiseResult) that.PromiseResult = data; // 调用失败的回调函数 that.callBacks.forEach((item) => { setTimeout(() => { item.onRejected(data); }); }); }
// 同步调用(执行器函数-executor) try { executor(resolve, reject); } catch (error) { // 修改Promise实例对象的状态为失败 reject(error); } }
// then方法的封装 then(onResolved, onRejected) { const that = this;
// 判断回调函数参数是否传递的是一个函数,如果不是一个函数,就给他添加一个默认值---值为函数 if (typeof onResolved !== "function") { onResolved = (value) => value; //value=>{return value} ES6 }
if (typeof onRejected !== "function") { onRejected = (reason) => { throw reason; }; } return new Promise((resolve, reject) => { // 封装函数 function callBack(type) { try { // 在这里还有传入实参,实参为Promise实例对象成功之后的结果值 // 获取成功函数的执行结果 let result = type(that.PromiseResult); //this指向有问题,在函数内部直接调用,指的是Window
// 判断result是不是Promise的实例对象 if (result instanceof Promise) { // 如果是Promise类型的对象 result.then( (v) => { resolve(v); }, (r) => { reject(r); } ); } else { // 结果的对象状态为成功 resolve(result); } } catch (error) { reject(error); } }
// 调用回调函数并且加上判断条件(判断Promise实例对象身上的PromiseState属性) // 这里的this指的是Promise实例对象(函数包裹第一层的时候里面的this指向的是实例对象,第二层指向的是Window,除非第二层写箭头函数,箭头函数没有自己的this,所以this指向的就是外部的定义时的this,就是Promise实例对象),标准说法为构造函数中的this,后期谁调用指谁 if (this.PromiseState === "fulfilled") { setTimeout(() => { //加定时器更改回调函数为异步执行 callBack(onResolved); }); }
if (this.PromiseState === "rejected") { setTimeout(() => { callBack(onRejected); }); }
// 判断pending状态 if (this.PromiseState === "pending") { // 保存回调函数 this.callBacks.push({ // ES6简写 // onResolved, //相当于onResolved:onResolved // onRejected, //相当于onRejected:onRejected
onResolved: function () { callBack(onResolved); }, onRejected: function () { callBack(onRejected); }, }); } }); }
// catch方法的封装 catch(onRejected) { return this.then(undefined, onRejected); }
// resolve方法的封装 static resolve(value) { return new Promise((resolve, reject) => { if (value instanceof Promise) { value.then( (v) => { resolve(v); }, (r) => { reject(r); } ); } else { resolve(value); } }); }
// reject方法的封装 static reject(reason) { return new Promise((resolve, reject) => { reject(reason); }); }
// all方法的封装 static all(promises) { // 声明一个变量,用来判断promises数组里的Promise对象状态十分都为成功 let count = 0; // 声明一个变量,用来保存成功的结果,结果是一个数组 let arr = [];
// 结果为Promise的对象 return new Promise((resolve, reject) => { // 遍历---这里的变量i必须使用let声明,不然i会被全局污染 for (let i = 0; i < promises.length; i++) { // parmises[i]是其中的一个Promise对象 promises[i].then( (v) => { // 得知对象的状态是成功的 // 如果每一个Promise对象的状态都是成功的,才能去执行resolve函数 count++; // 将当前Promise对象的结果存入到数组中 // arr.push(v);这种方法保存结果有点bug,异步的时候会导致顺序跟数组里面传进来Promise对象顺序不一致 arr[i] = v; // 判断:如果count的值等于promises数组的长度,就说明这个promises数组里的Promise数组状态都为成功 if (count === promises.length) { // 修改状态 resolve(arr); } }, (r) => { reject(r); } ); } }); }
// race方法的封装 static race(promises) { return new Promise((resolve, reject) => { for (let i = 0; i < promises.length; i++) { promises[i].then( (v) => { // 修改返回对象的状态为成功 resolve(v); }, (r) => { // 修改返回对象的状态为失败 reject(r); } ); } }); } }
标签：resolve,函数,自定义,对象,Promise,reject,onRejected 来源： https://www.cnblogs.com/renag/p/15738060.html