JS原理2（Promise）

已于 2024-02-22 16:30:19 修改
阅读量952 收藏 22
点赞数 22
分类专栏： js原理 文章标签： javascript 前端 开发语言
于 2024-02-17 17:00:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xdkSilence/article/details/136058796
版权

文章目录

1 Promise语法

	//resolve reject
	const promise = new Promise((resolve,reject) => {
		// 异步操作代码
		if ( /* 操作成功 */){
			resolve("success");
		}else{
			reject("error");
		}
	})
	
	//then catch
	promise.then(res => {
	    console.log(res);
	   }, err => {
	   	    console.log(err );
	   }).catch(function(e){
	    console.log(e);
	})
	
	const p1 = Promise.resolve(1)
	const p2 = Promise.reject(2)
	function p3(){
	    return  new Promise(function(resolve,reject){
	        resolve("3");
	    })
	}
	//all方法提供了并行执行异步操作的能力，在all中所有异步操作结束后执行回调。
	Promise.all([p1,p2,p3()]).then(function(data){
	    console.log(data);  //[1,2,'3']
	})
	//race 第一个promise返回的结果
	Promise.race([p1,p2,p3()]).then(function(data){
	    console.log(data);  //1
	})
	//any 第一个resolve返回的而己过
	Promise.any([p1,p2,p3()]).then(function(data){
	    console.log(data);  //1
	})

2 Promise原理

2.1 构造函数

  1. 定义类MyPromise,内部添加构造函数constructor,构造函数需要接收回调函数func
  2. 在构造函数中定义resolve和reject
  3. 构造函数内部调用func并将resolve和reject传入:func(resolve,reject)
    // 1. 定义类
class MyPromise {
  // 2. 添加构造函数
  constructor(func) {
    // 3. 定义resolve/reject
    const resolve = (result) => {
      console.log('resolve-执行啦:', result)
    }
    const reject = (result) => {
      console.log('reject-执行啦:', result)
    }

    // 4. 执行回调函数
    func(resolve, reject)
  }
}
//调用
const p = new MyPromise((resolve, reject) => {
  resolve('success')
  // reject('error')
})

2.2 状态

  1. 定义3个常量用来保存状态，pending，fulfilled，rejected
  2. MyPromise内部定义属性state和result分别用来保存状态和原因
  3. 调用resolve时传入具体原因，如果状态为pending则更改状态并记录兑现原因
  4. 调用reject时传入具体原因，如果状态为pending则更改状态并记录拒绝原因
    const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  // 1. 添加状态
  state = PENDING
  // 2. 添加原因
  result = undefined

  constructor(func) {
    // 3. 调整resolve/reject
    // 4. 状态不可逆
    // 改状态: pending->fulfilled
    // 记录原因
    const resolve = (result) => {
      if (this.state === PENDING) {
        this.state = FULFILLED
        this.result = result
      }
    }
    // 改状态: pending->rejected
    // 记录原因
    const reject = (result) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.result = result
      }
    }

    func(resolve, reject)
  }
}
//调用
const p = new MyPromise((resolve, reject) => {
  resolve('success') // pending -> fulfilled
  // reject('error') // pending -> rejected
})
p.state // 状态
p.result // 原因

2.3 then方法

  1. 添加then方法，接收2个回调函数

    1. 成功回调onFulfilled
    2. 失败回调onRejected

  2. 判断传入的onFulfilled和onRejected是否为函数，如果不是设置默认值

  3. 根据状态调用onFulfilled或onRejected并传入兑现或拒绝原因

    const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  // 状态
  state = PENDING
  // 原因
  result = undefined

  // 构造函数
  constructor(func) {
    // pending->fulfilled
    const resolve = (result) => {
      if (this.state === PENDING) {
        this.state = FULFILLED
        this.result = result
      }
    }
    // pending->rejected
    const reject = (result) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.result = result
      }
    }
    func(resolve, reject)
  }

  // 1. 添加实例方法
  then(onFulfilled, onRejected) {
    // 2. 参数判断(参考文档)
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
    onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }

    // 2.1 执行成功回调
    // 2.2 执行失败回调
    if (this.state === FULFILLED) {
      onFulfilled(this.result)
    } else if (this.state === REJECTED) {
      onRejected(this.result)
    }
  }
}
//调用
const p = new MyPromise((resolve, reject) => {
    resolve('success')
    // reject('error')
})
p.then(res => {
  console.log('成功回调:', res)
}, err => {
  console.log('失败回调:', err)
})

