Promise原理理解， 手写一个Promise

已于 2023-12-10 20:34:01 修改
阅读量60 收藏
点赞数
分类专栏： vue 文章标签： 前端 javascript 开发语言
于 2023-12-10 20:31:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38977547/article/details/134911849
版权
本文详细介绍了Promise的基本原理，包括Promise的常见用法（如then,catch,all,race），以及Promise类的结构、构造函数和静态方法的实现。通过实例展示了如何创建、链式调用和处理Promise的不同状态。
摘要由CSDN通过智能技术生成

Promise原理理解， 手写一个Promise

1. Promis 常用情况

new Promise((resolve, reject) => {
    resolve(4111111)
  }).then(res => {
    console.log(res, "res");
  }).catch(err => {
    console.log(err, "err");
  })

  Promise.resolve(422222).then(res => {
    console.log(res, "res");
  })

  Promise.reject(433333).catch(err => {
    console.log(err, "err");
  })

  let p1 = new Promise((resolve, reject) => {
    resolve(4444444)
  })

  let p2 = new Promise((resolve, reject) => {
    resolve(4555555)
  })

  Promise.all([p1, p2]).then(ress => {
    console.log(ress, "ress");
  }).catch(err => {
    console.log(err, "err");
  })

  let p3 = new Promise((resolve, reject) => {
    reject(4666666)
  })

  let p4 = new Promise((resolve, reject) => {
    reject(4777777)
  })

  Promise.race([p3, p4]).then(res => {
    console.log(res, "res");
  }).catch(err => {
    console.log(err, "err");
  })

2. Promise 类结构

/**
 * Promise异常
 */
class PromiseError extends Error {
  constructor(message) {
    super(message);
    this.name = "(in promise)";
  }
}


// 是否纯在失败回调函数
let hasCatch = false;
class Promise {
  /**
   * 构成函数参数
   * @param (resolve, reject) => {)
   */
  constructor(executor) {

  }

  /**
   * then方法， 可传入成功的回调函数和失败的回调函数
   * @param res => {｝
   * @param err => {}
   */
  then(onResolved, onRejected) {



  }

  /**
   * catch方法 可传入失败的回调函数
   * @param err => {}
   */
  catch(onRejected){

  }

  /**
   * 静态 resolve 方法  设置成功的值
   * @param result
   */
  static resolve(result){


  }

  /**
   * 静态 reject 方法  设置失败的值
   * @param result
   */
  static reject(result) {

  }

  /**
   * 静态 all 方法， 传入 promise 数组， 所有 promise 都成功时触发then的回调，
   * 或者其中一个 promise 失败， 触发 catch 回调
   * @param promises
   */
  static all(promises){

  }

  /**
   * 静态 race 方法， 传入 promise 数组， 其中 promise 状态变更时，就会触发回调
   * @param promises
   */
  static race (promises) {

  }
}

3. 构造函数

   /**
   * 构成函数参数
   * @param (resolve, reject) => {)
   */
  constructor(executor) {
    // pending 初始， fulfilled 成功， rejected 失败
    this.PromiseState = 'pending';
    // resolve 或 reject 函数设置的设置的返回值
    this.PromiseResult = null

    // 声明一个数组，用来存放then方法中的回调
    this.callbacks = []

    /**
     * resolve 方法，传入一个值, 调用成功回调
     * @param data
     */
    let resolve = (data) => {
      // 判断状态， 如果不是初始， 则直接 return
      if (this.PromiseState != 'pending') return
      // 状态改为成功
      this.PromiseState = 'fulfilled';
      // 赋值回调函数的返回值
      this.PromiseResult = data;
      // 异步调用回调函数，用setTimeout模拟异步
      setTimeout(() => {
        this.callbacks.forEach(item => {
          item.onResolved(data);
        })
      })
    }

    /**
     * reject 方法，传入一个值， 调用失败回调
     * @param data
     */
    let reject = (data) => {
      // 判断状态， 如果不是初始， 则直接 return
      if (this.PromiseState != 'pending') return
      // 状态改为失败
      this.PromiseState = 'rejected';
      // 赋值回调函数的返回值
      this.PromiseResult = data;
      // 异步调用回调函数，用setTimeout模拟异步
      setTimeout(() => {
        // 判断是否存在失败回调，存在则执行回调，不存在则抛异常
        if (hasCatch) {
          this.callbacks.forEach(item => {
            item.onRejected(data);
          })
        } else {
          hasCatch = true
          throw new PromiseError(data);

        }

      })
    }

    // 执行传入的函数
    try {
      executor(resolve, reject)
    } catch (err) {
      reject(err);
    }
  }

