【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); // 捕获错误
});
相关推荐
thinkMoreAndDoMore18 分钟前
深度学习(3)-TensorFlow入门(常数张量和变量)
开发语言·人工智能·python
GISer_Jing22 分钟前
Node.js中如何修改全局变量的几种方式
前端·javascript·node.js
秋意钟39 分钟前
Element UI日期选择器默认显示1970年解决方案
前端·javascript·vue.js·elementui
蓝桉8021 小时前
图片爬取案例
开发语言·数据库·python
逸狼1 小时前
【JavaEE进阶】Spring DI
java·开发语言
我命由我123451 小时前
微信小程序 - 自定义实现分页功能
前端·微信小程序·小程序·前端框架·html·html5·js
my_styles2 小时前
2025-alibaba-Sentinel组件
java·开发语言·sentinel
禁默2 小时前
C++之旅-C++11的深度剖析(1)
开发语言·c++
程序员黄同学2 小时前
请谈谈 Vue 中的 key 属性的重要性,如何确保列表项的唯一标识?
前端·javascript·vue.js
繁依Fanyi2 小时前
巧妙实现右键菜单功能,提升用户操作体验
开发语言·前端·javascript·vue.js·uni-app·harmonyos