终极秘籍曝光：Promise教你一秒成为JavaScript异步编程大师！

概述：本文将全面深入地探讨Promise，包括其前身、历史、能力、优点、缺点以及提供每个方法的案例。我们将对每个案例进行详细的说明和使用场景，并为代码添加注释，帮助读者更好地理解Promise的工作原理和实际应用。最后，我们将总结Promise的关键要点。

1. Promise的前身与历史

Promise的概念起源于JavaScript社区中对异步编程的需求。在Promise被正式纳入JavaScript标准（ES6）之前，开发人员使用了一些类似的模式来处理异步操作，如回调函数、事件和Deferred对象。这些模式在处理复杂异步流程时往往会导致回调地狱（callback hell）和难以维护的代码。为了解决这些问题，Promise被引入到JavaScript中，提供了一种更简洁、可读性更好的方式来处理异步操作。

2. Promise的能力

Promise是一个表示异步操作结果的对象。它具有以下能力：

简化异步编程：Promise提供了一种结构化的方式来处理异步操作，避免了回调地狱的问题。
支持链式调用：Promise的方法可以链式调用，使得异步操作的处理逻辑更加清晰和易于理解。
处理成功和失败：Promise可以处理异步操作的成功和失败情况，让开发人员可以针对不同的结果采取相应的操作。
提供异常捕获：Promise提供了.catch()方法来捕获和处理异步操作中的错误，确保错误能够被及时处理。

3. Promise的优点

Promise的使用具有以下优点：

可读性和可维护性：Promise采用链式调用的方式，使得异步操作的处理逻辑更加清晰和易于理解，代码的可读性和可维护性得到提高。
错误处理：Promise提供了.catch()方法来捕获和处理异步操作中的错误，避免了传统回调函数中错误处理的麻烦。
避免回调地狱：Promise的链式调用使得代码结构更加扁平化，避免了回调地狱的问题，使异步流程更易于管理和理解。

4. Promise的缺点

通常说了优点，都得说点缺点，但是我就不！有本事，你打我啊

5. Promise方法的案例和详细说明

接下来，我们将为每个Promise方法提供案例，并详细说明其使用场景和代码功能。

5.1. Promise.resolve(value)

const promise = Promise.resolve(42);

promise.then(result => {
  console.log(result); // 输出: 42
});

使用场景：将一个同步的值包装成Promise对象，并立即解决（fulfilled）该Promise对象。
详细说明：Promise.resolve()方法返回一个已解决状态（fulfilled）的Promise对象，并将给定的值作为结果。
案例说明：在此案例中，我们使用Promise.resolve()将整数值42包装成Promise对象，并立即解决该Promise对象。然后，我们使用.then()方法在Promise对象状态变为fulfilled时获取解决值并打印到控制台。

5.2. Promise.reject(reason)

javascriptCopy codeconst promise = Promise.reject(new Error('hello 掘金'));

promise.catch(error => {
  console.error(error.message); // 输出: hello 掘金
});

使用场景：将一个拒绝状态（rejected）的Promise对象返回，并提供拒绝的原因。
详细说明：Promise.reject()方法返回一个拒绝状态（rejected）的Promise对象，并将给定的原因作为拒绝原因。
案例说明：在此案例中，我们使用Promise.reject()返回一个拒绝状态的Promise对象，并传递一个Error对象作为拒绝原因。然后，我们使用.catch()方法捕获Promise对象的拒绝，并将拒绝原因的错误消息打印到控制台。

5.3. Promise.prototype.then(onFulfilled, onRejected)

javascriptCopy codefunction fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      const data = { id: 1, title: '天生我才必有用' };
      resolve(data);
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log(data); // 输出: { id: 1, title: '天生我才必有用' }
  })
  .catch(error => {
    console.error(error);
  });

使用场景：处理异步操作成功的情况，获取解决值并继续执行后续操作。
详细说明：Promise.prototype.then()方法添加解决状态（fulfilled）的回调函数。当Promise对象状态变为fulfilled时，该回调函数会被调用，并将解决值作为参数传递给它。
案例说明：在此案例中，我们定义了一个fetchData()函数返回一个Promise对象，在2秒后解决该Promise对象并传递一个包含数据的对象。然后，我们使用.then()方法在Promise对象状态变为fulfilled时获取解决值，并将其打印到控制台。

5.4. Promise.prototype.catch(onRejected)

function fetchData() {
	return new Promise((resolve, reject) => {
		// 模拟异步操作
		setTimeout(() => {
			reject(new Error('前端没有死'));
		}, 2000);
	});
}

fetchData()
	.then(data => {
		console.log(data);
	})
	.catch(error => {
		console.error(error.message); // 输出: 前端没有死
	});

使用场景：处理异步操作失败的情况，捕获拒绝原因并进行相应的错误处理。
详细说明：Promise.prototype.catch()方法添加拒绝状态（rejected）的回调函数。当Promise对象状态变为rejected时，该回调函数会被调用，并将拒绝原因作为参数传递给它。
案例说明：在此案例中，我们定义了一个fetchData()函数返回一个Promise对象，在2秒后拒绝该Promise对象并传递一个Error对象作为拒绝原因。然后，我们使用.catch()方法捕获Promise对象的拒绝，并将拒绝原因的错误消息打印到控制台。