4. then 函数

  /**
   * then方法， 可传入成功的回调函数和失败的回调函数
   * @param res => {｝
   * @param err => {}
   */
  then(onResolved, onRejected) {

    // 判断 onResolved 是否是函数，如果不是函数，则改为函数
    if (typeof onResolved !== 'function') {
      onResolved = value => value
    }

    if(onRejected){
      hasCatch = true;
    }

    // 判断 onRejected 是否是函数，如果不是函数，则改为函数
    if (typeof onRejected !== 'function') {
      onRejected = reason => {
        throw reason
      }
    }

    // 返回 一个 promise 对象
    return new Promise((resolve, reject) => {
      // 回调函数调用
      let callback = (callFn) => {
        try {
          // 调用回调函数
          let result = callFn(this.PromiseResult);
          // 判断返回值是否是 promise 对象
          if(result instanceof Promise){
            result.then(res => {
              resolve(res)
            }).catch(err => {
              reject(err)
            })
          }else {
            resolve(result)
          }
        }catch (err) {
          reject(err);
        }

      }

      // 判断状态， 如果是成功， 则将调用成功回调函数
      if (this.PromiseState == 'fulfilled') {
        setTimeout(() => {
          callback(onResolved);
        })
      }

      // 判断状态， 如果是失败， 则将调用失败回调函数
      if (this.PromiseState == 'rejected') {
        setTimeout(() => {
          callback(onRejected);
        })
      }

      // 判断状态， 如果是初始， 则将回调函数插入回调函数数组
      if (this.PromiseState == 'pending') {
        this.callbacks.push({
          onResolved() {
            callback(onResolved);
          }, onRejected() {
            callback(onRejected);
          }
        })
      }
    })
  }

5. catch 函数

  /**
   * catch方法 可传入失败的回调函数
   * @param err => {}
   */
  catch(onRejected) {
    // 直接调用then函数
    return  this.then(undefined, onRejected)
  }

6. then 和 catch 调用结果

6.1. then

在这里插入图片描述在这里插入图片描述

6.2. catch

在这里插入图片描述在这里插入图片描述

7. resolve函数

  /**
   * 静态 resolve 方法  设置成功的值
   * @param result
   */
  static resolve(result) {
    return new Promise((resolve, reject) => {
      if(result instanceof Promise){
        result.then(res => {
          resolve(res)
        }).catch(err => {
          reject(result);
        })
      }else {
        resolve(result);
      }
    })
  }

7.1 resolve 使用

在这里插入图片描述
在这里插入图片描述

8 reject 函数

  /**
   * 静态 reject 方法  设置失败的值
   * @param result
   */
  static reject(result) {
    return new Promise((resolve, reject) => {
      reject(result);
    })
  }

8.1 reject 函数使用

在这里插入图片描述在这里插入图片描述

9. all 函数

  /**
   * 静态 all 方法， 传入 promise 数组， 所有 promise 都成功时触发then的回调，
   * 或者其中一个 promise 失败， 触发 catch 回调
   * @param promisess
   */
  static all(promisess) {
    return new Promise((resolve, reject) => {
      // 回调触发次数
      let count = 0;
      // 对调返回参数数组
      let results = [];
      promisess.forEach(item => {
        item.then(res => {
          results.push(res);
          count ++;
          if(count >= promisess.length){
            resolve(results)
          }
        }).catch(err => {
          reject(err)
        })
      })
    })
  }

9.1. all 函数使用

都是 resolve
在这里插入图片描述
在这里插入图片描述

包含 reject
在这里插入图片描述
在这里插入图片描述

