【JS Promise 及手写J简单Promise】

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

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

Promise 对象的基本用法如下:

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 类:

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。

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 时的错误。

class Promise {
  // ...

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

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

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

promise.then((value) => {
  console.log(value); // 打印 Hello, world!
}).catch((reason) => {
  console.error(reason); // 捕获错误
});

你可能感兴趣的:(JS,再刷JS,javascript,前端,开发语言)