> `Promise.race`和`Promise.all`是性格相对的兄弟。之前已经带大家实现过`Promise.all`，可以看完那篇之后，对照着来看今天这篇，本文将介绍如何使用`JavaScript`手写实现`Promise.race`的功能和逻辑。






`Promise.race`是一个静态方法，它接受一个可迭代对象作为参数，返回一个新的`Promise`对象。这个新的`Promise`对象的状态和值取决于可迭代对象中最先完成的`Promise`对象。如果可迭手对象为空，那么返回的`Promise`对象将永远处于`pending`状态。如果可迭代对象中有非`Promise`对象，那么返回的`Promise`对象将立即以该值为`fulfilled`状态。

## 使用场景

在某些情况下，我们可能需要在一定时间内完成某个异步操作，否则就取消或者报错。这样可以避免一些不必要的等待或者资源浪费。例如，我们可能需要在5秒内获取一个网络请求的结果，如果超过5秒还没有返回，就认为请求失败。这时候，我们可以使用`Promise.race`来实现一个超时机制。

`Promise.race`接受一个可迭代对象作为参数，返回一个新的`Promise`对象。这个新的`Promise`对象的状态和值取决于可迭代对象中最先完成的`Promise`对象。所以，我们可以将一个网络请求的`Promise`和一个延迟拒绝的`Promise`放入`Promise.race`中，这样如果网络请求在指定时间内没有返回结果，就会触发延迟拒绝的`Promise`，从而实现超时错误。

下面是一个使用`fetch API`和`setTimeout`来实现超时机制的代码示例

```js
// 定义一个延迟拒绝的Promise
function timeoutPromise (ms, message) {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error(message));
    }, ms);
  });
}

// 使用fetch API发送一个网络请求
function fetchRequest (url) {
  return fetch(url).then((res) => res.json());
}

// 使用Promise.race实现超时机制
function fetchWithTimeout (url, ms, message) {
  return Promise.race([fetchRequest(url), timeoutPromise(ms, message)]);
}

// 调用函数，如果5秒内没有返回结果，就抛出错误
fetchWithTimeout("https://jsonplaceholder.typicode.com/users", 5000, "请求超时")
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error.message);
  });

```

大家如果对`Promise.race`比较陌生，可以先用上面的`demo`体验一下。想手写实现某些方法或框架的源码，前提一定是对原方法或原框架特别熟悉。

## Promise.race实现思路

实现 `Promise.race` 方法的关键在于一点：

- 传入的任意一个 `Promise` 对象状态变为 `fulfilled` 或者 `rejected`，它就会采用这个 `Promise` 对象的状态作为自己的状态，并返回它的结果或错误原因。

基于这个思路，我们可以通过以下步骤来手写实现 `Promise.race` 方法:

- 传入一个 `Promise` 对象数组。
- 返回一个新的 `Promise` 对象。
- 遍历 `Promise` 对象数组，防止传入的对象数组中存在非`Promise`元素，将所有遍历的元素都用`Promise.resolve`包裹一下，保证处理的一定是`Promise`对象。
- 任意`Promise`对象在执行中无论成功或失败，均直接返回。

## 代码实现

根据上述总结的思路，我们进行代码实现。

### 核心代码

```js
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            Promise.resolve(promises[i]).then(resolve).catch(reject)
        }
    })
}
```

### 使用示例

```js
const promise1 = new Promise(resolve => setTimeout(() => resolve('foo'), 3000));
const promise2 = new Promise(resolve => setTimeout(() => resolve('bar'), 2000));
const promise3 = new Promise((resolve, reject) => setTimeout(() => reject('baz'), 1000));

Promise.race([promise1, promise2, promise3])
  .then(result => console.log(result))
  .catch(error => console.error(error)); // 输出 "baz"
```

## 总结

在本篇博客中，我们首先介绍了`Promise.race`方法的使用场景，根据使用场景写了`demo`示例体验了一下原生的`Promise.race`，然后根据使用体验，分析了其实现原理，总结了手写实现的思路，最终我们手写实现了 `Promise.race` 方法，实现了该方法的核心思想，并提供了使用示例。

`Promise.race` 是一个非常实用的 `Promise` 方法，它可以让我们同时运行多个异步操作，并返回最先完成的操作的结果或错误原因。