2.4 then方法 - 异步

  1. MyPromise添加私有属性#handlers

    1. 保存then方法调用时状态为pending的回调函数
    2. 格式为对象数组:[{onFulfilled,onRejected}...]

  2. 构造函数内部调整resolve和reject的逻辑

    1. 调用resolve时取出数组#handlers中的所有onFulfilled回调函数进行调用
    2. 调用reject时取出数组#handlers中的所有onRejected回调函数进行调用
    const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  // 状态
  state = PENDING
  // 原因
  result = undefined
  // 1. 定义实例属性
  #handlers = [] // [{onFulfilled,onRejected}...]

  // 构造函数
  constructor(func) {
    // pending->fulfilled
    const resolve = (result) => {
      if (this.state === PENDING) {
        this.state = FULFILLED
        this.result = result
        // 3. 调用成功回调
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result)
        })
      }
    }
    // pending->rejected
    const reject = (result) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.result = result
        // 4. 调用失败回调
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result)
        })
      }
    }
    func(resolve, reject)
  }

  // then方法
  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
    onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }

    if (this.state === FULFILLED) {
      onFulfilled(this.result)
    } else if (this.state === REJECTED) {
      onRejected(this.result)
    } else if (this.state === PENDING) {
      // 2. 保存回调函数
      this.#handlers.push({
        onFulfilled, onRejected
      })
    }
  }
}
//调用
const p = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
    // reject('error')
  }, 2000);
})
p.then(res => {
  console.log('then1:', res)
}, err => {
  console.log('then1:', err)
})
p.then(res => {
  console.log('then2:', res)
}, err => {
  console.log('then2:', err)
})

2.5 异步任务

vue2异步方法：Promise.then、MutationObserver 、 setImmediate 、 setTimeout
选用：queueMicrotask 、MutationObserver 、setTimeout
1. queueMicrotask ：新式浏览器均支持，node11开始支持，ie不支持
2. MutationObserver ：新式浏览器均支持，ie11开始支持
3. setImmediate：新式浏览器只有edge支持，ie10开始支持
4. setTimeout：浏览器支持，node支持
核心步骤：

  1. 封装执行异步任务的函数
    1. 定义函数传入异步任务(回调函数)
    2. 内部根据实际情况判断并使用开启异步任务的api即可，比如queueMicrotask,MutationObserver
    3. 调用的api可以根据实际情况进行调整
    4. 如果都无法执行,使用setTimeout兜底
  2. 调整then中的逻辑，fulFilled，rejected，pending3种状态时的回调函数，使用封装的函数包装一次
// 1. 定义异步任务函数
function runAsynctask(callback) {
  // 2. 调用核心api(queueMicrotask,MutationObserver,setTimeout)
  if (typeof queueMicrotask === 'function') {
    queueMicrotask(callback)
  } else if (typeof MutationObserver === 'function') {
    const obs = new MutationObserver(callback)
    const divNode = document.createElement('div')
    obs.observe(divNode, { childList: true })
    divNode.innerText = '12345'
  } else {
    setTimeout(callback, 0)
  }
}

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  // 状态
  state = PENDING
  // 原因
  result = undefined
  // 回调函数数组
  #handlers = [] // [{onFulfilled,onRejected}...]

  // 构造函数
  constructor(func) {
    // pending->fulfilled
    const resolve = (result) => {
      if (this.state === PENDING) {
        this.state = FULFILLED
        this.result = result
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result)
        })
      }
    }
    // pending->rejected
    const reject = (result) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.result = result
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result)
        })
      }
    }
    func(resolve, reject)
  }

  // then方法
  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
    onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }

    // 3. 使用封装函数
    if (this.state === FULFILLED) {
      runAsynctask(() => {
        onFulfilled(this.result)
      })
    } else if (this.state === REJECTED) {
      runAsynctask(() => {
        onRejected(this.result)
      })
    } else if (this.state === PENDING) {
      this.#handlers.push({
        onFulfilled: () => {
          runAsynctask(() => {
            onFulfilled(this.result)
          })
        }, onRejected: () => {
          runAsynctask(() => {
            onRejected(this.result)
          })
        }
      })
    }
  }
}

2.6 链式编程-fulfilled状态-返回值+异常

需求:

  1. then的链式编程

  2. 目前只考虑then的第一个回调函数

    1. 返回普通值
    2. 内部出现异常
    const p = new MyPromise ((resolve, reject) => {
  resolve(1)
})
p.then(res => {
  console.log(res)
  // throw 'throw-error'
  return 2
}).then(res => {
  console.log(res)
}, err => {
  console.log(err)
})

