Promise 自定义封装
Posted 龖龖龖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise 自定义封装相关的知识，希望对你有一定的参考价值。
一、Promise 自定义封装
## 1. 初始结构搭建
```html
<script>
// 实例化对象
let p = new Promise((resolve, reject) =>
resolve('OK')
)
p.then(value =>
console.log(value);
, reason =>
console.warn(reason);
)
</script>
function Promise(executor)
// 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected)
2. resolve 与 reject 结构搭建
function Promise(executor)
// resolve 函数
function resolve(data)
// reject 函数
function reject(data)
// 同步调用 【执行器函数】
executor(resolve, reject)
// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected)
3. resolve 与 reject 代码实现
<script>
// 实例化对象
let p = new Promise((resolve, reject) =>
resolve('OK')
)
console.log(p);
p.then(value =>
console.log(value);
, reason =>
console.warn(reason);
)
</script>
function Promise(executor)
// 添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的 this 的值
const self = this
// resolve 函数
function resolve(data)
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'fulfilled'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// reject 函数
function reject(data)
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'rejected'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// 同步调用 【执行器函数】
executor(resolve, reject)
// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected)
4. throw 抛出异常改变状态
<script>
// 实例化对象
let p = new Promise((resolve, reject) =>
// resolve('OK')
throw new Error('error')
)
console.log(p);
p.then(value =>
console.log(value);
, reason =>
console.warn(reason);
)
</script>
function Promise(executor)
// 添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的 this 的值
const self = this
// resolve 函数
function resolve(data)
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'fulfilled'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// reject 函数
function reject(data)
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'rejected'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
try
// 同步调用 【执行器函数】
executor(resolve, reject)
catch (error)
// 修改 Promise 对象的状态为失败
reject(error)
// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected)
5. Promise 对象只能修改一次
<script>
// 实例化对象
let p = new Promise((resolve, reject) =>
resolve('OK')
reject('error')
// throw new Error('error')
)
console.log(p);
p.then(value =>
console.log(value);
, reason =>
console.warn(reason);
)
</script>
function Promise(executor)
// 添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的 this 的值
const self = this
// resolve 函数
function resolve(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'fulfilled'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// reject 函数
function reject(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'rejected'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
try
// 同步调用 【执行器函数】
executor(resolve, reject)
catch (error)
// 修改 Promise 对象的状态为失败
reject(error)
// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected)
6. then 方法执行回调
<script>
// 实例化对象
let p = new Promise((resolve, reject) =>
// resolve('OK')
reject('error')
// throw new Error('error')
)
console.log(p);
p.then(value =>
console.log(value);
, reason =>
console.warn(reason);
)
</script>
function Promise(executor)
// 添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
// 保存实例对象的 this 的值
const self = this
// resolve 函数
function resolve(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'fulfilled'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// reject 函数
function reject(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'rejected'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
try
// 同步调用 【执行器函数】
executor(resolve, reject)
catch (error)
// 修改 Promise 对象的状态为失败
reject(error)
// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected)
// 当对象的 PromiseState 属性为 fulfilled，执行 onResolved
if (this.PromiseState === 'fulfilled')
onResolved(this.PromiseResult)
// 当对象的 PromiseState 属性为 rejected，执行 onRejected
if (this.PromiseState === 'rejected')
onRejected(this.PromiseResult)
7. 异步任务回调的执行
<script>
// 实例化对象
let p = new Promise((resolve, reject) =>
setTimeout(() =>
resolve('OK')
, 1000);
)
p.then(value =>
console.log(value);
, reason =>
console.warn(reason);
)
console.log(p);
</script>
function Promise(executor)
// 添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
this.callbacks =
// 保存实例对象的 this 的值
const self = this
// resolve 函数
function resolve(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'fulfilled'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// 执行成功的回调函数
if (self.callbacks.onResolved)
self.callbacks.onResolved(data)
// reject 函数
function reject(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'rejected'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// 执行失败的回调函数
if (self.callbacks.onRejected)
self.callbacks.onRejected(data)
try
// 同步调用 【执行器函数】
executor(resolve, reject)
catch (error)
// 修改 Promise 对象的状态为失败
reject(error)
// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected)
// 当对象的 PromiseState 属性为 fulfilled，执行 onResolved
if (this.PromiseState === 'fulfilled')
onResolved(this.PromiseResult)
// 当对象的 PromiseState 属性为 rejected，执行 onRejected
if (this.PromiseState === 'rejected')
onRejected(this.PromiseResult)
// 当对象的 PromiseState 属性为 pending，则说明执行了一个异步操作
if (this.PromiseState === 'pending')
// 保存回调函数
this.callbacks =
onResolved: onResolved,
onRejected: onRejected
8. 指定多个回调的实现
<script>
// 实例化对象
let p = new Promise((resolve, reject) =>
setTimeout(() =>
resolve('OK')
, 1000);
)
p.then(value =>
console.log(value);
, reason =>
console.warn(reason);
)
p.then(value =>
alert(value);
, reason =>
console.warn(reason);
)
console.log(p);
</script>
function Promise(executor)
// 添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
this.callbacks = []
// 保存实例对象的 this 的值
const self = this
// resolve 函数
function resolve(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'fulfilled'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// 执行成功的回调函数
self.callbacks.forEach(item =>
item.onResolved(data)
)
// reject 函数
function reject(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'rejected'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// 执行失败的回调函数
self.callbacks.forEach(item =>
item.onRejected(data)
)
try
// 同步调用 【执行器函数】
executor(resolve, reject)
catch (error)
// 修改 Promise 对象的状态为失败
reject(error)
// // 添加 then 方法
Promise.prototype.then = function (onResolved, onRejected)
// 当对象的 PromiseState 属性为 fulfilled，执行 onResolved
if (this.PromiseState === 'fulfilled')
onResolved(this.PromiseResult)
// 当对象的 PromiseState 属性为 rejected，执行 onRejected
if (this.PromiseState === 'rejected')
onRejected(this.PromiseResult)
// 当对象的 PromiseState 属性为 pending，则说明执行了一个异步操作
if (this.PromiseState === 'pending')
// 保存回调函数
this.callbacks.push(
onResolved: onResolved,
onRejected: onRejected
)
9. 同步修改状态 then 方法结果返回
<script>
// 实例化对象
let p = new Promise((resolve, reject) =>
resolve('OK')
)
let res = p.then(value =>
console.log(value);
// return value
// throw new Error('error')
return new Promise((resolve, reject) =>
reject('error')
)
, reason =>
console.warn(reason);
)
console.log(res);
</script>
function Promise(executor)
// 添加属性
this.PromiseState = 'pending'
this.PromiseResult = null
this.callbacks = []
// 保存实例对象的 this 的值
const self = this
// resolve 函数
function resolve(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'fulfilled'
// 2. 修改对象的结果值 （PromiseResult）
self.PromiseResult = data
// 执行成功的回调函数
self.callbacks.forEach(item =>
item.onResolved(data)
)
// reject 函数
function reject(data)
// 判断状态
if (self.PromiseState !== 'pending') return
// 1. 修改对象的属性 （PromiseState）
self.PromiseState = 'rejected'
// 2. 修改对象的结果值 （PromiseResult）
self.Pro以上是关于Promise 自定义封装的主要内容，如果未能解决你的问题，请参考以下文章