手写实现Promise.race

> 在之前的博文中，我们已经用`ES6`的类实现了一个`Promise`，提供了基础的`then`方法和`catch`方法，这是`Promise`最核心的内容。随着`Promise`不断的发展和业务场景的逐渐复杂，拓展了很多新的方法。比如我们这次要讲到的`Promise.all`。



`Promise.all` 是一个 `JavaScript`中 `Promise`对象 的内置静态方法，它可以接收一个由多个 `promise` 组成的数组或者其他可迭代对象，然后返回一个新的 `promise`。这个新的 `promise` 会在所有输入的 `promise` 都成功完成时，用一个包含所有完成值的数组来解决；或者在任何一个输入的 `promise` 失败时，用第一个失败原因来拒绝。`Promise.all` 可以用来并行执行多个异步任务，并且等待它们全部完成后再继续执行后续的代码。

## 使用场景

当你需要并行执行多个异步任务，并且等待它们全部完成后再继续执行后续的代码时，可以使用 `Promise.all`。

例如，假设你需要从不同的 `API` 获取一些数据，然后将它们组合成一个结果来处理。

你可以使用 `Promise.all` 来同时发起多个网络请求，然后在所有请求都成功返回时，用一个包含所有响应数据的数组来处理 `Promise.all` 返回的 `promise`。

如果任何一个请求失败，`Promise.all` 返回的 `promise` 就会被拒绝，你可以在 `catch` 语句中处理错误。

## 基本使用

我们以上述提到的使用场景，来对原生的`Promise.all`进行简单使用。

```js

// 定义一个函数，用来发起网络请求 

function fetch(url) { 
    return new Promise((resolve, reject) => { 
        // 使用 XMLHttpRequest 来模拟网络请求 
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url); 
        xhr.onload = () => { 
            if (xhr.status === 200) { 
                // 如果请求成功，解析响应数据并解决 
                promise resolve(JSON.parse(xhr.response)); 
              } else { 
                // 如果请求失败，拒绝 promise 并传递错误信息 
                reject(new Error(xhr.statusText)); 
              } 
            }; 
       xhr.onerror = () => { 
         // 如果请求出错，拒绝 promise 并传递错误信息 
         reject(new Error("Network error")); 
        }; 
       xhr.send(); 
    }); 
}

// 定义一个数组，包含三个不同的 API 地址 
let urls = [ 
    "https://jsonplaceholder.typicode.com/users",
    "https://jsonplaceholder.typicode.com/posts",
    "https://jsonplaceholder.typicode.com/comments"
];

// 使用 Promise.all 来同时发起三个网络请求 
Promise.all(
    urls.map(fetch)
)
.then((results) => {
    // 当所有请求都成功返回时，results 是一个包含三个响应数据的数组
    console.log(results);
    // 你可以在这里将 results 组合成一个结果进行处理
})
.catch((error) => {
    // 当任何一个请求失败时，error 是第一个失败原因
    console.error(error);
    // 你可以在这里处理错误，例如显示一个提示信息或者重试请求
})

```

大家如果对`Promise.all`比较陌生，可以先用上面的`demo`体验一下。想手写实现某些方法或框架的源码，前提一定是对原方法或原框架特别熟悉。

## Promise.all实现思路

实现 `Promise.all` 方法的关键在于:

1. 在所有的 `Promise` 对象都成功时，返回一个包含所有 `Promise` 结果的数组。
2. 如果有一个 `Promise` 对象失败，则立即返回失败原因。

基于这个思路，我们可以通过以下步骤来手写实现 `Promise.all` 方法:

1. 传入一个 `Promise` 对象数组。
2. 返回一个新的 `Promise` 对象。
3. 创建一个空数组，用于存储每个 `Promise` 对象的结果。
4. 遍历 `Promise` 对象数组，对于每个 `Promise` 对象，将它的结果添加到结果数组中。
5. 如果有一个 `Promise` 对象失败，则将返回的 `Promise` 对象立即拒绝，并返回失败原因。
6. 如果所有的 `Promise` 对象都成功，则返回包含所有结果的数组的 `Promise` 对象。


## 代码实现

根据上述总结的思路，我们进行代码实现。

### 核心源码