核心步骤

  1. 链式编程的本质then方法会返回一个新的MyPromise对象

  2. 将原本的代码迁移到返回的MyPromise对象的回调函数中

  3. 内部通过try-catch捕获异常,出现异常通过reject传递异常

  4. 获取onFulfilled的执行结果,并通过resolve传递

    // 执行异步任务
function runAsynctask(callback) {
  if (typeof queueMicrotask === 'function') {
    queueMicrotask(callback)
  } else if (typeof MutationObserver === 'function') {
    const obs = new MutationObserver(callback)
    const divNode = document.createElement('div')
    obs.observe(divNode, { childList: true })
    divNode.innerText = '12345'
  } else {
    setTimeout(callback, 0)
  }
}

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  // 状态
  state = PENDING
  // 原因
  result = undefined
  // 回调函数数组
  #handlers = [] // [{onFulfilled,onRejected}...]

  // 构造函数
  constructor(func) {
    // pending->fulfilled
    const resolve = (result) => {
      if (this.state === PENDING) {
        this.state = FULFILLED
        this.result = result
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result)
        })
      }
    }
    // pending->rejected
    const reject = (result) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.result = result
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result)
        })
      }
    }
    func(resolve, reject)
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
    onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }

    // 1. 返回新Promise实例
    const p2 = new MyPromise ((resolve, reject) => {
      if (this.state === FULFILLED) {
        runAsynctask(() => {
          // 2. 获取返回值
          try {
            const x = onFulfilled(this.result)
            // console.log('x:', x)
            // 2.1 处理返回值
            resolve(x)
          } catch (error) {
            // 2.2 处理异常
            // console.log('捕获异常:', error)
            reject(error)
          }
        })
      }
      else if (this.state === REJECTED) {
        runAsynctask(() => {
          onRejected(this.result)
        })
      }
      else if (this.state === PENDING) {
        this.#handlers.push({
          onFulfilled: () => {
            runAsynctask(() => {
              onFulfilled(this.result)
            })
          }, onRejected: () => {
            runAsynctask(() => {
              onRejected(this.result)
            })
          }
        })
      }

    })

    return p2
  }
}

2.7 链式编程-fulfilled状态-返回Promise

需求:

  1. then的链式编程
  2. 目前只考虑then的第一个回调函数
    1. 返回Promise
    const p = new MyPromise((resolve, reject) => {
  resolve(1)
})
p.then(res => {
  return new MyPromise((resolve, reject) => {
    resolve(2)
    // reject('error')
  })
}).then(res => {
  console.log('p2:', res) // 2
}, err => {
  console.log('p2:', err) // error
})

核心步骤:

  1. 判断onFulfilled的执行结果是否为MyPromise实例
  2. 如果是的话调用返回值的then方法，获取兑现和拒绝的原因并通过resolve和reject传递即可
    // 执行异步任务
function runAsynctask(callback) {
  if (typeof queueMicrotask === 'function') {
    queueMicrotask(callback)
  } else if (typeof MutationObserver === 'function') {
    const obs = new MutationObserver(callback)
    const divNode = document.createElement('div')
    obs.observe(divNode, { childList: true })
    divNode.innerText = '12345'
  } else {
    setTimeout(callback, 0)
  }
}

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  // 状态
  state = PENDING
  // 原因
  result = undefined
  // 回调函数数组
  #handlers = [] // [{onFulfilled,onRejected}...]

  // 构造函数
  constructor(func) {
    // pending->fulfilled
    const resolve = (result) => {
      if (this.state === PENDING) {
        this.state = FULFILLED
        this.result = result
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result)
        })
      }
    }
    // pending->rejected
    const reject = (result) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.result = result
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result)
        })
      }
    }
    func(resolve, reject)
  }

  // then方法
  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
    onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }

    const p2 = new MyPromise((resolve, reject) => {
      if (this.state === FULFILLED) {
        runAsynctask(() => {
          try {
            const x = onFulfilled(this.result)
            // 1.处理返回Promise
            if (x instanceof MyPromise) {
              // console.log('MyPromise实例')
              // 2. 调用then方法
              // x.then(res => console.log(res), err => console.log(err))
              x.then(res => resolve(res), err => reject(err))
            } else {
              resolve(x)
            }
          } catch (error) {
            reject(error)
          }
        })
      }
      else if (this.state === REJECTED) {
        runAsynctask(() => {
          onRejected(this.result)
        })
      }
      else if (this.state === PENDING) {
        this.#handlers.push({
          onFulfilled: () => {
            runAsynctask(() => {
              onFulfilled(this.result)
            })
          }, onRejected: () => {
            runAsynctask(() => {
              onRejected(this.result)
            })
          }
        })
      }
    })
    return p2
  }
}

