【JS Promise 及手写J简单Promise】

**JS Promise 及手写一个简单的Promise**

### 前言在 JavaScript 中，异步编程是非常常见的一种需求。例如，我们可能需要从服务器获取数据、执行一些耗时的操作等。在这些场景中，使用回调函数来处理结果是很容易实现的。但是，当我们需要处理多个异步操作时，这种方式就变得非常复杂和难以维护。

为了解决这个问题，JavaScript 提供了一个称为 Promise 的 API。Promise 是一种用于表示异步操作最终结果的对象。它允许我们将回调函数注册到 Promise 上，从而在异步操作完成后执行这些回调函数。

### Promise 基础下面是 Promise 的基本结构：

javascriptclass Promise {
 constructor(executor) {
 // executor 是一个函数，用于定义异步操作 this.state = 'pending'; // 初始状态为 pending this.value = undefined; // 最终结果 this.reason = undefined; // 异常信息 // resolve 和 reject 是两个函数，用于将最终结果或异常传递给回调函数 let self = this;
 executor(function(resolve) {
 // 将 resolve 函数传递给 executor self.resolve = function(value) {
 if (self.state === 'pending') {
 self.value = value;
 self.state = 'resolved';
 self.onResolved();
 }
 };
 }, function(reason) {
 // 将 reject 函数传递给 executor self.reject = function(reason) {
 if (self.state === 'pending') {
 self.reason = reason;
 self.state = 'rejected';
 self.onRejected();
 }
 };
 });
 }

 then(onResolved, onRejected) {
 // 如果状态为 resolved，则执行 onResolved 回调函数 if (this.state === 'resolved') {
 return Promise.resolve(onResolved(this.value));
 } else if (this.state === 'rejected') {
 // 如果状态为 rejected，则执行 onRejected 回调函数 return Promise.reject(onRejected(this.reason));
 }

 // 如果状态为 pending，则将回调函数注册到 promise 上 let self = this;
 return new Promise(function(resolve, reject) {
 function handle(value) {
 try {
 let x = onResolved ? onResolved(value) : value;
 resolve(x);
 } catch (e) {
 reject(e);
 }
 }

 function handleError(reason) {
 try {
 let x = onRejected ? onRejected(reason) : reason;
 resolve(x);
 } catch (e) {
 reject(e);
 }
 }

 self.onResolved = handle.bind(null, self.value);
 self.onRejected = handleError.bind(null, self.reason);

 // 如果状态为 resolved 或 rejected，则执行对应的回调函数 if (self.state === 'resolved') {
 self.onResolved();
 } else if (self.state === 'rejected') {
 self.onRejected();
 }
 });
 }

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

 static resolve(value) {
 return new Promise(function(resolve) {
 resolve(value);
 });
 }

 static reject(reason) {
 return new Promise(function(reject) {
 reject(reason);
 });
 }
}

### 使用示例

javascript// 创建一个 promise 对象let p = new Promise((resolve, reject) => {
 // 模拟异步操作 setTimeout(() => {
 resolve('Hello World!');
 },2000);
});

// 使用 then 方法注册回调函数p.then((value) => {
 console.log(value); // Hello World!
}).catch((error) => {
 console.error(error);
});

### Promise.all()

Promise.all() 是一个用于处理多个 promise 对象的方法。它会等待所有 promise 对象完成后，才将最终结果传递给回调函数。

javascript// 创建多个 promise 对象let p1 = new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('Hello World!');
 },2000);
});

let p2 = new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('Hi Earth!');
 },3000);
});

// 使用 Promise.all() 方法Promise.all([p1, p2]).then((values) => {
 console.log(values); // ['Hello World!', 'Hi Earth!']
}).catch((error) => {
 console.error(error);
});

### Promise.race()

Promise.race() 是一个用于处理多个 promise 对象的方法。它会等待第一个 promise 对象完成后，才将最终结果传递给回调函数。

javascript// 创建多个 promise 对象let p1 = new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('Hello World!');
 },2000);
});

let p2 = new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('Hi Earth!');
 },3000);
});

// 使用 Promise.race() 方法Promise.race([p1, p2]).then((value) => {
 console.log(value); // 'Hello World!'
}).catch((error) => {
 console.error(error);
});

### 总结在本文中，我们学习了 JavaScript 中的 Promise API，以及如何手写一个简单的 Promise 对象。Promise 是一种用于表示异步操作最终结果的对象，它允许我们将回调函数注册到 Promise 上，从而在异步操作完成后执行这些回调函数。

我们还学习了 Promise.all() 和 Promise.race() 方法，这些方法用于处理多个 promise 对象。Promise.all() 会等待所有 promise 对象完成后，才将最终结果传递给回调函数，而 Promise.race() 会等待第一个 promise 对象完成后，才将最终结果传递给回调函数。

通过学习这些概念和方法，我们可以更好地理解 JavaScript 中的异步编程，并且能够使用 Promise API 来处理复杂的异步操作。