前端开发，Promise 从原理到实现，一文通

小old弟2025-08-04 13:51

前言

Promise 是 js 异步编程的核心概念之一，它为我们提供了一种更优雅的方式来处理异步操作。

本文将全面剖析 Promise 的工作原理，并逐步实现一个符合 Promise/A+ 规范的 Promise 库。

正文

一、Promise 基础概念

Promise 代表一个异步操作的最终完成（或失败）及其结果值。它有三种状态：

  1. pending ：初始状态，既不是成功，也不是失败状态
  2. fulfilled ：意味着操作成功完成
  3. rejected ：意味着操作失败

状态一旦改变就不能再变，只能从 pending 变为 fulfilled ，或从 pending 变为 rejected。

二、Promise 核心静态方法实现

1. Promise.resolve 实现

Promise.resolve 方法返回一个以给定值解析后的 Promise 对象。

javascript 复制代码 
Promise.resolve = (param) => {
  if(param instanceof Promise) return param;
  return new Promise((resolve, reject) => {
    if(param && param.then && typeof param.then === 'function') {
      // param 状态变为成功会调用resolve，将新 Promise 的状态变为成功，反之亦然
      param.then(resolve, reject);
    }else {
      resolve(param);
    }
  })
}

实现要点：

  • 如果参数是 Promise 实例，直接返回该实例
  • 如果参数是 thenable 对象（具有 then 方法的对象），返回的 Promise 会跟随这个对象`
  • 其他情况返回一个以该值为成功状态的 Promise 对象

2. Promise.reject 实现

Promise.reject 方法返回一个带有拒绝原因的 Promise 对象。

javascript 复制代码 
Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    });
}

与 resolve 不同，reject 会原封不动地将 reason 向下传递。

三、Promise 实例方法实现

1. Promise.prototype.finally 实现

finally 方法无论 Promise 最终状态如何都会执行。

javascript 复制代码 
Promise.prototype.finally = function(callback) {
  this.then(value => {
    return Promise.resolve(callback()).then(() => {
      return value;
    })
  }, error => {
    return Promise.resolve(callback()).then(() => {
      throw error;
    })
  })
}

实现要点：

  • 无论成功或失败都会执行回调
  • 保持原 Promise 的值向下传递
  • 回调函数返回的 Promise 会等待执行完毕

2. Promise.prototype.then 实现

then 方法是 Promise 的核心，它返回一个新的 Promise。

javascript 复制代码 
MyPromise.prototype.then = function (onResolved, onRejected) {
  var self = this;
  var promise2;
  
  // onResolved 和 onRejected 都是可选的
  onResolved = typeof onResolved === 'function' ? onResolved : v => v;
  onRejected = typeof onRejected === 'function' ? onRejected : r => { throw r };

  if (self.currentState === RESOLVED) {
    return (promise2 = new MyPromise(function (resolve, reject) {
      setTimeout(function () {
        try {
          var x = onResolved(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      });
    }));
  }
  
  // 其他状态类似处理...
}

四、Promise 高级静态方法实现

1. Promise.all 实现

Promise.all 接收一个 Promise 数组，当所有 Promise 都成功时返回结果数组，有一个失败则立即失败。

javascript 复制代码 
Promise.all = function(promises) {
  return new Promise((resolve, reject) => {
    let result = [];
    let index = 0;
    let len = promises.length;
    if(len === 0) {
      resolve(result);
      return;
    }

    for(let i = 0; i < len; i++) {
      Promise.resolve(promises[i]).then(data => {
        result[i] = data;
        index++;
        if(index === len) resolve(result);
      }).catch(err => {
        reject(err);
      })
    }
  })
}

2. Promise.race 实现

Promise.race 返回第一个完成的 Promise 的结果。

javascript 复制代码 
Promise.race = function(promises) {
  return new Promise((resolve, reject) => {
    let len = promises.length;
    if(len === 0) return;
    for(let i = 0; i < len; i++) {
      Promise.resolve(promises[i]).then(data => {
        resolve(data);
        return;
      }).catch(err => {
        reject(err);
        return;
      })
    }
  })
}

3. Promise.allSettled 实现

Promise.allSettled 等待所有 Promise 完成，无论成功或失败。

javascript 复制代码 
function allSettled(iterable) {
  return new Promise((resolve, reject) => {
    function addElementToResult(i, elem) {
      result[i] = elem;
      elementCount++;
      if (elementCount === result.length) {
        resolve(result);
      }
    }

    let index = 0;
    for (const promise of iterable) {
      const currentIndex = index;
      promise.then(
        (value) => addElementToResult(
          currentIndex, {
            status: 'fulfilled',
            value
          }),
        (reason) => addElementToResult(
          currentIndex, {
            status: 'rejected',
            reason
          }));
      index++;
    }
    if (index === 0) {
      resolve([]);
      return;
    }
    let elementCount = 0;
    const result = new Array(index);
  });
}

代码：完整 Promise 实现

下面是一个符合 Promise/A+ 规范的完整实现：

javascript 复制代码 
// 三种状态
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";

function MyPromise(fn) {
  let _this = this;
  _this.currentState = PENDING;
  _this.value = undefined;
  _this.resolvedCallbacks = [];
  _this.rejectedCallbacks = [];

  _this.resolve = function (value) {
    if (value instanceof MyPromise) {
      return value.then(_this.resolve, _this.reject)
    }
    setTimeout(() => {
      if (_this.currentState === PENDING) {
        _this.currentState = RESOLVED;
        _this.value = value;
        _this.resolvedCallbacks.forEach(cb => cb());
      }
    })
  };

  _this.reject = function (reason) {
    setTimeout(() => {
      if (_this.currentState === PENDING) {
        _this.currentState = REJECTED;
        _this.value = reason;
        _this.rejectedCallbacks.forEach(cb => cb());
      }
    })
  }
  
  try {
    fn(_this.resolve, _this.reject);
  } catch (e) {
    _this.reject(e);
  }
}

// then 方法实现
MyPromise.prototype.then = function (onResolved, onRejected) {
  var self = this;
  var promise2;
  
  onResolved = typeof onResolved === 'function' ? onResolved : v => v;
  onRejected = typeof onRejected === 'function' ? onRejected : r => { throw r };

  if (self.currentState === RESOLVED) {
    return (promise2 = new MyPromise(function (resolve, reject) {
      setTimeout(function () {
        try {
          var x = onResolved(self.value);
          resolutionProcedure(promise2, x, resolve, reject);
        } catch (reason) {
          reject(reason);
        }
      });
    }));
  }
  
  // 其他状态处理...
};

// 解析过程
function resolutionProcedure(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError("Error"));
  }
  
  if (x instanceof MyPromise) {
    if (x.currentState === PENDING) {
      x.then(function (value) {
        resolutionProcedure(promise2, value, resolve, reject);
      }, reject);
    } else {
      x.then(resolve, reject);
    }
    return;
  }
  
  let called = false;
  if (x !== null && (typeof x === "object" || typeof x === "function")) {
    try {
      let then = x.then;
      if (typeof then === "function") {
        then.call(
          x,
          y => {
            if (called) return;
            called = true;
            resolutionProcedure(promise2, y, resolve, reject);
          },
          e => {
            if (called) return;
            called = true;
            reject(e);
          }
        );
      } else {
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
}
  1. 状态管理：Promise 的状态一旦改变就不能再变
  2. 异步执行：then 方法的回调需要异步执行
  3. 链式调用：then 方法必须返回一个新的 Promise
  4. 值穿透：then 的参数如果不是函数需要忽略
  5. Promise 解析过程：处理 thenable 对象和循环引用

总结

Promise 的核心在于状态管理、链式调用和异步处理。

了解其底层原理，将使我们能够更好地使用和调试Promise代码，去运用一些第三方Promise库。

相关推荐
li理6 分钟前
鸿蒙 Next 布局开发实战：6 大核心布局组件全解析
前端
EndingCoder8 分钟前
React 19 与 Next.js：利用最新 React 功能
前端·javascript·后端·react.js·前端框架·全栈·next.js
li理10 分钟前
鸿蒙 Next 布局大师课：从像素级控制到多端适配的实战指南
前端
前端赵哈哈14 分钟前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
Nicholas6821 分钟前
flutter滚动视图之ScrollView源码解析(五)
前端
电商API大数据接口开发Cris22 分钟前
Go 语言并发采集淘宝商品数据：利用 API 实现高性能抓取
前端·数据挖掘·api
风中凌乱的L28 分钟前
vue 一键打包上传
前端·javascript·vue.js
GHOME31 分钟前
Vue2与Vue3响应式原理对比
前端·vue.js·面试
张元清34 分钟前
useMergedRefs: 组件封装必不可少的自定义Hook
前端·javascript·面试
openInula前端开源社区34 分钟前
【openInula茶话会】第四期：openInula API2.0编译器原理
前端·javascript
热门推荐
01UV安装并设置国内源02如何在Windows/Linux系统上安装adb03【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）04Cursor 快速入门指南：从安装到核心功能05不再让Windows更新！&Edge游戏助手卸载及关闭自动更新06Claude Code VSCode集成开发指南：AI编程助手完整配置07【踩坑笔记】50系显卡适配的 PyTorch 安装082025最新国内服务器可用docker源仓库地址大全（2025年8月更新）09Redis 下载与安装 教程 windows版10KGG转MP3工具|非KGM文件|解密音频