```js
Promise.all = function (promises) {
    let results = [];
    let length = promises.length;
    let promiseCount = 0;
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            Promise.resolve(promises[i]).then(res => {
                results[i] = res;
                promiseCount++;

                if (promiseCount === length) {
                    resolve(results);
                }
            }, err => {
                reject(err);
            })
        }
    })
}
```

### 使用示例

以下是使用手写的 `Promise.all` 方法的示例:

```js
let promise1 = Promise.resolve(1);
let promise2 = Promise.resolve(2);
let promise3 = Promise.resolve(3);

promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // [1, 2, 3]
  })
  .catch(reason => {
    console.log(reason);
  });
```

## 总结

在本篇博客中，我们首先介绍了`Promise.all`方法的使用场景，根据使用场景写了`demo`示例体验了一下原生的`Promise.all`，然后根据使用体验，分析了其实现原理，总结了手写实现的思路，最终我们手写实现了 `Promise.all` 方法，实现了该方法的核心思想，并提供了使用示例。

手写实现一些核心的 `JavaScript` 方法可以帮助我们更好地理解这些方法的原理和工作方式，同时也可以提高我们的编程技能和代码能力。

手写实现Promise.all

> Web3是一个术语，用于描述下一代互联网技术，它将区块链技术、加密货币和去中心化的应用程序结合在一起，旨在重新构思互联网的基本架构和用户交互方式。Web3的核心理念是去中心化和自治，即用户可以拥有和控制自己的数据、身份和资产，而不依赖于中心化的平台或中介。





## Web3和Web2的区别

要理解`Web3`是什么，我们首先要回顾一下`Web2`是什么。`Web2`是指当前主流的互联网模式，它以社交网络、移动设备和搜索引擎为代表，提供了丰富的内容、服务和交互。`Web2`的特点包括：

- 用户生成内容（`UGC`）。用户可以在各种平台上创建、分享和消费各种形式的内容，如文字、图片、视频、音乐等。
- 平台垄断。大型的互联网公司通过提供免费或低价的服务，吸引了大量的用户和流量，形成了巨大的网络效应和规模经济，从而垄断了市场和数据。
- 数据中心化。用户的数据被存储在平台方的服务器上，平台方可以随意使用、分析、出售或泄露用户的数据，而用户无法控制或追溯自己的数据。
- 信任危机。由于平台方的利益驱动、算法操纵、信息过滤、审查制度等，用户对平台方提供的内容和服务的真实性、可靠性和安全性越来越缺乏信任。


`Web3`则试图通过区块链技术来解决`Web2`存在的问题，实现一个更加开放、透明、公平和民主的互联网。`Web3`的特点包括：

- 数据去中心化。用户的数据被加密并分布式地存储在区块链网络上，不受任何中心化机构或个人的控制或干预。用户可以自主地管理和使用自己的数据，也可以选择与他人共享或交换数据。
- 身份自主。用户可以通过加密货币钱包或去中心化身份协议（`DID`）来生成和验证自己的数字身份，而不需要依赖于第三方提供的账号或密码。用户可以根据不同的场景和需求，灵活地控制自己身份信息的披露程度。
- 资产可编程。用户可以通过智能合约来创建和交易各种数字资产，如加密货币、非同质化代币（`NFT`）、去中心化金融（`DeFi`）产品等。智能合约是一种运行在区块链上的自执行程序，它可以保证合约条款的严格执行，无需信任或监督。
- 应用可组合。用户可以在去中心化应用（`DApp`）上享受各种服务和功能，如社交、娱乐、教育、游戏等。`DApp`是一种基于区块链技术开发和运行的应用程序，它不受任何中心化实体的控制或审查，也不会收集或出售用户的数据。`DApp`之间可以通过开放的协议和标准实现互操作性和组合性，形成一个生态系统。

## Web3的发展现状和挑战

`Web3`作为一个概念，最早是由以太坊联合创始人、`Polkadot`创始人`Gavin Wood`在2014年提出的。他认为，`Web3`是一个完全去中心化的网络平台，它可以让用户在不依赖任何中介的情况下，直接进行点对点的价值交换。

目前，`Web3`的发展还处于初级阶段，但已经有了一些令人瞩目的进展和成果。例如：

