【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); // 捕获错误
});
相关推荐
m0_748257184 分钟前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工22 分钟前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
Am心若依旧40929 分钟前
[c++11(二)]Lambda表达式和Function包装器及bind函数
开发语言·c++
明月看潮生31 分钟前
青少年编程与数学 02-004 Go语言Web编程 20课题、单元测试
开发语言·青少年编程·单元测试·编程与数学·goweb
大G哥41 分钟前
java提高正则处理效率
java·开发语言
VBA63371 小时前
VBA技术资料MF243:利用第三方软件复制PDF数据到EXCEL
开发语言
轩辰~1 小时前
网络协议入门
linux·服务器·开发语言·网络·arm开发·c++·网络协议
小_太_阳1 小时前
Scala_【1】概述
开发语言·后端·scala·intellij-idea
百万蹄蹄向前冲1 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
向宇it1 小时前
【从零开始入门unity游戏开发之——unity篇02】unity6基础入门——软件下载安装、Unity Hub配置、安装unity编辑器、许可证管理
开发语言·unity·c#·编辑器·游戏引擎