巧用 Promise 常见方法，提升异步编程体验

前端

2023-12-03 19:49:52

使用 Promise 掌控异步编程的世界

在当今快节奏的应用程序开发环境中，异步编程已成为一种必不可少的技术。它允许应用程序执行长期运行的任务，同时仍然响应用户交互，从而显著提高用户体验。而 Promise 是处理异步操作的最优雅、最实用的工具之一。

什么是 Promise？

Promise 是一种表示异步操作的未来结果的对象。当异步操作完成时，它可以被解析（成功）或拒绝（失败），并且结果将通过回调函数返回。

Promise 的常用方法

Promise 提供了一系列有用的方法来处理异步操作，让我们逐一了解一下：

then：获取结果

then() 方法用于获取已解析 Promise 的结果。它接收一个回调函数，该函数将接收解析后的值作为参数。

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    resolve('成功结果');
  }, 1000);
});

promise.then((result) => {
  console.log(`异步操作成功，结果为：${result}`);
});

catch：处理错误

catch() 方法用于处理已拒绝 Promise 的错误。它接收一个回调函数，该函数将接收拒绝后的值作为参数。

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    reject(new Error('操作失败'));
  }, 1000);
});

promise.catch((error) => {
  console.log(`异步操作失败，错误信息：${error.message}`);
});

finally：始终执行

finally() 方法无论 Promise 是解析还是拒绝都会执行。它接收一个回调函数，该函数不接受任何参数，但可以在其中执行一些清理操作或收尾工作。

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    resolve('成功结果');
  }, 1000);
});

promise.finally(() => {
  console.log('异步操作已完成');
});

all：等待并发执行

all() 方法接收一个 Promise 数组，等待所有 Promise 都解析后返回一个新的 Promise。新 Promise 的解析值是一个数组，包含了每个 Promise 的解析值。

const promise1 = Promise.resolve('结果1');
const promise2 = Promise.resolve('结果2');
const promise3 = Promise.resolve('结果3');

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

race：等待第一个完成

race() 方法接收一个 Promise 数组，等待其中第一个 Promise 解析或拒绝，然后返回一个新的 Promise。新 Promise 的解析值或拒绝值与第一个完成的 Promise 的解析值或拒绝值相同。

const promise1 = Promise.resolve('结果1');
const promise2 = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    resolve('结果2');
  }, 2000);
});
const promise3 = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    reject(new Error('操作失败'));
  }, 1000);
});

Promise.race([promise1, promise2, promise3]).then((result) => {
  console.log(result); // 输出：'结果1'
}).catch((error) => {
  console.log(error.message); // 输出：'操作失败'
});