一、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.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) {
return new Promise((resolve, reject) => {
// 当对象的 PromiseState 属性为 fulfilled,执行 onResolved
if (this.PromiseState === 'fulfilled') {
try {
let result = onResolved(this.PromiseResult)
if (result instanceof Promise) {
result.then(v => {
resolve(v)
}, r => {
reject(r)
})
} else {
resolve(result)
}
} catch (error) {
reject(error)
}
}
// 当对象的 PromiseState 属性为 rejected,执行 onRejected
if (this.PromiseState === 'rejected') {
onRejected(this.PromiseResult)
}
// 当对象的 PromiseState 属性为 pending,则说明执行了一个异步操作
if (this.PromiseState === 'pending') {
// 保存回调函数
this.callbacks.push({
onResolved: onResolved,
onRejected: onRejected
})
}
})
}
10. 异步修改状态 then 方法结果返回
<script>
// 实例化对象
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK')
}, 1000);
})
let res = p.then(value => {
console.log(value);
return value
// throw new Error('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.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) {
const self = this
return new Promise((resolve, reject) => {
// 当对象的 PromiseState 属性为 fulfilled,执行 onResolved
if (this.PromiseState === 'fulfilled') {
try {
let result = onResolved(this.PromiseResult)
if (result instanceof Promise) {
result.then(v => {
resolve(v)
}, r => {
reject(r)
})
} else {
resolve(result)
}
} catch (error) {
reject(error)
}
}
// 当对象的 PromiseState 属性为 rejected,执行 onRejected
if (this.PromiseState === 'rejected') {
onRejected(this.PromiseResult)
}
// 当对象的 PromiseState 属性为 pending,则说明执行了一个异步操作
if (this.PromiseState === 'pending') {
// 保存回调函数
this.callbacks.push({
onResolved: function () {
try {
let result = onResolved(self.PromiseResult)
if (result instanceof Promise) {
result.then(v => {
resolve(v)
}, r => {
reject(r)
})
} else {
reject(result)
}
} catch (error) {
reject(error)
}
},
onRejected: function () {
try {
let result = onRejected(self.PromiseResult)
if (result instanceof Promise) {
result.then(v => {
resolve(v)
}, r => {
reject(r)
})
} else {
reject(result)
}
} catch (error) {
reject(error)
}
}
})
}
})
}
11. then 方法完善与优化
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) {
const self = this
return new Promise((resolve, reject) => {
function callback(type) {
try {
let result = type(self.PromiseResult)
if (result instanceof Promise) {
result.then(v => {
resolve(v)
}, r => {
reject(r)
})
} else {
resolve(result)
}
} catch (error) {
reject(error)
}
}
// 当对象的 PromiseState 属性为 fulfilled,执行 onResolved
if (this.PromiseState === 'fulfilled') {
callback(onResolved)
}
// 当对象的 PromiseState 属性为 rejected,执行 onRejected
if (this.PromiseState === 'rejected') {
callback(onRejected)
}
// 当对象的 PromiseState 属性为 pending,则说明执行了一个异步操作
if (this.PromiseState === 'pending') {
// 保存回调函数
this.callbacks.push({
onResolved: function () {
callback(onResolved)
},
onRejected: function () {
callback(onRejected)
}
})
}
})
}