- 以太坊。以太坊是目前最大和最活跃的区块链平台，它支持了数千个`DApp`和数百万个用户，涵盖了`DeFi`、`NFT`、游戏、社交等各个领域。以太坊也在不断地进行技术升级和创新，以提高其性能、安全性和可扩展性。
- `Polkadot`。`Polkadot`是一个跨链网络，它可以连接不同的区块链，并实现数据和资产的互通。`Polkadot`采用了一种创新的分层架构，将网络安全和共识从各个区块链中分离出来，从而提高了效率和灵活性。
- `IPFS`。`IPFS`是一个分布式的文件存储系统，它可以将文件切分成多个块，并将它们存储在网络上的不同节点上。`IPFS`使用了一种基于内容的寻址机制，可以根据文件的哈希值来定位和获取文件，而不依赖于中心化的服务器或域名。
- `Filecoin`。`Filecoin`是一个基于IPFS的去中心化存储市场，它可以让用户通过加密货币来购买或出售存储空间。`Filecoin`使用了一种叫做证明存储（Proof-of-Storage）的共识机制，可以激励存储提供者提供高质量和可靠的服务。

`Web3`虽然有着巨大的潜力和前景，但也面临着一些挑战和困难。例如：

- 技术复杂性。`Web3`涉及到很多新的技术和概念，如区块链、加密货币、智能合约、去中心化身份等，这些技术对于普通用户来说可能很难理解和使用。同时，`Web3`也需要更多的开发者和工具来构建和维护应用程序。
- 用户体验。`Web3`目前还没有达到与`Web2`相当甚至超越的用户体验水平，如速度、稳定性、易用性等。用户在使用`Web3`时可能会遇到各种问题和困难，如高昂的交易费用、网络拥堵、私钥丢失、钓鱼攻击等。
- 法律监管。`Web3`由于其去中心化和跨境的特性，可能会与现有的法律法规发生冲突或不适应。不同国家和地区对于加密货币和区块链技术的态度和规定可能会有所差异，这可能会对`Web3`的发展产生正面或负面的影响。

## Web3的未来展望

`Web3`是一个充满了变革和创新的领域，它正在逐步地改变互联网的基本架构和用户交互方式。`Web3`的愿景是实现一个更加开放、透明、公平和民主的互联网，让用户拥有和控制自己的数据、身份和资产，享受更多的自由和选择。

`Web3`的发展也将带来一系列的社会、经济和文化的影响和机遇。例如：

- `Web3`将促进创新和创业。`Web3`提供了一个去中心化和开放的平台，让任何人都可以创建和部署自己的应用程序，无需获得中心化机构的许可或支付高昂的费用。`Web3`也激励了用户参与和贡献，让他们可以通过代币或其他激励机制获得应用程序的收益或治理权。这将激发更多的创新和创业精神，促进互联网生态系统的多样性和活力。
- `Web3`将提升隐私和安全。`Web3`通过加密技术保护了用户的数据和身份，让用户可以自主地管理和使用自己的数据，而不受任何中心化机构或个人的监控或干预。`Web3`也通过分布式网络提高了系统的安全性，让应用程序可以抵抗攻击或故障，保证服务的可用性和可靠性。
- `Web3`将促进社会和经济的公正。`Web3`通过去中心化和自治的方式，打破了传统互联网上存在的垄断和不平等，让用户可以直接进行点对点的价值交换，无需依赖于中介或平台。`Web3`也通过开放和透明的方式，保证了信息和资源的公开和共享，让用户可以参与到应用程序的决策和治理中，实现更多的民主和参与。
- `Web3`将拓展文化和艺术的表达。`Web3`通过`NFT`等技术，赋予了数字内容以唯一性和稀缺性，让创作者可以更好地保护和证明自己的版权，也让消费者可以更好地欣赏和收藏数字艺术品。`Web3`也通过元宇宙等概念，提供了一个更加沉浸式和丰富多彩的虚拟世界，让用户可以自由地创造和体验各种文化和艺术形式。

总之，`Web3`是一个充满了可能性和挑战的领域，它将引领我们进入一个全新的互联网时代。我们需要关注并参与到`Web3`的发展中，以期能够共同打造一个更好的网络世界。


> （声明：请读者严格遵守所在地法律法规，本文不代表任何投资建议）