2.8 链式编程-fulfilled状态-重复引用

需求:

  1. then中返回的then方法返回的Promise实例报错
    const p = new MyPromise((resolve, reject) => {
  resolve(1)
})
const p2 = p.then(res => {
  return p2
})
p2.then(
  res => { },
  err => console.log('err:', err))

核心步骤:

  1. 判断onFulfilled函数的返回值是否和then方法内部返回的MyPromise相同
  2. 如果相同抛出错误new TypeError('Chaining cycle detected for promise #<Promise>')
    // 执行异步任务
function runAsynctask(callback) {
  if (typeof queueMicrotask === 'function') {
    queueMicrotask(callback)
  } else if (typeof MutationObserver === 'function') {
    const obs = new MutationObserver(callback)
    const divNode = document.createElement('div')
    obs.observe(divNode, { childList: true })
    divNode.innerText = '12345'
  } else {
    setTimeout(callback, 0)
  }
}

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  // 状态
  state = PENDING
  // 原因
  result = undefined
  // 回调函数数组
  #handlers = [] // [{onFulfilled,onRejected}...]

  // 构造函数
  constructor(func) {
    // pending->fulfilled
    const resolve = (result) => {
      if (this.state === PENDING) {
        this.state = FULFILLED
        this.result = result
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result)
        })
      }
    }
    // pending->rejected
    const reject = (result) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.result = result
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result)
        })
      }
    }
    func(resolve, reject)
  }

  // then方法
  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
    onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }

    const p2 = new MyPromise((resolve, reject) => {
      if (this.state === FULFILLED) {
        runAsynctask(() => {
          try {
            const x = onFulfilled(this.result)
            // 1. 处理重复引用
            if (x === p2) {
              // console.log('返回了p2')
              // 2. 抛出错误 Chaining cycle detected for promise #<Promise>
              throw new TypeError('Chaining cycle detected for promise #<Promise>')
            }
            if (x instanceof MyPromise) {
              x.then(res => resolve(res), err => reject(err))
            } else {
              resolve(x)
            }
          } catch (error) {
            reject(error)
          }
        })
      }
      else if (this.state === REJECTED) {
        runAsynctask(() => {
          onRejected(this.result)
        })
      }
      else if (this.state === PENDING) {
        this.#handlers.push({
          onFulfilled: () => {
            runAsynctask(() => {
              onFulfilled(this.result)
            })
          }, onRejected: () => {
            runAsynctask(() => {
              onRejected(this.result)
            })
          }
        })
      }
    })
    return p2
  }
}

2.9 链式编程-rejected状态 pending状态

需求:

  1. then的第二个回调函数，执行reject时的链式编程
  2. then方法中pending状态时推入数组的函数增加try-catch捕获异常
  3. 获取推入数组的回调函数的返回值
  4. 调用封装的函数并传入获取的值
    const p = new MyPromise((resolve, reject) => {
  reject(1)
  // setTimeout(() => {
  //   resolve(1)
  // }, 2000)
})
const p2 = p.then(undefined, err => {
  throw 'error'
  // return p2
  // return 2
  // return new MyPromise((resolve, reject) => {
  //   resolve('MyPromise-2')
  // })
})
p2.then(res => {
  console.log('p2-res:', res)
}, err => {
  console.log('p2-err:', err)
})

核心步骤:

  1. 判断onRejected可能出现的异常，如果出现通过reject传递

  2. 获取onRejected函数的执行结果

  3. 将fulfilled状态时的处理逻辑抽取为函数，rejected状态时调用函数复用逻辑

    // 执行异步任务
