Promise自定义
发布日期：2021-05-04 20:48:08
浏览次数：29
分类：原创文章
本文共 55156 字，大约阅读时间需要 183 分钟。
1.初始化结构搭建
1.1 结构:
1.2 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { resolve('ok') }) p.then(value => { console.log(value); },reason => { console.log(reason); }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ }//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ }2.resolve和reject实现
2.1 代码：
在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { resolve('ok') // reject('error') }) console.log(p); // p.then(value => { // console.log(value); // },reason => { // console.log(reason); // }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 定义resolve函数 function resolve(data){ // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data } // 定义reject函数 function reject(data){ // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data } // 执行executor函数 executor(resolve,reject)}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ }3.throw抛出异常改变状态
3.1 代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { // resolve('ok') // reject('error') throw '出错了--error' }) console.log(p); // p.then(value => { // console.log(value); // },reason => { // console.log(reason); // }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 定义resolve函数 function resolve(data){ // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data } // 定义reject函数 function reject(data){ // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) console.log(error); }}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ }4.Promise状态只能修改一次
4.1 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { resolve('ok') reject('error') }) console.log(p); // p.then(value => { // console.log(value); // },reason => { // console.log(reason); // }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) console.log(error); }}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ }5.then方法执行回调函数
5.1 代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { resolve('ok') reject('error') }) console.log(p); p.then(value => { console.log(value); },reason => { console.log(reason); }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) console.log(error); }}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ //执行成功回调函数 if(this.PromiseState === 'fulfilled') onResolved(this.PromiseResult) //执行失败回调函数 if(this.PromiseState === 'rejected') onRejected(this.PromiseResult)}6.异步任务回调函数的执行
6.1 执行器中执行异步代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { setTimeout(function(){ resolve('ok') },1000) }) console.log(p); p.then(value => { console.log(value); },reason => { console.log(reason); }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) console.log(error); }}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ //执行成功回调函数 if(this.PromiseState === 'fulfilled') onResolved(this.PromiseResult) //执行失败回调函数 if(this.PromiseState === 'rejected') onRejected(this.PromiseResult)}
6.2 原因：（为什么后台没有打印这结果） console.log(value);
异步调用，代码往下执行到p.then()方法位置，因为先指定回调函数，此时状态是pending，p.then()方法不执行，定时器开始执行，再改变状态后，p.then()方法的位置已经执行过了，所以没有输出结果
6.2 解决：
根据原因，在改变状态的时候调用回调函数。
6.3 代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { setTimeout(function(){ resolve('ok') },1000) // reject('error') }) console.log(p); p.then(value => { console.log(value); },reason => { console.log(reason); }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callback = { } // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data if(that.callback) that.callback.onResolved(data) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data if(that.callback) that.callback.onRejected(data) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) console.log(error); }}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ //执行成功回调函数 if(this.PromiseState === 'fulfilled') onResolved(this.PromiseResult) //执行失败回调函数 if(this.PromiseState === 'rejected') onRejected(this.PromiseResult) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks = { onResolved, onRejected } }}7.指定多个回调函数的实现
7.1 初始：添加多个回调
7.2 最后一个回调才会执行
alet(value) 没有输出
7.3 解决:
- 改变callback为callbacks数组，保存每次回调函数的结果
// 保存then方法的回调函数 this.callbacks = []- resolve()/rejecte()里遍历callbacks数组
// 变成数组来保存 that.callbacks.forEach(item => { item.onResolved(data) })that.callbacks.forEach(item => { item.onRejected(data) })- then方法中修改保存回调函数
// 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved, onRejected }) }
7.4 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { setTimeout(function(){ resolve('ok') },1000) // reject('error') }) console.log(p); p.then(value => { alert(value) },reason => { alert(value) }) p.then(value => { console.log(value); },reason => { console.log(reason); }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved(data) }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected(data) }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) console.log(error); }}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ //执行成功回调函数 if(this.PromiseState === 'fulfilled') onResolved(this.PromiseResult) //执行失败回调函数 if(this.PromiseState === 'rejected') onRejected(this.PromiseResult) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved, onRejected }) }}8.同步修改状态then方法结果返回
8.1 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { // setTimeout(function(){ // resolve('ok') // },1000) resolve('error') }) let result = p.then(value => { console.log(value); // return new Promise((resolve,reject) => { // resolve('pl') // }) throw 'errpr' },reason => { console.log(reason); }) console.log(result); </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved(data) }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected(data) }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) console.log(error); }}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ return new Promise((resolve,reject) => { //执行成功回调函数 if(this.PromiseState === 'fulfilled'){ try { let rs = onResolved(this.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行失败回调函数 if(this.PromiseState === 'rejected') onRejected(this.PromiseResult) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved, onRejected }) } }) }8.同步修改状态then方法结果返回
8.1 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { setTimeout(function(){ reject('ok') },1000) // resolve('error') }) let result = p.then(value => { console.log(value); throw '123' },reason => { console.log(reason); }) console.log(result); </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved() }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) }}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ const self = this return new Promise((resolve,reject) => { //执行成功回调函数 if(this.PromiseState === 'fulfilled'){ try { let rs = onResolved(this.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行失败回调函数 if(this.PromiseState === 'rejected') onRejected(this.PromiseResult) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ try { let rs = onResolved(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } }, onRejected:function(){ try { let rs = onRejected(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } }, }) } }) }9.then方法的完善和优化
9.1 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { setTimeout(function(){ resolve('ok') },1000) // resolve('123') }) let result = p.then(value => { console.log(value); return '123' },reason => { console.log(reason); }) console.log(result); </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved() }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) }}//添加 then 方法Promise.prototype.then = function (onResolved,onRejected){ const self = this return new Promise((resolve,reject) => { function changeState(type){ try { let rs = type(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行成功回调函数 if(this.PromiseState === 'fulfilled') changeState(onResolved) //执行失败回调函数 if(this.PromiseState === 'rejected') changeState(onRejected) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ changeState(onResolved) }, onRejected:function(){ changeState(onRejected) } }) } }) }10.catch方法异常穿透及值传递
10.1 异常穿透代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { setTimeout(function(){ reject('error') },1000) // reject('123') // throw '123' }) p.then(value => { console.log(111); }) .then(value => { console.log(222); }) .catch(reason => { console.log(reason); }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 保存catch方法的回调函数 this.catchCallbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved() }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) that.catchCallbacks.forEach(item => { item.onRejected() }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) }}//添加 then() 方法Promise.prototype.then = function (onResolved,onRejected){ const self = this // 异常穿透 if(typeof onRejected !== 'function') { onRejected = reason => { throw reason } } // 值传递 p.then()...... if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { function changeState(type){ try { let rs = type(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行成功回调函数 if(this.PromiseState === 'fulfilled') changeState(onResolved) //执行失败回调函数 if(this.PromiseState === 'rejected') changeState(onRejected) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ changeState(onResolved) }, onRejected:function(){ changeState(onRejected) } }) } }) }// 添加catch()方法Promise.prototype.catch = function(onRejected){ return this.then(undefined,onRejected)}10.2 值传递代码：
在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> let p = new Promise((resolve,reject) => { setTimeout(function(){ resolve('error') },1000) // reject('123') // throw '123' }) p.then() .then(value => { console.log(111); }) .then(value => { console.log(222); }) .catch(reason => { console.log(reason); }) </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 保存catch方法的回调函数 this.catchCallbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved() }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) that.catchCallbacks.forEach(item => { item.onRejected() }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) }}//添加 then() 方法Promise.prototype.then = function (onResolved,onRejected){ const self = this // 异常穿透 if(typeof onRejected !== 'function') { onRejected = reason => { throw reason } } // 值传递 p.then()...... if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { function changeState(type){ try { let rs = type(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行成功回调函数 if(this.PromiseState === 'fulfilled') changeState(onResolved) //执行失败回调函数 if(this.PromiseState === 'rejected') changeState(onRejected) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ changeState(onResolved) }, onRejected:function(){ changeState(onRejected) } }) } }) }// 添加catch()方法Promise.prototype.catch = function(onRejected){ return this.then(undefined,onRejected)}11.Promise.resolve()的封装
11.1 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> const p = Promise.resolve(Promise.resolve('ok')); console.log(p); </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 保存catch方法的回调函数 this.catchCallbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved() }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) that.catchCallbacks.forEach(item => { item.onRejected() }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) }}//添加 then() 方法Promise.prototype.then = function (onResolved,onRejected){ const self = this // 异常穿透 if(typeof onRejected !== 'function') { onRejected = reason => { throw reason } } // 值传递 p.then()...... if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { function changeState(type){ try { let rs = type(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行成功回调函数 if(this.PromiseState === 'fulfilled') changeState(onResolved) //执行失败回调函数 if(this.PromiseState === 'rejected') changeState(onRejected) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ changeState(onResolved) }, onRejected:function(){ changeState(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) { //是Promise对象 value.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(value) } })}12.Promise.reject()的封装
12.1 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> const p = Promise.reject(new Promise((resolve,reject) => { resolve('ok') })); console.log(p); </script></body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 保存catch方法的回调函数 this.catchCallbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved() }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) that.catchCallbacks.forEach(item => { item.onRejected() }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) }}//添加 then() 方法Promise.prototype.then = function (onResolved,onRejected){ const self = this // 异常穿透 if(typeof onRejected !== 'function') { onRejected = reason => { throw reason } } // 值传递 p.then()...... if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { function changeState(type){ try { let rs = type(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行成功回调函数 if(this.PromiseState === 'fulfilled') changeState(onResolved) //执行失败回调函数 if(this.PromiseState === 'rejected') changeState(onRejected) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ changeState(onResolved) }, onRejected:function(){ changeState(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) { //是Promise对象 value.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(value) } })}// 添加reject方法Promise.reject = function(value) { return new Promise((resolve,reject) => { reject(value) })}13.Promise.all()的封装
13.1 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> const p = Promise.resolve(new Promise((resolve,reject) => { resolve('ok') })); const p1 = Promise.reject('err') const p2 = Promise.resolve('yes') const rs = Promise.all([p,p1,p2]) console.log(rs); </script> </body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 保存catch方法的回调函数 this.catchCallbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved() }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) that.catchCallbacks.forEach(item => { item.onRejected() }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) }}//添加 then() 方法Promise.prototype.then = function (onResolved,onRejected){ const self = this // 异常穿透 if(typeof onRejected !== 'function') { onRejected = reason => { throw reason } } // 值传递 p.then()...... if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { function changeState(type){ try { let rs = type(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行成功回调函数 if(this.PromiseState === 'fulfilled') changeState(onResolved) //执行失败回调函数 if(this.PromiseState === 'rejected') changeState(onRejected) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ changeState(onResolved) }, onRejected:function(){ changeState(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) { //是Promise对象 value.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 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 count = 0 let arr = [] for(let i = 0;i < promises.length;i++){ promises[i].then(v => { count++ arr[i] = v if(count == promises.length) { resolve(arr) } }, r => { reject(r) }) } })}14.Promise.race()的封装
14.1 代码：
在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> const p =new Promise((resolve,reject) => { setTimeout(function (){ resolve('ok') },1000) }) const p1 = Promise.resolve('err') const p2 = Promise.resolve('yes') const rs = Promise.race([p,p1,p2]) console.log(rs); </script> </body></html>在这里插入代码片// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 保存catch方法的回调函数 this.catchCallbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 that.callbacks.forEach(item => { item.onResolved() }) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) that.catchCallbacks.forEach(item => { item.onRejected() }) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) }}//添加 then() 方法Promise.prototype.then = function (onResolved,onRejected){ const self = this // 异常穿透 if(typeof onRejected !== 'function') { onRejected = reason => { throw reason } } // 值传递 p.then()...... if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { function changeState(type){ try { let rs = type(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行成功回调函数 if(this.PromiseState === 'fulfilled') changeState(onResolved) //执行失败回调函数 if(this.PromiseState === 'rejected') changeState(onRejected) // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ changeState(onResolved) }, onRejected:function(){ changeState(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) { //是Promise对象 value.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 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 count = 0 let arr = [] for(let i = 0;i < promises.length;i++){ promises[i].then(v => { count++ arr[i] = v if(count == promises.length) { resolve(arr) } }, r => { reject(r) }) } })}// 添加all方法Promise.race = function (promises){ return new Promise((resolve,reject) => { for(let i = 0;i < promises.length;i++){ promises[i].then(v => { resolve(v) }, r => { reject(r) }) } })}15.then方法–回调的异步执行
15.1 代码：
错误结果：
加个定时器：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> const p =new Promise((resolve,reject) => { resolve('ok') console.log(111); }) p.then(v => { console.log(222); },r => { console.log(222); }) console.log(333); </script> </body></html>// 自定义promise// 声明构造函数function Promise(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 保存catch方法的回调函数 this.catchCallbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 setTimeout(function () { that.callbacks.forEach(item => { item.onResolved() }) },1000) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) setTimeout(function () { that.catchCallbacks.forEach(item => { item.onRejected() }) },1000) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) }}//添加 then() 方法Promise.prototype.then = function (onResolved,onRejected){ const self = this // 异常穿透 if(typeof onRejected !== 'function') { onRejected = reason => { throw reason } } // 值传递 p.then()...... if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { function changeState(type){ try { let rs = type(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行成功回调函数 if(this.PromiseState === 'fulfilled'){ setTimeout(function () { changeState(onResolved) },1000) } //执行失败回调函数 if(this.PromiseState === 'rejected'){ setTimeout(function () { changeState(onRejected) },1000) } // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ changeState(onResolved) }, onRejected:function(){ changeState(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) { //是Promise对象 value.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 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 count = 0 let arr = [] for(let i = 0;i < promises.length;i++){ promises[i].then(v => { count++ arr[i] = v if(count == promises.length) { resolve(arr) } }, r => { reject(r) }) } })}// 添加all方法Promise.race = function (promises){ return new Promise((resolve,reject) => { for(let i = 0;i < promises.length;i++){ promises[i].then(v => { resolve(v) }, r => { reject(r) }) } })}15.class版本的实现
15.1 代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style></head><body> <script src="a.js"></script> <script> const p =new Promise((resolve,reject) => { setTimeout(function (){ resolve('ok') },1000) }) p.then(v => { console.log(222); },r => { console.log(222); }) console.log(p); </script> </body></html>// 自定义promiseclass Promise { constructor(executor){ // 添加Promise的属性 this.PromiseState = 'pending' this.PromiseResult = null // 保存实例对象的this的值 const that = this // 保存then方法的回调函数 this.callbacks = [] // 保存catch方法的回调函数 this.catchCallbacks = [] // 定义resolve函数 function resolve(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'fulfilled' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onResolved(data) // 变成数组来保存 setTimeout(function () { that.callbacks.forEach(item => { item.onResolved() }) },1000) } // 定义reject函数 function reject(data){ if(that.PromiseState !== 'pending') return; // 改变Promise对象状态 that.PromiseState = 'rejected' // 改变Promise对象结果 that.PromiseResult = data // if(that.callback) that.callback.onRejected(data) that.callbacks.forEach(item => { item.onRejected() }) setTimeout(function () { that.catchCallbacks.forEach(item => { item.onRejected() }) },1000) } try { // 执行executor函数 executor(resolve,reject) } catch (error) { reject(error) } } //添加 then() 方法 then(onResolved,onRejected){ const self = this // 异常穿透 if(typeof onRejected !== 'function') { onRejected = reason => { throw reason } } // 值传递 p.then()...... if(typeof onResolved !== 'function') { onResolved = value => value } return new Promise((resolve,reject) => { function changeState(type){ try { let rs = type(self.PromiseResult) // 判断 if(rs instanceof Promise) { //是Promise对象 rs.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(rs) } } catch (error) { reject(error) } } //执行成功回调函数 if(this.PromiseState === 'fulfilled'){ setTimeout(function () { changeState(onResolved) },1000) } //执行失败回调函数 if(this.PromiseState === 'rejected'){ setTimeout(function () { changeState(onRejected) },1000) } // 保存回调函数 if(this.PromiseState === 'pending') { this.callbacks.push({ onResolved:function(){ changeState(onResolved) }, onRejected:function(){ changeState(onRejected) } }) } }) } // 添加catch()方法 catch(onRejected){ return this.then(undefined,onRejected) } // 添加resolve方法 static resolv(value) { return new Promise((resolve,reject) => { // 判断 if(value instanceof Promise) { //是Promise对象 value.then(v => { resolve(v) },r => { reject(r) }) }else{ // 不是Promise对象 成功状态 resolve(value) } }) } // 添加reject方法 static reject(value) { return new Promise((resolve,reject) => { reject(value) }) } // 添加all方法 static all(promises){ return new Promise((resolve,reject) => { let count = 0 let arr = [] for(let i = 0;i < promises.length;i++){ promises[i].then(v => { count++ arr[i] = v if(count == promises.length) { resolve(arr) } }, r => { reject(r) }) } }) } // 添加all方法 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) }) } }) }}发表评论
最新留言
做的很好，不错不错
[***.243.131.199]2025年04月05日 01时02分53秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
springboot通过控制层跳转页面404
2021-05-08
idea2020 没有 tomcat server
2021-05-08
jq动态修改元素的onclick属性的值
2021-05-08
为什么讨厌所谓仿生AI的说法
2021-05-08
ORACLE 客户端工具
2021-05-08
云服务器springboot jar项目开启jmx remote监控-解决无法连接的问题
2021-05-08
文件上传-FileUpload
2021-05-08
快速排序
2021-05-08
Pyinstaller打包的exe文件过大的解决方法
2021-05-08
Linux的软链接跟Windows快捷方式一样？
2021-05-08
更改github的默认语言类型
2021-05-08
使用bigdecima实例化时传int和string时的精度丢失
2021-05-08
使用第三方sdk,微信wechat扫码登录
2021-05-08
mysql中的行转列
2021-05-08
shell脚本中冒泡排序、直接排序、反转排序
2021-05-08
WPS及Excel中Alt键的妙用 快捷键
2021-05-08
C - 食物链 并查集
2021-05-08
Pycharm 常用快捷键
2021-05-08
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 457444512 位访客
访问时间: 2025-04-17 17:36:29
访问IP: 18.188.100.195
Copyright © 2020 - 2025 css8.cn 京ICP备2021015314号-1
手机版