Web3：下一代互联网的愿景

> 在`React`中，为了提高性能，跨浏览器兼容性和开发体验，`React`实现了一套自己的事件机制，利用事件委托和合成事件的方式统一管理事件订阅和分发。
> 
> 为了让组件能够响应用户的交互行为，`React`提供了一系列的事件处理器，让开发者可以在组件上绑定相应的函数来处理不同类型的事件。






## 什么是事件处理器

事件处理器（`event handler`）是一种函数，它可以在某些事件发生时被调用，例如用户点击了一个按钮，或者输入了一些内容。事件处理器可以让我们在组件中响应用户的交互行为，实现一些功能或逻辑。

## React中的事件处理器

`React`中的事件处理器和`DOM`元素的事件处理器类似，但有一些语法上的不同：

- `React`中的事件处理器的命名采用驼峰式写法，而不是全小写，例如`onClick`而不是`onclick`。
- `React`中的事件处理器需要传入一个函数作为参数，而不是一个字符串，例如`onClick={handleClick}`而不是`onClick=“handleClick()”`。
- `React`中的事件对象是合成事件`（SyntheticEvent）`，它是对原生事件对象的封装，提供了与浏览器无关的接口，并且在事件回调函数被调用后会自动回收。


React中有很多种类的事件处理器，它们可以分为以下几类：

- 剪贴板事件：如`onCopy`、`onCut`、`onPaste`等，用于处理用户复制、剪切和粘贴的操作。
- 键盘事件：如`onKeyDown`、`onKeyPress`、`onKeyUp`等，用于处理用户按下、按住和松开键盘的操作。
- 焦点事件：如`onFocus`、`onBlur`等，用于处理元素获取或失去焦点的操作。
- 表单事件：如`onChange`、`onInput`、`onSubmit`等，用于处理表单元素的输入和提交的操作。
- 鼠标事件：如`onClick`、`onDoubleClick`、`onMouseEnter`等，用于处理用户点击、双击和移动鼠标的操作。
- 指针事件：如`onPointerDown`、`onPointerMove`、`onPointerUp`等，用于处理用户使用触摸屏或触控笔的操作。
- 滚动事件：如`onScroll`，用于处理元素滚动的操作。
- 触摸事件：如`onTouchStart`、`onTouchMove`、`onTouchEnd`等，用于处理用户使用触摸屏的操作。
- UI事件：如`onLoad`、`onError`等，用于处理元素加载或出错的操作。
- 滑轮事件：如`onWheel`，用于处理用户使用鼠标滑轮的操作。

## React中使用事件处理器

要使用`React`中的事件处理器，我们需要在组件上绑定相应的函数作为参数。例如，如果我们想要在用户点击一个按钮时打印一条消息，我们可以这样写：

```js
import React from 'react';

// 定义一个函数作为事件处理器
function handleClick() {
  console.log('You clicked the button!');
}

// 定义一个函数式组件
function Button() {
  return (
    // 在按钮上绑定onClick事件处理器，并传入handleClick函数
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

```

注意，在函数式组件中定义的事件处理器，默认是会绑定`this`的。如果我们想要在事件处理器中访问组件的属性`（props）`，我们可以直接使用`props`参数。例如：

```js
import React from 'react';

// 定义一个函数作为事件处理器
function handleClick(color) {
  console.log('You clicked the button with color ' + color);
}

// 定义一个函数式组件，并接收props参数
function Button(props) {
  return (
    // 在按钮上绑定onClick事件处理器，并传入props.color作为参数
    <button onClick={() => handleClick(props.color)}>
      Click me
    </button>
  );
}
```

如果我们不想使用箭头函数，我们还可以使用以下方式：

使用`bind`方法，在事件处理器中预设参数。例如，如果我们想要在用户点击按钮时传入按钮的颜色，我们可以这样写：

```js
import React from 'react';

// 定义一个函数作为事件处理器
function handleClick(color) {
  console.log('You clicked the button with color ' + color);
}

// 定义一个函数式组件，并接收props参数
function Button(props) {
  return (
    // 使用bind方法，在事件处理器中预设参数
    <button onClick={handleClick.bind(null, props.color)}>
      Click me
    </button>
  );
}

```

