【JS Promise 及手写J简单Promise】

JavaScript Promise 是一种异步编程解决方案,它是一种对象,用于表示一个异步操作的最终完成或失败及其结果值。

Promise 对象有三种状态:pending(等待态)、fulfilled(成功态)、rejected(失败态)。

Promise 对象的基本用法如下:

javascript 复制代码
const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (异步操作成功) {
    resolve(成功的结果);
  } else {
    reject(失败的原因);
  }
});

promise.then(
  (result) => { // 成功态回调
    console.log(result);
  },
  (reason) => { // 失败态回调
    console.error(reason);
  }
);

在 Promise 构造函数中,需要传入一个执行器函数(executor function),该函数含有 resolve 和 reject 两个参数。

如果异步操作成功,则调用 resolve 函数,将结果作为参数传递给 then 方法中的成功态回调。

如果异步操作失败,则调用 reject 函数,将失败的原因作为参数传递给 then 方法中的失败态回调。

Promise 实例有一个 then 方法,用来设置成功态和失败态的回调函数。then 方法可以链式调用,即将每个 then 方法的返回值返回给下一个 then 方法。

如果一个 Promise 对象中包含多个异步操作,可以使用 Promise.all 方法将它们组合在一起。Promise.all 接收一个可迭代对象作为参数,返回一个新的 Promise 对象,当可迭代对象中的所有 Promise 对象都变为成功态时,新 Promise 对象变为成功态,返回值是可迭代对象中所有 Promise 对象的结果数组;当可迭代对象中任意一个 Promise 对象变为失败态时,新 Promise 对象变为失败态,返回值是第一个失败的 Promise 对象的结果。

如果一个 Promise 对象中包含多个异步操作,其中一个异步操作的结果先返回,可以使用 Promise.race 方法将它们组合在一起。Promise.race 接收一个可迭代对象作为参数,返回一个新的 Promise 对象,当可迭代对象中的任意一个 Promise 对象变为成功态或失败态时,新 Promise 对象变为相应的态,并返回该 Promise 对象的结果。

手写一个简单的 Promise

JavaScript Promise 是一种异步编程的解决方案,可以让我们更加优雅地处理异步代码。下面介绍如何手写一个简单的 Promise。

先定义一个 Promise 类:

javascript 复制代码
class Promise {
  constructor(executor) {
    this.status = "pending"; // 初始化状态为 pending
    this.value = undefined; // 初始化值为 undefined
    this.reason = undefined; // 初始化原因为 undefined

    const resolve = (value) => {
      if (this.status === "pending") {
        this.status = "fulfilled"; // 修改状态为 fulfilled
        this.value = value; // 保存值
      }
    };

    const reject = (reason) => {
      if (this.status === "pending") {
        this.status = "rejected"; // 修改状态为 rejected
        this.reason = reason; // 保存原因
      }
    };

    try {
      executor(resolve, reject); // 执行 executor 函数
    } catch (error) {
      reject(error); // 如果执行出错,将错误信息保存到原因中
    }
  }
}

这个 Promise 类接受一个 executor 函数作为参数,executor 函数接受两个参数:resolve 和 reject,分别用于将 Promise 状态修改为 fulfilled 和 rejected。

接下来,我们需要定义 then 方法用于添加回调函数。then 方法接受两个可选参数:onFulfilled 和 onRejected,分别对应 Promise 状态为 fulfilled 和 rejected 时的回调函数,如果不传递参数则会将值或原因直接传递给下一个 then。

javascript 复制代码
class Promise {
  // ...

  then(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : (value) => value; // 如果 onFulfilled 不是函数,则返回 value
    onRejected = typeof onRejected === "function" ? onRejected : (reason) => { throw reason }; // 如果 onRejected 不是函数,则抛出错误

    if (this.status === "fulfilled") {
      onFulfilled(this.value); // 如果 Promise 已经成功,则直接执行 onFulfilled
    } else if (this.status === "rejected") {
      onRejected(this.reason); // 如果 Promise 已经失败,则直接执行 onRejected
    }
  }
}

最后,我们需要实现 catch 方法用于处理 Promise 状态为 rejected 时的错误。

javascript 复制代码
class Promise {
  // ...

  catch(onRejected) {
    return this.then(null, onRejected); // 相当于 then(null, onRejected)
  }
}

这样我们就手写了一个简单的 Promise,现在可以使用它来处理异步操作了:

javascript 复制代码
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, world!"); // 执行成功
  }, 1000);
});

promise.then((value) => {
  console.log(value); // 打印 Hello, world!
}).catch((reason) => {
  console.error(reason); // 捕获错误
});
相关推荐
蹊黎1 小时前
C++中vector类的部分简单实现
开发语言·c++·visual studio
Jmyd01236 小时前
Web端3D营销展厅技术实现路径:从素材上云到线索回流的数据链路
前端·3d·性能优化·三维数字化
半个落月6 小时前
LangChain Agent 中间件实战(上):生命周期、状态、短路与工具包
javascript·langchain
砚凝霜6 小时前
【软考信息安全】第二十二章 Web服务器安全分析与增强——Apache与IIS
服务器·前端·安全
半个落月6 小时前
LangChain Agent 中间件实战(下):DeepAgents文件权限、长期记忆与对话摘要
javascript·langchain
程序猿追7 小时前
kotlin-retry 接入鸿蒙后,怎样确认它真的会停止重试
开发语言·kotlin·harmonyos
我是人✓7 小时前
Java文件上传三方式对比:从传统到SpringBoot
java·开发语言
智能直播7 小时前
网络RTMP拉流不卡顿、声音不同步,一文讲透缓冲区、时间戳
开发语言·ffmpeg·php·音视频·视频编解码
墨云安全8 小时前
内网资产无法暴露到公网,怎么做安全检测?2026 年内网渗透测试的落地路径
开发语言·安全·网络安全·渗透测试·php
u0111026758 小时前
JPG、PNG、WebP 怎么选?按透明度、体积和使用场景做判断
前端·javascript·vue.js·图像处理·ai作画