function runAsynctask(callback) {
  if (typeof queueMicrotask === 'function') {
    queueMicrotask(callback)
  } else if (typeof MutationObserver === 'function') {
    const obs = new MutationObserver(callback)
    const divNode = document.createElement('div')
    obs.observe(divNode, { childList: true })
    divNode.innerText = '12345'
  } else {
    setTimeout(callback, 0)
  }
}

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
  // 状态
  state = PENDING
  // 原因
  result = undefined
  // 回调函数数组
  #handlers = [] // [{onFulfilled,onRejected}...]

  // 构造函数
  constructor(func) {
    // pending->fulfilled
    const resolve = (result) => {
      if (this.state === PENDING) {
        this.state = FULFILLED
        this.result = result
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result)
        })
      }
    }
    // pending->rejected
    const reject = (result) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.result = result
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result)
        })
      }
    }
    func(resolve, reject)
  }

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : x => x
    onRejected = typeof onRejected === 'function' ? onRejected : x => { throw x }

    const p2 = new MyPromise((resolve, reject) => {
      if (this.state === FULFILLED) {
        runAsynctask(() => {
          try {
            const x = onFulfilled(this.result)
            // 4. 调用函数
            resolvePromise(p2, x, resolve, reject)
            // if (x === p2) {
            //   throw new TypeError('Chaining cycle detected for promise #<Promise>')
            // }
            // if (x instanceof MyPromise) {
            //   x.then(res => resolve(res), err => reject(err))
            // } else {
            //   resolve(x)
            // }
          } catch (error) {
            reject(error)
          }
        })
      }

      else if (this.state === REJECTED) {
        runAsynctask(() => {
          // 1. 处理异常
          try {
            // 2. 获取返回值
            const x = onRejected(this.result)
            // console.log('x:', x)
            // 4. 调用函数
            resolvePromise(p2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      }

      else if (this.state === PENDING) {
        this.#handlers.push({
          onFulfilled: () => {
            runAsynctask(() => {
               // 1. 处理异常
              try {
                // 2.获取返回值
                const x = onFulfilled(this.result)
                // 4.调用函数
                resolvePromise(p2, x, resolve, reject)
              } catch (error) {
                reject(error)
              }
            })
          }, onRejected: () => {
            runAsynctask(() => {
               // 1. 处理异常
				try {
	               // 2.获取返回值
	               const x = onRejected(this.result)
	               // 4.调用函数
	               resolvePromise(p2, x, resolve, reject)
	             } catch (error) {
	                reject(error)
	             }
            })
          }
        })
      }
    })

    return p2
  }
}

// 3.抽取函数
function resolvePromise(p2, x, resolve, reject) {
  if (x === p2) {
    throw new TypeError('Chaining cycle detected for promise #<Promise>')
  }
  if (x instanceof MyPromise) {
    x.then(res => resolve(res), err => reject(err))
  } else {
    resolve(x)
  }
}

2.10 实例方法catch

需求

const p = new MyPromise((resolve, reject) => {
  reject('reject-error')
  // throw 'throw-error'
})
p.then(res => {
  console.log('res:', res)
}).catch(err => {
  console.log('err:', err)
})

核心步骤

  1. 定义catch方法，等同于:then(undefined,onRjected)

  2. 使用try-catch包裹constructor中的func捕获异常

      // 构造函数
  constructor(func) {
    // pending->fulfilled
    const resolve = (result) => {
      if (this.state === PENDING) {
        this.state = FULFILLED
        this.result = result
        this.#handlers.forEach(({ onFulfilled }) => {
          onFulfilled(this.result)
        })
      }
    }

    // pending->rejected
    const reject = (result) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.result = result
        this.#handlers.forEach(({ onRejected }) => {
          onRejected(this.result)
        })
      }
    }

    // 2. 处理异常
    try {
      func(resolve, reject)
    } catch (error) {
      // console.log('error:', error)
      reject(error)
    }
  }
  
  catch(onRejected) {
    // 1. 内部调用then方法
    return this.then(undefined, onRejected)
  }

2.11 实例方法finally

需求:

  1. 无论成功失败都会执行finally的回调函数
  2. 回调函数不接受任何参数
    const p = new MyPromise((resolve, reject) => {
  // resolve('resolve-res')
  // reject('reject-error')
  // throw 'throw-error'
})
p.then(res => {
  console.log('res:', res)
}).catch(err => {
  console.log('err:', err)
}).finally(() => {
  console.log('finally')
})

核心步骤

  1. 添加finally方法，接收最终执行的回调函数onFinally
  2. finally方法的本质为内部调用then方法
  3. 调用形式为第一个和第二个回调函数均传入onFinally即可
    finally(onFinally) {    
	return this.then(onFinally,onFinally)
}

2.12 静态方法resolve

需求
返回一个带有成功原因的Promise对象

MyPromise.resolve(new MyPromise((resolve, reject) => {
  // resolve('resolve')
  // reject('reject')
  // throw 'error'
})).then(res => {
  console.log('res:', res)
}, err => {
  console.log('err:', err)
})
MyPromise.resolve('xdk').then(res => {
  console.log(res)
})

核心步骤:

  1. 通过static关键字添加静态方法resolve,接收参数value
  2. 内部判断传入的值
    1. 如果是Promise实例,直接返回
    2. 其他的值,创建Promise实例并返回,内部通过resolve(value)传递value
      static resolve(value) {
    // 1. 判断传入值
    if (value instanceof MyPromise) {
      // 2.1 Promise直接返回
      return value
    }
    // 2.2 转为Promise并返回(fulfilled状态)
    return new MyPromise((resolve) => {
      resolve(value)
    })
  }

