【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); // 捕获错误
});
相关推荐
重生之我在20年代敲代码18 分钟前
strncpy函数的使用和模拟实现
c语言·开发语言·c++·经验分享·笔记
爱上语文20 分钟前
Springboot的三层架构
java·开发语言·spring boot·后端·spring
编程零零七2 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
北岛寒沫3 小时前
JavaScript(JS)学习笔记 1(简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组)
javascript·笔记·学习
2401_858286113 小时前
52.【C语言】 字符函数和字符串函数(strcat函数)
c语言·开发语言
铁松溜达py3 小时前
编译器/工具链环境:GCC vs LLVM/Clang,MSVCRT vs UCRT
开发语言·网络
everyStudy3 小时前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript
(⊙o⊙)~哦4 小时前
JavaScript substring() 方法
前端
无心使然云中漫步5 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者5 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js