前端|Promise实现前端|Promise|javascript

版本1：function函数

/** * 函数名-Promise-[会覆盖原始的全局Promise] * @constructor */ function Promise(executor) { //声明属性 this.PromiseState = 'pending' //状态属性 this.PromiseResult = null //结果属性 this.callBacks = new Array() //存放then()中的回调函数 const self = this //获取this指针的引用 //声明:resolve function resolve(data) { //判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次] if (self.PromiseState !== 'pending') return // 1-修改状态{PromiseState} self.PromiseState = 'resolved' //2-设置对象结果值{PromiseResult} self.PromiseResult = data //异步执行：调用成功时对应的回调函数setTimeout(() => { self.callBacks.forEach((item) => { item.onResolved(data) }) }, 0) }//声明:reject function reject(err) { //判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次] if (self.PromiseState !== 'pending') return // 1-修改状态{PromiseState} self.PromiseState = 'rejected' //2-设置对象结果值{PromiseResult} self.PromiseResult = err //异步执行：调用失败时对应的回调函数 setTimeout(() => { self.callBacks.forEach((item) => { item.onRejected(err) }) }, 0) }//异常捕获 try { //executor-执行器函数是同步调用的 executor(resolve, reject) } catch (e) { //修改promise对象状态为rejected reject(e) } }//函数原型-挂载then()方法 Promise.prototype.then = function(onResolved, onRejected) { let self = this //获取this指针 //判断回调函数参数 if (typeof onResolved !== 'function') { onResolved = (value) => { throw value } } if (typeof onRejected !== 'function') { onRejected = (reason) => { throw reason } } //返回结果 return new Promise((resolve, reject) => { //公共函数块封装 function callback(_callMethod) { try { //获取回调函数的执行结果 let result = _callMethod(self.PromiseResult) if (result instanceof Promise) { //promise对象类型 result.then( (data) => { resolve(data) }, (err) => { reject(err) } ) } else { //结果的对象状态为成功 resolve(result) } } catch (e) { reject(e) } } //根据状态PromiseState判断——调用回调函数 //成功resolved情况 if (this.PromiseState === 'resolved') { //异步执行 setTimeout(() => { callback(onResolved) }, 0) } //失败rejected情况 if (this.PromiseState === 'rejected') { setTimeout(() => { callback(onRejected) }, 0) } //未决定pending状态 if (this.PromiseState === 'pending') { //todo:保存回调函数-//异步任务处理 this.callBacks.push({ onResolved: function() { callback(onResolved) }, onRejected: function() { callback(onRejected) }, }) } }) }//函数原型-挂载catch()方法 Promise.prototype.catch = function(onRejected) { return this.then(undefined, onRejected) }//函数-挂载resolve()方法 Promise.resolve = function(value) { return new Promise((resolve, reject) => { if (value instanceof Promise) { value.then( (v) => { resolve(v) }, (e) => { reject(e) } ) } else { resolve(value) } }) }//函数-挂载reject()方法 Promise.reject = function(value) { return new Promise((resolve, reject) => { reject(value) }) }//函数-挂载all()方法 Promise.all = function(promises) { return new Promise((resolve, reject) => { let flag = 0 //标记值 let resultData = https://www.it610.com/article/new Array() //存放成功结果的数组 //判断参数数组中的promise的状态值 for (let i = 0; i < promises.length; i++) { promises[i].then( (data) => { //执行第1个函数-状态成功 flag++ resultData[i] = data //通过下标赋值-保证元素的顺序 if (flag === promises.length) { //修改状态 resolve(resultData) } }, (err) => { //执行第2个函数-状态失败 reject(err) } ) } }) }//函数-挂载race方法 Promise.race = function(promises) { return new Promise((resolve, reject) => { //遍历数组元素-[Promise的状态只能修改一次] for (let i = 0; i < promises.length; i++) { //判断状态值 promises[i].then( (data) => { //修改状态-成功 resolve(data) }, (err) => { //修改状态-失败 reject(err) } ) } }) }

版本2：class类

class Promise { //构造函数 constructor(executor) { //声明属性 this.PromiseState = 'pending' //状态属性 this.PromiseResult = null //结果属性 this.callBacks = new Array() //存放then()中的回调函数 const self = this //获取this指针的引用 //声明:resolve function resolve(data) { //判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次] if (self.PromiseState !== 'pending') return // 1-修改状态{PromiseState} self.PromiseState = 'resolved' //2-设置对象结果值{PromiseResult} self.PromiseResult = data //异步执行：调用成功时对应的回调函数setTimeout(() => { self.callBacks.forEach((item) => { item.onResolved(data) }) }, 0) }//声明:reject function reject(err) { //判断当前Promise对象的状态是否已经修改-[保证状态只能修改一次] if (self.PromiseState !== 'pending') return // 1-修改状态{PromiseState} self.PromiseState = 'rejected' //2-设置对象结果值{PromiseResult} self.PromiseResult = err //异步执行：调用失败时对应的回调函数 setTimeout(() => { self.callBacks.forEach((item) => { item.onRejected(err) }) }, 0) }//异常捕获 try { //executor-执行器函数是同步调用的 executor(resolve, reject) } catch (e) { //修改promise对象状态为rejected reject(e) } }//then方法 then(onResolved, onRejected) { let self = this //获取this指针 //判断回调函数参数 if (typeof onResolved !== 'function') { onResolved = (value) => { throw value } } if (typeof onRejected !== 'function') { onRejected = (reason) => { throw reason } } //返回结果 return new Promise((resolve, reject) => { //公共函数块封装 function callback(_callMethod) { try { //获取回调函数的执行结果 let result = _callMethod(self.PromiseResult) if (result instanceof Promise) { //promise对象类型 result.then( (data) => { resolve(data) }, (err) => { reject(err) } ) } else { //结果的对象状态为成功 resolve(result) } } catch (e) { reject(e) } } //根据状态PromiseState判断——调用回调函数 //成功resolved情况 if (this.PromiseState === 'resolved') { //异步执行 setTimeout(() => { callback(onResolved) }, 0) } //失败rejected情况 if (this.PromiseState === 'rejected') { setTimeout(() => { callback(onRejected) }, 0) } //未决定pending状态 if (this.PromiseState === 'pending') { //todo:保存回调函数-//异步任务处理 this.callBacks.push({ 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) }, (e) => { reject(e) } ) } else { resolve(value) } }) }//reject static reject(value) { return new Promise((resolve, reject) => { reject(value) }) }//all static all(promises) { return new Promise((resolve, reject) => { let flag = 0 //标记值 let resultData = https://www.it610.com/article/new Array() //存放成功结果的数组 //判断参数数组中的promise的状态值 for (let i = 0; i < promises.length; i++) { promises[i].then( (data) => { //执行第1个函数-状态成功 flag++ resultData[i] = data //通过下标赋值-保证元素的顺序 if (flag === promises.length) { //修改状态 resolve(resultData) } }, (err) => { //执行第2个函数-状态失败 reject(err) } ) } }) }//race static race(promises) { return new Promise((resolve, reject) => { //遍历数组元素-[Promise的状态只能修改一次] for (let i = 0; i < promises.length; i++) { //判断状态值 promises[i].then( (data) => { //修改状态-成功 resolve(data) }, (err) => { //修改状态-失败 reject(err) } ) } }) } }

测试代码

="text/javascript" src="https://www.it610.com/article/utils/promiseClass.js"> > console.log(Promise.resolve(new Promise((resolve, reject) => { resolve("SUCCESS"); })))console.log(Promise.resolve(Promise.resolve("ahikds")))console.log(Promise.reject("ahiksdla"))let p1 = new Promise((resolve, reject) => { resolve("a"); }) let p2 = Promise.resolve("b") let p3 = new Promise((resolve, reject) => { resolve("c"); })console.log(Promise.all([p1, p2, p3]))console.log(Promise.race([p1, p2, p3]));

【前端|Promise实现】