2.13 静态方法reject

需求:
返回一个带有拒绝原因的Promise对象

MyPromise.reject('error').catch(res => {
  console.log(res)
})

核心步骤:

  1. 添加静态方法reject并接收参数value
  2. 内部返回一个拒绝状态的Promise实例即可
  static reject(value) {
    // 1. 返回rejected状态的Promise
    // new MyPromise((resolve,reject)=>{
    return new MyPromise((undefined, reject) => {
      reject(value)
    })
  }

2.14 静态方法race

需求:

  1. 接收Promise数组,数组中第一个Promise敲定时，获取成功/失败结果
  2. 传入的参数不是数组，直接报错
const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 2000)
})
const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    reject(2)
  }, 1000)
})
MyPromise.race([p1, p2, 'xdk']).then((res) => {
  console.log('res:', res)
}, err => {
  console.log('err:', err)
})

核心步骤:

  1. 添加静态方法race接收参数promises
  2. 内部返回一个新的Promise实例，在返回的Promise实例中:
    1. 判断参数是否为数组，不是通过reject传递错误
    2. 遍历Promise数组，通过resolve静态方法等待每一个兑现
    3. 任何一个兑现，调用resolve传递兑现结果
    4. 任何一个拒绝，调用reject传递拒绝原因
  static race(promises) {
    // 1. 返回Promise
    return new MyPromise((resolve, reject) => {
      // 2. 判断是否为数组
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument is not iterable'))
      }
      // 3. 等待第一个敲定
      promises.forEach(p => {
        // p.then
        MyPromise.resolve(p).then(res => { resolve(res) }, err => { reject(err) })
      })
    })
  }

2.15 静态方法all

需求:
接收Promise数组

  1. 所有Promise都成功时，返回一个成功的Promise对象及成功数组
  2. 任何一个Promise失败，返回一个失败的Promise对象及第一个失败原因
const p1 = MyPromise.resolve(1)
const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(2)
    // reject('error')
  }, 1000)
})
const p3 = 3
MyPromise.all([p1, p2, p3]).then(res => {
  console.log('res:', res)
}, err => {
  console.log('err:', err)
})

核心步骤:

  1. 添加静态方法all
  2. 内部返回Promise实例，在返回的Promise实例中:
    1. 判断参数是否为数组，不是通过reject传递错误
    2. 空数组直接以空数组为结果进行兑现
    3. 遍历Promise数组，通过resolve静态方法等待结果
      1. 处理全部兑现:
        1. 通过数组记录结果，用索引的方式来添加,目的是保证结果的顺序和Promise数组的顺序一致
        2. 通过兑现次数进行判断，因为是通过索引的方式记录结果，如果第一次兑现的是最后一个，那么数组的长度就已经和Promise数组的长度一致了，所以需要通过兑现次数来进行判断
      2. 任意一个拒绝，调用reject传递拒绝原因
static all(promises) {
    // 1. 返回Promise实例
    return new MyPromise((resolve, reject) => {
      // 2. 判断是否为数组
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument is not iterable'))
      }
      // 3. 空数组直接兑现
      promises.length === 0 && resolve(promises)
      // 4.1 记录结果
      const results = []
      let count = 0
      promises.forEach((p, index) => {
        MyPromise.resolve(p).then(res => {
          // results.push 无法保证 结果的顺序和Promise数组的顺序一致
          // index 和 Promise实例的索引一致,保证顺序
          results[index] = res
          // 4.2 判断全部兑现
          count++
          count === promises.length && resolve(results)
        }, err => {
          // 5. 处理第一个拒绝
          reject(err)
        })
      })
    })
  }

2.16 静态方法allSettled

需求:

  1. 传入Promise数组，当所有对象都已敲定时
  2. 返回一个新的Promise对象及以数组形式保存的结果
const p1 = MyPromise.resolve(1)
const p2 = 2
const p3 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    reject(3)
  }, 1000)
})
MyPromise.allSettled([p1, p2, p3]).then(res => {
  console.log('res:', res)
}, err => {
  console.log('err:', err)
})