注意，使用`bind`方法时，事件对象`event`要放在最后一个参数的位置。例如：

```js
import React from 'react';

// 定义一个函数作为事件处理器
function handleClick(color, e) {
  // 阻止默认行为
  e.preventDefault();
  console.log('You clicked the button with color ' + color);
}

// 定义一个函数式组件，并接收props参数
function Button(props) {
  return (
    // 使用bind方法，在事件处理器中预设参数，并将事件对象e放在最后
    <button onClick={handleClick.bind(null, props.color)}>
      Click me
    </button>
  );
}

```


## 总结

`React`中的事件处理器是一种让组件能够响应用户交互行为的函数。`React`中的事件处理器有以下特点：

- 命名采用驼峰式写法，需要传入一个函数作为参数。
- 使用合成事件对象来封装原生事件对象，并提供跨浏览器的接口。
- 在函数式组件中可以直接绑定`this`或使用`props`参数来访问组件的属性。
- 可以使用箭头函数或`bind`方法来向事件处理器传递额外的参数。

React中事件处理器的基本使用

在 `JavaScript` 中，`Promise` 是一种用于处理异步操作的对象，它可以让异步代码更易于理解和管理。在本文中，我们将手写实现一个 `Promise`对象实现其`resolve`、`reject`、`then`和`catch`方法。





## Promise 的基本概念

在介绍 `Promise` 的实现方法之前，让我们先回顾一下 `Promise` 的基本概念。
`Promise` 有三种状态：

- **`Pending`（进行中）**：初始状态，表示 `Promise` 实例正在进行中。
- **`Fulfilled`（已完成）**：表示异步操作已经完成，并且 `Promise` 实例已经获得了一个值。
- **`Rejected`（已失败）**：表示异步操作已经失败，并且 `Promise` 实例已经获得了一个失败原因。

当 `Promise` 实例从 `Pending` 状态转变为 `Fulfilled` 或者 `Rejected` 状态时，我们称之为 `Promise` 已经 `settled`(已敲定)。

## Promise 的源码实现

我们将使用 `ES6` 的类来实现一个 `Promise`。`Promise` 类需要具备以下功能：

- 接受一个 `executor` 函数作为参数，该函数将在 `Promise` 实例创建时立即执行，并传递两个回调函数，即 `resolve` 和 `reject` 函数。
- 在 `executor` 函数内部，我们需要处理异步操作，如果操作成功，则使用 `resolve` 函数返回结果；如果操作失败，则使用 `reject` 函数返回错误信息。
- `Promise` 实例需要提供 `then` 方法，该方法接受两个回调函数，即 `onFulfilled` 和 `onRejected`，分别在 `Promise` 转变为 `Fulfilled` 或者 `Rejected` 状态时执行。
- 如果在 `executor` 函数执行过程中发生错误，`Promise` 实例应该转变为 `Rejected` 状态，并且使用 `reject` 函数返回错误信息。
- `Promise` 实例可以链式调用 `then` 方法，每个 `then` 方法可以返回一个新的 `Promise` 实例，实现 `Promise` 链。
- `Promise` 实例需要提供 `catch` 方法，用于捕获 `promise` 对象的拒绝状态`rejected`的回调函数，它同样支持链式调用。



下面是我们的 `Promise` 类的基本实现：