10. race 函数

  /**
   * 静态 race 方法， 传入 promise 数组， 其中 promise 状态变更时，就会触发回调
   * @param promisess
   */
  static race(promisess) {
    return new Promise((resolve, reject) => {
      promisess.forEach(item => {
        item.then(res => {
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    })
  }
}

10.1. race 函数使用

在这里插入图片描述在这里插入图片描述

11. 完整的代码

/**
 * Promise异常
 */
class PromiseError extends Error {
  constructor(message) {
    super(message);
    this.name = "(in promise)";
  }
}

// 是否纯在失败回调函数
let hasCatch = false;

class Promise {
  /**
   * 构成函数参数
   * @param (resolve, reject) => {)
   */
  constructor(executor) {
    // pending 初始， fulfilled 成功， rejected 失败
    this.PromiseState = 'pending';
    // resolve 或 reject 函数设置的设置的返回值
    this.PromiseResult = null

    // 声明一个数组，用来存放then方法中的回调
    this.callbacks = []

    /**
     * resolve 方法，传入一个值, 调用成功回调
     * @param data
     */
    let resolve = (data) => {
      // 判断状态， 如果不是初始， 则直接 return
      if (this.PromiseState != 'pending') return
      // 状态改为成功
      this.PromiseState = 'fulfilled';
      // 赋值回调函数的返回值
      this.PromiseResult = data;
      // 异步调用回调函数，用setTimeout模拟异步
      setTimeout(() => {
        this.callbacks.forEach(item => {
          item.onResolved(data);
        })
      })
    }

    /**
     * reject 方法，传入一个值， 调用失败回调
     * @param data
     */
    let reject = (data) => {
      // 判断状态， 如果不是初始， 则直接 return
      if (this.PromiseState != 'pending') return
      // 状态改为失败
      this.PromiseState = 'rejected';
      // 赋值回调函数的返回值
      this.PromiseResult = data;
      // 异步调用回调函数，用setTimeout模拟异步
      setTimeout(() => {
        // 判断是否存在失败回调，存在则执行回调，不存在则抛异常
        if (hasCatch) {
          this.callbacks.forEach(item => {
            item.onRejected(data);
          })
        } else {
          hasCatch = true
          throw new PromiseError(data);

        }

      })
    }

    // 执行传入的函数
    try {
      executor(resolve, reject)
    } catch (err) {
      reject(err);
    }
  }

  /**
   * then方法， 可传入成功的回调函数和失败的回调函数
   * @param res => {｝
   * @param err => {}
   */
  then(onResolved, onRejected) {

    // 判断 onResolved 是否是函数，如果不是函数，则改为函数
    if (typeof onResolved !== 'function') {
      onResolved = value => value
    }

    if(onRejected){
      hasCatch = true;
    }

    // 判断 onRejected 是否是函数，如果不是函数，则改为函数
    if (typeof onRejected !== 'function') {
      onRejected = reason => {
        throw reason
      }
    }

    // 返回 一个 promise 对象
    return new Promise((resolve, reject) => {
      // 回调函数调用
      let callback = (callFn) => {
        try {
          // 调用回调函数
          let result = callFn(this.PromiseResult);
          // 判断返回值是否是 promise 对象
          if(result instanceof Promise){
            result.then(res => {
              resolve(res)
            }).catch(err => {
              reject(err)
            })
          }else {
            resolve(result)
          }
        }catch (err) {
          reject(err);
        }

      }

      // 判断状态， 如果是成功， 则将调用成功回调函数
      if (this.PromiseState == 'fulfilled') {
        setTimeout(() => {
          callback(onResolved);
        })
      }

      // 判断状态， 如果是失败， 则将调用失败回调函数
      if (this.PromiseState == 'rejected') {
        setTimeout(() => {
          callback(onRejected);
        })
      }

      // 判断状态， 如果是初始， 则将回调函数插入回调函数数组
      if (this.PromiseState == 'pending') {
        this.callbacks.push({
          onResolved() {
            callback(onResolved);
          }, onRejected() {
            callback(onRejected);
          }
        })
      }

    })

  }

  /**
   * catch方法 可传入失败的回调函数
   * @param err => {}
   */
  catch(onRejected) {
    // 直接调用then函数
    return  this.then(undefined, onRejected)
  }

  /**
   * 静态 resolve 方法  设置成功的值
   * @param result
   */
  static resolve(result) {
    return new Promise((resolve, reject) => {
      if(result instanceof Promise){
        result.then(res => {
          resolve(res)
        }).catch(err => {
          reject(result);
        })
      }else {
        resolve(result);
      }
    })
  }

  /**
   * 静态 reject 方法  设置失败的值
   * @param result
   */
  static reject(result) {
    return new Promise((resolve, reject) => {
      reject(result);
    })
  }

  /**
   * 静态 all 方法， 传入 promise 数组， 所有 promise 都成功时触发then的回调，
   * 或者其中一个 promise 失败， 触发 catch 回调
   * @param promisess
   */
  static all(promisess) {
    return new Promise((resolve, reject) => {
      // 回调触发次数
      let count = 0;
      // 对调返回参数数组
      let results = [];
      promisess.forEach(item => {
        item.then(res => {
          results.push(res);
          count ++;
          if(count >= promisess.length){
            resolve(results)
          }
        }).catch(err => {
          reject(err)
        })
      })
    })
  }

  /**
   * 静态 race 方法， 传入 promise 数组， 其中 promise 状态变更时，就会触发回调
   * @param promisess
   */
  static race(promisess) {
    return new Promise((resolve, reject) => {
      promisess.forEach(item => {
        item.then(res => {
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    })
  }
}
必哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
300秒带你手写一个promise
小陈的博客
05-18 6024
前言 为什么要写这一篇文章？ 加深对promise的理解，以及再实际工作中的灵活运用。 知其然，知其所以然。 面试需要。（重点！！！） 1:声明promise 首先我们先来聊聊promise的几个特性： 一个promise有三种状态：pengding,fulfilled，rejected. promise状态一旦被改变，就不允许被改变了。 new Promise构造函数接受一个函数参数，这个函数有两个参数分别为resole和reject函数。 其实代码很好写，我们就来检验以下resolve的参数是否
教你如何手写一个Promise
ose_huang的博客
02-25 9506
promise的进阶，手写一个自己的promise
手写promis(1)---核心功能篇
每天都要努力学习哦~~
11-20 107
Promise（承诺）是一种用于处理异步操作的JavaScript编程技术。它是一种代表一个尚未完成的操作的对象，该操作可能会在将来的某个时刻完成或失败。Promise提供了一种更结构化和可维护的方式来处理异步代码，特别是在处理网络请求、文件I/O、定时器等操作时非常有用。Pending（进行中）：初始状态，表示操作尚未完成或失败。Fulfilled（已完成）：表示操作成功完成。Rejected（已失败）：表示操作失败。then()
手写Promise
XunLin233的博客
05-30 1944
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
手写Promise的基本实现 （超详细）
qq_48554377的博客
09-22 7518
手写Promise的基本实现 （超详细） 面试必备！ 本文带大家实现一个基本的 promise 过多的边界情况就不在考虐,理解主要实现过程以及逻辑即可 对于一个个出现的问题我会逐步分析原因以及对应的解决思路
手写Promise 理解promise底层原理
Niall_Tonshall的博客
01-18 2415
本文参考了此博客，在网上浏览了很多关于Promise的相关资料，promise可以说是JavaScript的重难点了，其中，很是感谢阮一峰老师的博客讲解以及MDN上的文档教程 如对Promise不太熟悉的同学，可以先浏览Promise工作原理分析，如有不同意见，欢迎讨论，一起进步。 Promise基本流程 function doSomething(){ var p1 = new Promise(function (resolve, reject) { setTimeout(()=.
解析 Promise 原理，实现一个Promise
Geek的博客
09-19 8188
概述这篇文章旨在解析 Promise的异步实现原理，并且以 ES6 Promise 为蓝本实现一个 Promise。
【手写Promise】
热门推荐
weixin_49487698的博客
05-16 1万+
一、JS的错误 1、错误的类型 2、错误处理 3、错误对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
手写一个Promise
weixin_34019929的博客
03-16 697
promise Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 function Promise(excutor) { let self = this self.status = 'pending' self.value = null self.reas...
史上最最最易懂的手写Promise原理及实现
smilelixiaojie的博客
06-12 624
手写promise原理 1、promise原理及实现 1）、Promise 就是一个类 在执行这个类的时候 需要传递一个执行器进去 执行器会立即执行 2）、Promise 中有三种状态 分别为 成功 fulfilled 失败 rejected 等待 pending pending -> fulfilled pending -> rejected 一旦状态确定就不可更改 3）、resolve和reject函数是用来更改状态的 resolve: fulfilled reject: rejected
Promise的用法&原理&手写实现
hangao233的博客
03-31 2527
Promise的用法&原理&手写实现
ES6 - 从Promise入门到深入原理（手写一个自己的Promise）
前端攻城狮Dannis
04-17 4834
事件和回调函数的缺陷 我们习惯于使用传统的回调或者事件处理来解决异步问题 事件: 某个对象的属性是一个函数, 当发生一件事时, 运行该函数 dom.onclick = function() { // ...执行的代码 } 回调：运行某个函数以实现某个功能的时候, 传入一个函数作为参数, 当某个特定的条件下的时候, 就会触发该函数 dom.addEventListner('click', ...
手写promise
GuoZebin的博客
05-31 372
前几天在看知乎的时候，无意间发现了一道面试题，手写promise，因为没研究过promise的实现，所以对这个问题也是一脸懵逼，忍不住就研究了一下。 try { module.exports = Promise } catch (e) {} function Promise(executor) { var self = this self.status = 'pendi...
【手写Promise】史上最最最详细的手写Promise教程
Anles的博客
05-19 3625
转载自https://yq.aliyun.com/articles/613412 class Promise{ constructor(executor){ this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; this.onRejectedCallbacks = []; let resolve = va
promise手写（完整）
mangguom23的博客
08-17 5572
实现的主要功能如下 Promise.prototype.then Promise.prototype.catch Promise.resolve Promise.reject Promise.all Promise.race 设定三个状态 PENDING、FULFILLED、REJECTED ，只能由PENDING改变为FULFILLED、REJECTED，并且只能改变一次 MyPromise接收一个函数executor，executor有两个参数resolve方法和reject方法 resolve将
手写promise的原理及思路
qq_35258995的博客
10-12 1671
highlight: a11y-dark theme: healer-readable 手写promise思路 先逐步分析，一步一步的写代码，最终有完整示例 1.promise是一个类，参数是一个函数执行器，且会立即执行。函数执行器接受两个参数，一个成功回调resolve，一个失败回调reject class MyPromise { constructor(executor) { executor(this.resolve.bind(this), this.reject.bind(.
30分钟，让你彻底明白Promise原理
weixin_34174105的博客
05-19 862
原文链接 前言 前一阵子记录了promise的一些常规用法，这篇文章再深入一个层次，来分析分析promise的这种规则机制是如何实现的。ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不是太了解，可以移步我的上一篇博文。 本文的promise源码是按照Promise/A+规范来编写的（不想看英文版的移步Promis...
ASP.NET Core Web API 使用Autofac框架
最新发布
鲤籽鲲的博客
08-08 641
ASP.NET Core Web API 使用Autofac框架
手写一个promise
03-20
很高兴为您提供一个手写的 Promise 实现，代码如下： class Promise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onResolvedCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onResolvedCallbacks.forEach((fn) => fn()); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach((fn) => fn()); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value; onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason }; const promise2 = new Promise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { const x = onFulfilled(this.value); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } if (this.state === 'rejected') { setTimeout(() => { try { const x = onRejected(this.reason); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); } if (this.state === 'pending') { this.onResolvedCallbacks.push(() => { setTimeout(() => { try { const x = onFulfilled(this.value); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); this.onRejectedCallbacks.push(() => { setTimeout(() => { try { const x = onRejected(this.reason); Promise.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }, 0); }); } }); return promise2; } static resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError('Chaining cycle detected for promise')); } let called = false; if (x instanceof Promise) { x.then((value) => { Promise.resolvePromise(promise2, value, resolve, reject); }, reject); } else if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { const then = x.then; if (typeof then === 'function') { then.call(x, (value) => { if (called) return; called = true; Promise.resolvePromise(promise2, value, resolve, reject); }, (reason) => { if (called) return; called = true; reject(reason); }); } else { resolve(x); } } catch (error) { if (called) return; called = true; reject(error); } } else { resolve(x); } } }
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值