核心步骤:

  1. 添加静态方法allSettled
  2. 内部返回Promise实例，在返回的Promise实例中:
    1. 判断参数是否为数组，不是通过reject传递错误
    2. 空数组直接以空数组为结果进行兑现
  3. 遍历Promise数组，通过resolve静态方法等待敲定结果
  4. 等待全部敲定:并记录结果，根据兑现和拒绝将如下格式的内容通过索引的方式的记录到数组中
    1. 处理兑现:{state:FULFILLED,value:'xxx'}
    2. 处理拒绝:{state:REJECTED,reason:'xxx'}
  5. 根据敲定的次数判断是否全部敲定，全部敲定之后，通过resolve传递结果数组
  static allSettled(promises) {
    // 1. 返回Promise
    return new MyPromise((resolve, reject) => {
      // 2. 数组判断
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument is not iterable'))
      }
      // 3. 为空直接敲定
      promises.length === 0 && resolve(promises)

      // 4. 等待全部敲定
      // 4.1 记录结果
      const results = []
      let count = 0
      promises.forEach((p, index) => {
        MyPromise.resolve(p).then(res => {
          // 4.2 处理兑现{status:'fulfilled',value:''}
          results[index] = { status: FULFILLED, value: res }
          count++
          count === promises.length && resolve(results)
        }, err => {
          // 4.3 处理拒绝{status:'rejected',reason:''}
          results[index] = { status: REJECTED, reason: err }
          count++
          count === promises.length && resolve(results)
        })
      })
    })
  }

2.17 静态方法any

需求:
传入Promise数组，

  1. 任何一个Promise对象敲定时，返回一个新的Promise对象，及对应的结果
  2. 所有Promise都被拒绝时，返回一个包含所有拒绝原因的AggregateError错误数组
const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    reject(1)
  }, 2000)
})
const p2 = 2
const p3 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(3)
    // reject(3)
  }, 1000)
})
MyPromise.any([p1, p2, p3]).then(res => {
  console.log('res:', res)
}, err => {
  console.dir(err)
})

核心步骤:

  1. 添加静态方法any
  2. 内部返回Promise实例，在返回的Promise实例中:
    1. 判断参数是否为数组，不是通过reject传递错误
    2. 空数组直接以空数组为结果进行兑现
  3. 遍历Promise数组，通过resolve静态方法等待结果
    1. 第一个兑现，通过resolve传递兑现结果
    2. 全部拒绝:
      1. 定义数组，保存拒绝原因，通过索引记录，目的是保证顺序和Promise数组一致
      2. 通过次数判断是否全部拒绝，当全部拒绝时，通过reject传递AggregateError类型的错误，并将拒绝原因数组传递进去即可
  static any(promises) {
    // 1. 返回Promise,数组判断
    return new MyPromise((resolve, reject) => {
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument is not iterable'))
      }
      // 2. 空数组直接拒绝
      promises.length === 0 && reject(new AggregateError(promises, 'All promises were rejected'))

      // 3. 等待结果
      const errors = []
      let count = 0
      promises.forEach((p, index) => {
        MyPromise.resolve(p).then(res => {
          // 3.1 第一个兑现
          resolve(res)
        }, err => {
          // 3.2 全部拒绝
          errors[index] = err
          count++
          count === promises.length && reject(new AggregateError(errors, 'All promises were rejected'))
        })
      })
    })
  }

2.18 Promise\A+规范

  1. Promise\A+是社区推出的规范,最早Promise也是社区推出并实现的,旨在规范Promise的实现,里面约定了:

    1. 状态必须是pending,fulfilled,rejected
    2. then方法的详细实现细节
    3. 各种边界情况…

  2. 早期使用Promise需要导入第三方库,现在在新式浏览器中已经不需要导入第三方库,因为Promise是默认开启的

  3. 无论是早期实现了Promise的第三方库,以及现在的新式浏览器内置的Promise,都是符合Promise\A+规范要求的

参考资料

MDN-Promise