```javascript
class Promise {
    static Pending = "Pending";
    static Fulfilled = "Fulfilled";
    static Rejected = "Rejected";

    constructor(executor) {
        this.status = Promise.Pending;
        this.value = null;
        this.reason = null;
        this.onFulfilledCallbacks = [];
        this.onRejectedCallbacks = [];


        try {
            executor(this.resolve.bind(this), this.reject.bind(this));
        } catch (error) {
            reject(error);
        }
    }

    resolve(value) {
        if (this.status === Promise.Pending) {
            this.status = Promise.Fulfilled;
            this.value = value;
            this.onFulfilledCallbacks.forEach((callback) => {
                callback(this.value);
            });
        }
    }

    reject(reason) {
        if (this.status === Promise.Pending) {
            this.status = Promise.Rejected;
            this.reason = reason;
            this.onRejectedCallbacks.forEach((callback) => {
                callback(this.reason);
            });
        }
    }

    then(onFulfilled, onRejected) {
        return new Promise((resolve, reject) => {
            if (this.status === Promise.Fulfilled) {
                setTimeout(() => {
                    try {
                        const result = onFulfilled(this.value);
                        resolve(result);
                    } catch (error) {
                        reject(error);
                    }
                });
            }

            if (this.status === Promise.Rejected) {
                setTimeout(() => {
                    try {
                        const result = onRejected(this.reason);
                        resolve(result);
                    } catch (error) {
                        reject(error);
                    }
                });
            }

            if (this.status === Promise.Pending) {
                this.onFulfilledCallbacks.push((value) => {
                    setTimeout(() => {
                        try {
                            const result = onFulfilled(value);
                            resolve(result);
                        } catch (error) {
                            reject(error);
                        }
                    });
                });
                this.onRejectedCallbacks.push((reason) => {
                    setTimeout(() => {
                        try {
                            const result = onRejected(reason);
                            resolve(result);
                        } catch (error) {
                            reject(error);
                        }
                    }, 0);
                });
            }
        });
    }

    catch(onRejected) {
        return this.then(null, onRejected);
    }
}
```

## Promise的实现过程解析

我们先创建了一个 `Promise` 类，其中包含了 `Promise` 的基本属性和方法。在构造函数中，我们定义了 `status`、`value`、`reason` 三个变量用于保存 Promise 的状态和值，以及 `onFulfilledCallbacks` 和 `onRejectedCallbacks` 两个数组用于保存 `then` 方法中传入的回调函数。

在随后的 `try-catch` 语句中，我们调用了 `executor` 函数，并将之后实现的 `resolve` 和 `reject` 函数传入，以便在异步操作完成后调。

需要注意的是，我们需要通过`this.xxx.bind(this)`的方法来传入`resolve`和`reject`函数，否则在这两个函数内无法访问到当前类的任何东西，这是一个`JavaScript`中的`this`指向问题，你可以从`resolve`和`reject`函数在实际应用中的调用过程来思考这个问题。 

然后，我们实现了 `resolve` 和 `reject` 两个函数，分别用于处理 `Promise` 的 `Fulfilled` 和 `Rejected` 状态。

接下来，我们实现了 `then` 函数。当 `Promise` 的状态为 `Fulfilled` 时，我们使用 `setTimeout` 函数将 `onFulfilled` 回调函数放入微任务队列中，以确保在本轮事件循环结束后执行。同样的，当 `Promise` 的状态为 `Rejected` 时，我们使用 `setTimeout` 函数将 `onRejected` 回调函数放入微任务队列中。

 当 `Promise` 的状态为 `Pending` 时，我们将 `onFulfilled` 和 `onRejected` 回调函数保存到 `onFulfilledCallbacks` 和 `onRejectedCallbacks` 数组中，并在异步操作完成后执行。 
 
然后，我们返回一个新的 `Promise` 实例，该实例包含了一个 `executor` 函数。在 `executor` 函数中，我们根据当前 `Promise` 的状态决定调用 `onFulfilled` 或 `onRejected` 回调函数，并将执行结果传递给 `resolve` 或 `reject` 函数。

最后，我们实现了`catch`函数，`Promise`中的`catch`方法是用于捕获`promise`对象的拒绝状态`（rejected）`的回调函数，它相当于调用`then`方法时传入一个`undefined`作为第一个参数，而将回调函数作为第二个参数。


## 使用手写Promise

现在，我们可以使用手写的 `Promise` 类来处理异步操作了。下面是一个简单的例子：

```javascript
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise
  .then((result) => {
    console.log(result);
    return 'Goodbye, world!';
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });
```

在这个例子中，我们创建了一个 `Promise` 实例，并在 1 秒钟后将状态设置为 `Fulfilled`，并返回一个字符串。

然后，我们链式调用了两个 `then` 方法，第一个方法打印了字符串并返回了一个新的字符串，第二个方法又打印了新的字符串。

最后，我们调用了 `catch` 方法，以处理任何可能发生的错误。

## 结论

`Promise` 是一种非常强大的异步编程技术，可以使我们更加轻松地管理异步代码。通过手写实现 `Promise`，我们可以更好地理解 `Promise` 的工作原理，并更加深入地了解 `JavaScript` 的异步编程模型。

手写实现Promise

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！