5.5. Promise.prototype.finally(onFinally)

function fetchData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      resolve('PHP 是 Web 开发最好的语言');
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log(data); // 输出: PHP 是 Web 开发最好的语言
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log('你认为呢'); // 输出: 你认为呢
  });

使用场景：无论Promise对象的状态是fulfilled还是rejected，都需要执行某些操作，比如清理资源或执行收尾工作。
详细说明：Promise.prototype.finally()方法添加一个回调函数，无论Promise对象的状态是fulfilled还是rejected，都会调用该回调函数。
案例说明：在此案例中，我们定义了一个fetchData()函数返回一个Promise对象，在2秒后解决该Promise对象并传递一个成功消息。然后，我们使用.then()方法获取解决值并打印到控制台。接着，我们使用.catch()方法捕获任何拒绝，并打印错误消息。最后，我们使用.finally()方法添加一个回调函数，在Promise对象的状态无论是fulfilled还是rejected时执行一些清理操作，同时将”Cleanup”打印到控制台。

5.6. Promise.all(iterable)

const promise1 = Promise.resolve(1);
const promise2 = new Promise(resolve => setTimeout(() => resolve(2), 1000));
const promise3 = new Promise(resolve => setTimeout(() => resolve(3), 500));

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // 输出: [1, 2, 3]
  });

使用场景：当需要同时处理多个Promise对象的结果，并在它们都解决时执行特定操作时，可以使用Promise.all()方法。
详细说明：Promise.all()方法接收一个可迭代对象（如数组）作为参数，并返回一个新的Promise对象。这个新的Promise对象将在所有输入的Promise对象都解决（fulfilled）时解决，并将所有解决值作为结果传递给.then()方法。
- 案例说明：在此案例中，我们创建了三个Promise对象，分别是promise1、promise2和promise3。promise1是一个立即解决的Promise对象，解决值为1。promise2和promise3是在不同的时间延迟后解决的Promise对象，分别解决值为2和3。然后，我们使用Promise.all()方法将这三个Promise对象作为参数传递，并通过.then()方法获取解决值并打印到控制台。

5.7. Promise.race(iterable)

const promise1 = new Promise(resolve => setTimeout(() => resolve('A'), 1000));
const promise2 = new Promise(resolve => setTimeout(() => resolve('B'), 500));
const promise3 = new Promise(resolve => setTimeout(() => resolve('C'), 2000));

Promise.race([promise1, promise2, promise3])
  .then(result => {
    console.log(result); // 输出: B
  });

使用场景：当需要获取多个Promise对象中最先解决的结果时，可以使用Promise.race()方法。
详细说明：Promise.race()方法接收一个可迭代对象作为参数，并返回一个新的Promise对象。这个新的Promise对象将在输入的Promise对象中有一个解决（fulfilled）时解决，并将第一个解决值作为结果传递给.then()方法。
案例说明：在此案例中，我们创建了三个Promise对象，promise1、promise2和promise3。它们分别在不同的时间延迟后解决，解决值分别为’A’、’B’和’C’。然后，我们使用Promise.race()方法将这三个Promise对象作为参数传递，并通过.then()方法获取最先解决的结果，并将其打印到控制台。

5.8. Promise.allSettled(iterable)

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('Rejected'));
const promise3 = new Promise(resolve => setTimeout(() => resolve(3), 1000));

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
    /*
    输出:
    [
      { status: 'fulfilled', value: 1 },
      { status: 'rejected', reason: Error('Rejected') },
      { status: 'fulfilled', value: 3 }
    ]
    */
  });

使用场景：当需要等待多个Promise对象都解决或拒绝，并获取每个Promise对象的状态和结果时，可以使用Promise.allSettled()方法。
详细说明：Promise.allSettled()方法接收一个可迭代对象作为参数，并返回一个新的Promise对象。这个新的Promise对象将在所有输入的Promise对象都解决或拒绝后解决，并将每个Promise对象的状态和结果作为一个对象组成的数组传递给.then()方法。
案例说明：在此案例中，我们创建了三个Promise对象，promise1、promise2和promise3。promise1是一个立即解决的Promise对象，解决值为1。promise2是一个立即拒绝的Promise对象，拒绝原因为一个Error对象。promise3是在1秒后解决的Promise对象，解决值为3。然后，我们使用Promise.allSettled()方法将这三个Promise对象作为参数传递，并通过.then()方法获取每个Promise对象的状态和结果，并将其打印到控制台。

总结

本文详细介绍了Promise从其前身开始的历史，探讨了Promise的能力、优点和缺点。我们提供了每个Promise方法的案例，并对每个案例进行了详细说明和使用场景的解释。通过这些案例，读者可以更好地理解Promise的工作原理和实际应用。Promise作为一种处理异步操作的强大工具，在现代JavaScript开发中发挥着重要的作用，提升了代码的可读性、可维护性和错误处理能力。然而，开发人员需要注意Promise的兼容性问题和无法取消的限制。通过深入了解Promise，并合理运用其方法，开发人员可以更好地编写高效的异步代码。

原文链接：https://juejin.cn/post/7240347693461864503 作者：布衣1983