xdk_WebGIS
关注
专栏目录
JavaScript Promise 的真正工作原理
wly476923083的博客
09-12 296
Promise 是处理异步代码的一种技术，也称为脱离回调地狱的头等舱门票。
深入理解 JavaScript 中的 Promise ：从基础概念到进阶用法、手写promise
Allen-
07-10 3654
Promise是JavaScript中的一种对象，用于表示一个在未来某个时间点才会完成（或失败）的异步操作及其结果。它提供了一种处理异步操作的统一接口，使代码更加简洁和易于理解。与传统的回调函数相比，Promise能够更好地处理异步操作的结果和错误。Promise作为JavaScript中处理异步操作的一种重要机制，极大地简化了代码编写和异步流程控制。
Promise 实现原理
泥猴桃的博客
02-21 6636
前言 这篇文章主要是探究 Promise 的实现原理，对于使用方法，这里不做过多概述，如果还有对 Promise 使用方式不太了解的，可以先看 阮一峰老师的 Promise 教程 Promise 是什么,为什么会出现 Promise？ 抽象表达： Promise 是一门新的技术（ES6规范） Promise 是js 中进行异步变成的新解决方案,在没有 Promise 之前，旧方案是单纯使用回调函数 具体表达： 从语法上来说： promise 是一个构造函数 从功能上来说：promise 对象用来封
JS Promise实现原理
qq_38733943的博客
04-06 351
https://www.bilibili.com/video/BV1x84y1g7ns/中有详细的视频讲解，下面是我的学习笔记。
js中Promise的原理及实现
CC_Together的博客
04-11 4025
手写Promise
js promise实现原理
风烟
01-09 470
简单实现版本 class Promise { callbacks = []; state = 'pending'; value = null; constructor(fn) { fn(this._resolve.bind(this)) } then(onFulfilled) { if (state === 'pending') { this.callbacks.push(onFulfilled);
Promise原理
qq_34626688的博客
10-24 880
promise
Promise 原理
weixin_44990895的博客
02-26 1005
Promise 是一门新的技术（ES6规范） - Promise 是 JS 中进行异步编程的 **新解决方案** ，旧解决方案是单纯使用回调函数
Promise 详解（原理篇）
When you can't win by being better, you can win by being different.
07-20 2607
Promise 是一种异步编程的解决方案。在异步操作中，callback 会导致回调地狱的问题，Promise 解决了这个问题。一个 Promise对象有以下三种状态:pending：初始状态，既不是成功，也不是失败状态。：意味着操作成功完成。rejected：意味着操作失败。当 new Promise() 被实例化后，即表示 Promise 进入 pending 初始化状态，准备就绪，等待运行。
JS基础之promise详解
极客伍六七 的博客
03-20 954
接着我们在新的Promise对象上继续调用then方法，第二个then方法会在第一个then方法返回的Promise对象resolve后执行，打印出World，并返回一个新的Promise对象，该Promise对象在1秒钟后resolve(’!一个 Promise 可以有一个或多个 then 方法，用于处理异步操作完成后的结果。简单来说，Promise的链式调用就是指在一个Promise对象上调用then方法，然后返回一个新的Promise对象，可以继续在其上调用then方法，依次链式调用下去。
JS Promise原理
ZhouXin_0819的博客
02-28 245
class MyPromise2 { constructor(executor) { this.state = "pending" this.value = undefined this.reason = undefined this.successCB = [] this.failCB = [] let resolve = (value) => { if(this.sta
Javascript-Promise原理
03-06
Promise 对象有三种状态： Pending – Promise对象的初始状态，等到任务的完成或者被拒绝；Resolved – 任务执行完成并且成功的状态；Rejected – 任务执行完成并且失败的状态； Promise的状态只可能从Pending状态转...
js常见面试题——详解Promise使用与原理及实现过程（附源码）
2401_84103488的博客
04-30 651
这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！！try {} else {这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！！[外链图片转存中…(img-wyAHyOYw-1714408037330)]本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录。
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 445
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
如何编译 Cesium 源码
ismartcube的博客
11-13 1193
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 906
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
【Node.js】Node.js 和浏览器之间的差异
最新发布
佚名程序员
11-16 898
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
Vue常用加密方式
m0_51431448的博客
11-13 172
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 574
nuxt
js Promise 原理
10-31
JavaScript的Promise是一种处理异步操作的方式，它基于一种“失败-成功”的二元模型。Promise对象代表了一个尚未完成但最终会变为已完成（fulfilled）或失败（rejected）的值。它的核心原理主要包括以下几个步骤： 1. **创建Promise实例**：通过`new Promise()`构造函数创建一个新的Promise实例，传入一个包含两个回调函数的函数作为参数，一个是`resolve`用于任务成功时调用，另一个是`reject`用于任务失败时调用。 ```javascript const promise = new Promise((resolve, reject) => { // 异步操作 }); ``` 2. **链式调用**：Promise有`.then()`和`.catch()`方法，分别用于处理成功和失败的情况。当原Promise状态改变（fulfilled或rejected），会按照顺序执行后续的.then()方法或.catch()方法。 ```javascript promise .then(result => { // 成功回调 }) .catch(error => { // 失败回调 }); ``` 3. **状态不可变**：一旦Promise实例的状态（fulfilled或rejected）确定，就不能再改变。这意味着`.then()`和`.catch()`注册的回调只会被执行一次。 4. **链式调用的优势**：如果一个Promise依赖于另一个Promise的结果，可以自然地通过链式调用来组织，使得代码结构清晰、易于理解和维护。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值