> 在互联网中，有一种特殊的网络服务，叫做代理（`Proxy`），也称网络代理。它是指一个网络终端（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。代理可以起到中介的作用，实现不同的目的和功能。根据代理的方向和对象，可以分为正向代理和反向代理两种模式。本文将介绍这两种模式的区别和应用，并给出一些常见的实现方式和代码示例。




在学习正向代理和反向代理之前，要先了解什么是代理？

## 代理

你可以把代理想象成一个中间人，它可以帮助你和别人进行沟通。

比如，你想和一个外国人聊天，但是你不会说外语，那么你就可以找一个会说外语的翻译来做你的代理，让他把你想说的话翻译给对方听，然后再把对方说的话翻译给你听。

这样，你就可以和外国人聊天了，而且对方也不知道你是谁，只知道你的代理是谁。

在互联网中，代理也是类似的作用。比如，你想访问一个网站，但是这个网站不让你进，或者进去了也很慢，那么你就可以找一个能访问这个网站的代理服务器来帮你。

你把你想访问的网址告诉代理服务器，然后代理服务器去访问这个网站，并把网站的内容传回给你。这样，你就可以看到这个网站了，而且这个网站也不知道你是谁，只知道代理服务器是谁。

下面是一个互联网中使用代理的示例图：

![image.png](https://creatorblog.cn/static/img/025f881a7a94096c6931b67b510ef2aa.image.webp)


正向代理和反向代理是两种常见的代理模式，它们都可以在客户端和服务器之间起到中介的作用，但是它们的目的和实现方式有所不同。


## 正向代理

正向代理是指客户端通过代理服务器来访问目标服务器，代理服务器对客户端是透明的，目标服务器对客户端是不可见的。

正向代理的作用有：

- 突破网络限制，访问被屏蔽或者无法直接访问的资源，例如翻墙。
- 提高访问速度，代理服务器可以缓存客户端经常访问的资源，减少网络延迟和带宽消耗。
- 隐藏客户端真实身份，提高安全性和隐私性，例如使用匿名代理。

正向代理的实现方式有：

- 配置浏览器或者操作系统的代理设置，指定代理服务器的地址和端口，例如使用socks5协议。
- 使用专门的代理软件或者服务，例如VPN、Shadowsocks、V2Ray等。
- 使用专门的反向代理软件或者服务，例如Nginx、Apache、HAProxy等。


正向代理的示意图如下：


![image.png](https://creatorblog.cn/static/img/b4cb42ecdbbad4b08de923d8f1af7c0e.image.webp)

正向代理的代码示例（使用`node.js`）：

```js
// 引入http模块
const http = require('http');

// 创建一个正向代理服务器
const proxy = http.createServer((req, res) => {
  // 解析客户端请求的目标地址
  const targetUrl = new URL(req.url);

  // 创建一个目标请求选项对象
  const options = {
    hostname: targetUrl.hostname,
    port: targetUrl.port || 80,
    path: targetUrl.pathname,
    method: req.method,
    headers: req.headers
  };

  // 向目标服务器发起请求
  const targetReq = http.request(options, (targetRes) => {
    // 将目标服务器的响应头复制给客户端
    res.writeHead(targetRes.statusCode, targetRes.headers);

    // 将目标服务器的响应数据转发给客户端
    targetRes.pipe(res);
  });

  // 监听目标请求的错误事件
  targetReq.on('error', (err) => {
    // 返回一个500错误给客户端
    res.writeHead(500);
    res.end(err.message);
  });

  // 将客户端的请求数据转发给目标服务器
  req.pipe(targetReq);
});

// 监听8080端口
proxy.listen(8080, () => {
  console.log('正向代理服务器启动在8080端口');
});
```

## 反向代理

反向代理是指客户端通过代理服务器来访问目标服务器，代理服务器对客户端是不透明的，目标服务器对客户端是可见的。

反向代理的作用有：

- 实现负载均衡，根据不同的规则将客户端的请求分发到不同的后端服务器，提高系统性能和可用性。
- 实现缓存和压缩，代理服务器可以缓存后端服务器的静态资源，减少后端服务器的压力，同时可以对资源进行压缩，提高传输效率。
- 实现安全防护，代理服务器可以过滤掉恶意的请求，防止攻击和篡改，同时可以对请求和响应进行加密，提高安全性。


反向代理的实现方式有：

- 使用专门的反向代理软件或者服务，例如Nginx、Apache、HAProxy等。
- 使用编程语言或者框架提供的反向代理功能，例如node.js、express、koa等。

反向代理的示意图如下：

![image.png](https://creatorblog.cn/static/img/6af26dd4c2835235e6a4786b66de18ee.image.webp)


反向代理的代码示例（使用`node.js`和`express`）：

```js
// 引入express模块
const express = require('express');

// 引入http-proxy-middleware模块
const { createProxyMiddleware } = require('http-proxy-middleware');

// 创建一个反向代理服务器
const proxy = express();

// 定义一个后端服务器列表
const servers = [
  'http://localhost:3000',
  'http://localhost:3001',
  'http://localhost:3002'
];

// 定义一个负载均衡策略，轮询法
let i = 0;
const balance = () => {
  const target = servers[i];
  i = (i + 1) % servers.length;
  return target;
};

// 使用中间件将所有请求转发到后端服务器
proxy.use('/', createProxyMiddleware({
  target: balance, // 动态获取目标地址
  changeOrigin: true, // 修改请求头中的host为目标地址的host
}));

// 监听8080端口
proxy.listen(8080, () => {
  console.log('反向代理服务器启动在8080端口');
});
```

## 总结

正向代理和反向代理都是代理模式的一种，它们的区别在于：

- 正向代理是客户端主动使用的，反向代理是服务器端主动使用的。
- 正向代理对客户端是透明的，反向代理对客户端是不透明的。
- 正向代理可以隐藏客户端的真实身份，反向代理可以隐藏服务器的真实身份。
- 正向代理主要用于突破网络限制和提高访问速度，反向代理主要用于实现负载均衡和安全防护。

希望这篇博文能够帮助你了解代理服务器的两种模式：正向代理和反向代理，并学会一些常见的实现方式和代码示例。

如何用Nodejs实现正向代理和反向代理

> `JavaScript`是一种基于原型的语言，它没有类的概念，而是通过原型对象来实现对象之间的继承和共享属性和方法。本文将介绍`JS`中的原型和继承的基本概念和用法，以及如何通过构造函数和`new`操作符来创建一类具有相同结构和行为的对象，并通过设置一个对象的原型对象来实现子类继承父类的功能。如果你想了解`JS`中的原型和继承是如何工作的，以及如何利用它们来编写更优雅和高效的代码，那么本文值得一读。




`JavaScript`是一种基于原型的语言，这意味着它没有类的概念，而是通过原型对象来实现对象之间的继承和共享属性。本文将介绍`JS`中的原型和继承的基本概念和用法。

## 原型

原型是一个对象，它可以作为其他对象的模板，提供一些共有的属性和方法。在`JS`中，每个对象都有一个内部属性`[[Prototype]]`，它指向该对象的原型对象。我们可以通过`Object.getPrototypeOf(obj)`或者`obj.__proto__`（不推荐）来获取一个对象的原型对象。

例如，我们创建一个普通对象`obj`，它的原型对象就是`Object.prototype`，这是所有对象的默认原型对象。

```js
let obj = {name: "Alice", age: 20};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // true
console.log(obj.__proto__ === Object.prototype); // true
```

我们也可以通过`Object.create(proto)`来创建一个以指定对象为原型的新对象。例如，我们创建一个以`obj`为原型的新对象`obj2`。

```js
let obj2 = Object.create(obj);
console.log(Object.getPrototypeOf(obj2) === obj); // true
console.log(obj2.__proto__ === obj); // true
```

我们可以通过原型链来访问一个对象的属性和方法。原型链是一系列的原型对象，从当前对象开始，一直到`Object.prototype`结束（`Object.prototype`的原型是`null`）。当我们访问一个对象的某个属性或方法时，`JS`会先在当前对象上查找，如果找不到，就会沿着原型链向上查找，直到找到或者到达原型链的末端。

例如，我们访问`obj2.name`时，`JS`会先在`obj2`上查找，发现没有这个属性，就会沿着原型链向上查找，在`obj`上找到了这个属性，并返回其值。

```js
console.log(obj2.name); // Alice
```

我们也可以通过修改一个对象的原型来改变其继承的属性和方法。例如，我们给`obj`添加一个新的属性`gender`，那么所有以`obj`为原型的对象都会继承这个属性。

```js
obj.gender = "female";
console.log(obj2.gender); // female
```

但是，如果我们给一个对象添加或修改一个与其原型同名的属性或方法，那么就会在该对象上创建一个自有的属性或方法，覆盖掉原型上的同名属性或方法。例如，我们给`obj2`添加一个新的属性`name`，那么就会在`obj2`上创建一个自有的属性`name`，覆盖掉原型上的同名属性。

```js
obj2.name = "Bob";
console.log(obj2.name); // Bob
console.log(obj.name); // Alice
```

## 继承

继承是一种实现代码复用和抽象化的机制，在`JS`中，我们可以通过原型来实现继承。我们可以通过构造函数和`new`操作符来创建具有相同结构和行为的一类对象，并通过修改构造函数的`prototype`属性来指定这类对象共享的原型对象。

例如，我们定义一个构造函数`Person`，用来创建具有`name`和`age`属性和`sayHello`方法的人类对象，并给`Person.prototype`添加这些属性和方法。


```js
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name);
};
```

然后我们用`new`操作符来创建两个`Person`实例`p1`和`p2`，并调用它们的`sayHello`方法。

```js
let p1 = new Person("Alice", 20);
let p2 = new Person("Bob", 21);
p1.sayHello(); // Hello, I'm Alice
p2.sayHello(); // Hello, I'm Bob
```

我们可以看到，`p1`和`p2`都有自有的`name`和`age`属性，但是它们共享同一个`sayHello`方法，这个方法是定义在`Person.prototype`上的。我们也可以看到，`p1`和`p2`的原型对象都是`Person.prototype`。

```js
console.log(p1.sayHello === p2.sayHello); // true
console.log(p1.sayHello === Person.prototype.sayHello); // true
console.log(Object.getPrototypeOf(p1) === Person.prototype); // true
console.log(Object.getPrototypeOf(p2) === Person.prototype); // true
```

我们也可以通过修改`Person.prototype`来改变所有`Person`实例共享的属性和方法。例如，我们给`Person.prototype`添加一个新的属性`gender`，并给`sayHello`方法添加一句话。


```js
Person.prototype.gender = "unknown";
Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name + ", and my gender is " + this.gender);
};
```

然后我们再次调用`p1`和`p2`的`sayHello`方法，可以看到输出结果发生了变化。

```js
p1.sayHello(); // Hello, I'm Alice, and my gender is unknown
p2.sayHello(); // Hello, I'm Bob, and my gender is unknown
```

我们也可以通过原型来实现子类继承父类的功能。我们可以通过`Object.create(proto)`或者`Object.setPrototypeOf(obj, proto)`来设置一个对象的原型对象。例如，我们定义一个构造函数`Student`，用来创建具有`name`，`age`和`score`属性的学生类对象，并让`Student.prototype`继承自`Person.prototype`。

```js
function Student(name, age, score) {
  Person.call(this, name, age); // 调用父类构造函数，继承父类属性
  this.score = score; // 添加子类属性
}

Student.prototype = Object.create(Person.prototype); // 设置子类原型为父类原型的副本，继承父类方法
Student.prototype.constructor = Student; // 修复子类构造函数指向
```

然后我们用`new`操作符来创建一个`Student`实例`s`，并调用它的`sayHello`方法。

```js
let s = new Student("Charlie", 22, 90);
s.sayHello(); // Hello, I'm Charlie, and my gender is unknown
```

我们可以看到，`s`继承了`Person`类的`name`，`age`和`gender`属性和`sayHello`方法，同时也有自有的`score`属性。我们也可以看到，`s`的原型对象是`Student.prototype`，而`Student.prototype`的原型对象是`Person.prototype`，形成了一个原型链。

```js
console.log(s.name); // Charlie
console.log(s.age); // 22
console.log(s.gender); // unknown
console.log(s.score); // 90
console.log(Object.getPrototypeOf(s) === Student.prototype); // true
console.log(Object.getPrototypeOf(Student.prototype) === Person.prototype); // true
```

我们也可以通过修改`Student.prototype`来给子类添加或覆盖父类的属性和方法。例如，我们给`Student.prototype`添加一个新的方法`study`，并覆盖父类的`sayHello`方法。

```js
Student.prototype.study = function() {
  console.log("I'm studying hard to get a high score.");
};

Student.prototype.sayHello = function() {
  console.log("Hi, I'm " + this.name + ", and my score is " + this.score);
};
```

然后我们再次调用`s`的`sayHello`和`study`方法，可以看到输出结果发生了变化。

```js
s.sayHello(); // Hi, I'm Charlie, and my score is 90
s.study(); // I'm studying hard to get a high score.
```

## 总结

`JS`中的原型和继承是一种基于对象而非类的编程范式，它通过原型对象来实现对象之间的属性和方法的共享和继承。我们可以通过构造函数和`new`操作符来创建一类具有相同结构和行为的对象，并通过修改构造函数的`prototype`属性来指定这类对象共享的原型对象。

我们也可以通过原型链来访问或修改一个对象继承自其原型对象的属性和方法。我们也可以通过设置一个对象的原型对象来实现子类继承父类的功能。这种方式可以实现代码的复用和抽象化，但也要注意避免原型污染和性能损耗的问题。

JS中的原型和继承

> 你真的了解`JavaScript`的函数和方法吗？你知道它们有什么区别吗？你知道它们是如何定义和调用的吗？你知道它们是如何影响`this`值的吗？如果你对这些问题感到迷茫，那么本文就是为你准备的。本文将从基础开始，详细解释函数和方法的概念、特点、用法和联系，让你彻底弄清楚函数和方法的奥秘。




`JavaScript`是一种基于对象的编程语言，它支持两种不同的方式来定义和调用函数：函数和方法。函数和方法都是一段可重用的代码，可以接受一些参数并返回一个值。但是，它们之间有一些重要的区别，本文将介绍这些区别。

## 函数

函数是一种独立的代码块，可以在任何地方定义和调用。函数可以使用`function`关键字或箭头函数的语法来定义。例如：

```js
// 使用function关键字定义一个函数
function add(a, b) {
  return a + b;
}

// 使用箭头函数的语法定义一个函数
const multiply = (a, b) => {
  return a * b;
};
```

函数可以在全局作用域或局部作用域中定义，也可以作为参数传递给其他函数或返回值。函数可以使用`()`运算符来调用，并传递实际参数。例如：

```js
// 在全局作用域中定义一个函数
function sayHello(name) {
  console.log("Hello, " + name);
}

// 在局部作用域中定义一个函数
function factorial(n) {
  if (n <= 1) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

// 将一个函数作为参数传递给另一个函数
function applyFunction(f, x) {
  return f(x);
}

// 将一个函数作为返回值
function createCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

// 调用函数
sayHello("Alice"); // 输出 Hello, Alice
console.log(factorial(5)); // 输出 120
console.log(applyFunction(Math.sqrt, 16)); // 输出 4
let counter = createCounter();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2

```

## 方法

方法是一种特殊的函数，它是定义在一个对象上的属性，并且可以访问该对象的状态和行为。方法可以使用`function`关键字或箭头函数的语法来定义，但是通常使用对象字面量的语法来定义。例如：

```js
// 使用对象字面量的语法定义一个对象，其中包含两个方法
let person = {
  name: "Bob",
  age: 25,
  greet: function () {
    console.log("Hi, I'm " + this.name);
  },
  celebrateBirthday: function () {
    this.age++;
    console.log("Happy birthday, I'm now " + this.age);
  },
};
```

方法可以使用.运算符或`[]`运算符来访问，并使用`()`运算符来调用。方法在调用时，会自动将其所属的对象作为`this`值传递给方法内部，这样方法就可以访问该对象的属性和其他方法。例如：

```js
// 访问和调用方法
person.greet(); // 输出 Hi, I'm Bob
person.celebrateBirthday(); // 输出 Happy birthday, I'm now 26
person["greet"](); // 输出 Hi, I'm Bob
```

## 区别

函数和方法的主要区别在于它们与对象的关系。函数是独立的代码块，不属于任何对象，而方法是属于某个对象的属性，可以访问该对象的状态和行为。因此，方法通常用来表示对象的特征和功能，而函数通常用来表示一般性的逻辑和算法。

另一个区别是它们对`this`值的处理。函数在调用时，`this`值取决于调用方式和运行环境，可能是全局对象、`undefined`、指定的对象或其他值。而方法在调用时，`this`值总是指向其所属的对象，除非使用特殊的方式（如`call`、`apply`、`bind`）来改变它。

总之，函数和方法都是`JavaScript`中的重要概念，它们都可以用来定义和调用可重用的代码，但是它们有一些不同的特点和用法，需要注意区分和理解。

## 总结

本文介绍了`JavaScript`中的函数和方法的概念，以及它们的定义、调用、区别和联系。通过本文，我们可以了解到函数和方法的不同之处在于它们与对象的关系，以及它们对`this`值的处理。这些知识可以帮助我们更好地使用`JavaScript`进行编程，避免一些常见的错误和困惑。

如何正确理解JavaScript中的函数和方法

> 你可能听说过比特币，它是一种数字货币，可以在互联网上进行交易，而不需要通过银行或其他中介机构。比特币的背后有一种技术叫做区块链，它是一种创新的数据记录和传输方式，可以让人们更安全、更高效、更公平地进行各种交易。那么，什么是区块链呢？它是如何工作的呢？它有什么好处和挑战呢？本文将尝试用简单的语言来解释这些问题。





## 区块链是什么

区块链的本质是一个账本，也就是一本记录了所有交易的书。但是，这本账本不是由一家银行或一家公司来管理和控制的，而是由许多参与者共同维护和更新的。

这些参与者可以是个人、组织或机器，他们都有自己的复制品（副本）的账本，并通过互联网相互连接。每当有新的交易发生时，他们都会把交易信息广播给其他参与者，并通过一种共识机制来验证交易的有效性和顺序。如果大多数参与者都同意交易是合法的，那么交易就会被记录在账本上，并且所有参与者都会更新自己的账本。

那么，这个账本是怎么记录交易的呢？它是用一种特殊的数据结构来存储数据的，叫做区块链。顾名思义，区块链就是由许多区块组成的链条。每个区块包含了一批交易数据，以及一个时间戳和一个指向前一个区块的链接。这个链接其实是前一个区块的数字指纹，叫做哈希值，它可以唯一地标识一个区块的内容。通过这样的链接方式，每个区块都与前一个区块紧密相连，形成了一个不可分割的数据链条。如果有人想要修改某个区块的内容，就必须修改后面所有区块的链接，这几乎是不可能做到的，因为需要花费巨大的计算力和时间，并且要获得其他参与者的同意。因此，区块链上的数据具有不可篡改和不可伪造的特性。

## 区块链如何工作

我们已经知道了区块链是什么，那么它是如何工作的呢？我们可以用一个简单的例子来说明。

假设有三个人：小明、小红和小刚，他们想要在互联网上进行数字货币的交易。他们首先需要加入一个区块链网络，也就是一群使用同样规则和协议来维护账本的参与者。他们每个人都会下载并运行一个软件程序，叫做节点，它可以让他们生成自己的数字钱包（用来存储数字货币）、发送和接收交易信息、验证其他节点发来的交易信息、以及更新自己的账本。

假设小明想要给小红转账10个数字货币单位（我们暂且叫它币），他就需要用自己的钱包生成一个交易信息，并用自己的私钥（一串只有自己知道的密码）对交易信息进行签名，以证明这个交易是由他发起的。然后，他把这个交易信息广播给其他节点，让他们知道他想要做什么。

其他节点收到小明的交易信息后，就会对它进行验证，检查它是否符合网络的规则，比如小明是否有足够的余额、交易是否有重复、签名是否有效等。如果验证通过，他们就会把这个交易信息放入一个待处理的交易池中，等待被打包成一个区块。

在区块链网络中，有一些特殊的节点，叫做矿工，它们负责把待处理的交易打包成区块，并添加到区块链上。为了防止任何人随意添加区块，网络规定了一种机制，叫做工作量证明（Proof of Work），它要求矿工在打包区块之前，必须先解决一个数学难题。这个难题很难解决，但很容易验证，而且难度会根据网络的计算能力而调整，以保证大约每10分钟就有一个区块被生成。解决难题的过程就是挖矿的过程，它需要消耗大量的电力和时间。谁先解决了难题，谁就可以打包一个区块，并获得一定数量的数字货币作为奖励。

当一个矿工成功打包了一个区块后，它就会把这个区块广播给其他节点，并且开始挖下一个区块。其他节点收到这个区块后，也会对它进行验证，如果没有问题，就会接受它，并把它添加到自己的账本上。这样，小明给小红转账的交易就被记录在了区块链上，并且所有参与者都有了相同的账本。

当然，在实际的情况中，可能会出现一些问题和异常，比如网络延迟、恶意攻击、分叉等。为了解决这些问题，区块链网络还有一些其他的机制和策略，比如最长链原则、激励机制、分层架构等。但是这些已经超出了本文的范围，有兴趣的读者可以自行查阅相关资料。

## 区块链有什么好处和挑战

区块链作为一种创新的数据记录和传输方式，有许多好处和优势，也面临着一些挑战和限制。以下是一些主要的点：

- 区块链可以提高数据的安全性和可信度。由于区块链上的数据是经过加密、验证和共识的，并且分布在多个节点上，不受任何单一实体或中心化机构的控制和干预，因此很难被篡改或伪造。这对于需要保证数据完整性和真实性的场景非常重要，比如金融、医疗、法律等。
- 区块链可以提高数据的透明度和可追溯性。由于区块链上的数据是公开的，并且记录了每一笔交易的时间和顺序，因此任何人都可以查看和审计数据的历史和状态。这对于需要保证数据公开和公正的场景非常有用，比如政府、慈善、供应链等。
- 区块链可以提高数据的效率和降低成本。


由于区块链可以实现点对点的数据传输，不需要通过中间人或第三方机构来验证和确认交易，因此可以减少交易的时间和复杂性，也可以节省交易的手续费和中介费。这对于需要提高交易速度和降低交易门槛的场景非常有益，比如跨境支付、共享经济、数字身份等。

- 区块链可以提高数据的创新性和多样性。由于区块链可以支持智能合约的编程和执行，智能合约是一种可以自动执行预定规则和逻辑的代码，因此可以实现各种复杂和灵活的数据操作和应用，比如数字资产、去中心化应用、代币经济等。这对于需要提高数据价值和功能的场景非常有潜力，比如版权、教育、娱乐等。

- 区块链也有一些挑战和限制。比如区块链的技术门槛较高，需要专业的知识和技能来开发和维护；区块链的性能和可扩展性受到网络规模、共识机制、数据结构等因素的影响，可能无法满足大规模和高频的数据需求；区块链的监管和法律问题还不明确，可能存在法律风险和道德争议；区块链的社会和文化影响还不清楚，可能引发社会变革和伦理挑战等。

## 总结

区块链是一种新型的数据记录和传输方式，它利用了块链式数据结构、分布式节点共识算法、密码学技术和智能合约技术，来实现数据的安全、透明、高效、创新等特性。

区块链有许多应用场景和价值，也面临着一些挑战和限制。区块链是一种正在不断发展和变化的技术，它可能会给我们的社会和生活带来巨大的影响和变化。我们应该积极地了解和掌握区块链，以便更好地利用它，也更好地适应它。


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

一文通解区块链

> `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

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