点亮承诺的微光，让细节映衬出你的力量

2023-09-18 18:21:39

什么是Promise？

在JavaScript的世界里，Promise提供了一种处理异步操作的方法。它代表一个未来可能完成或失败的操作结果。使用Promise可以更清晰地管理异步流程，并减少回调地狱（Callback Hell）的问题。

Promise的基本结构

Promise对象有三种状态：pending（进行中），fulfilled（已成功），和rejected（已被拒绝）。一旦Promise的状态变成fulfilled或rejected，它就永远不会再改变。我们可以使用.then()来处理成功的返回值，用.catch()来捕获错误。

基本示例

const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const value = Math.random() > 0.5 ? 'success' : 'error';
    if (value === 'success') resolve(value);
    else reject(new Error('An error occurred'));
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 如果成功，打印'success'
}).catch((err) => {
  console.error(err.message); // 如果失败，打印错误信息
});

利用Promise链

通过在.then()方法中返回一个新Promise，可以创建Promise链。这样可以使代码更加简洁和可读。

promise.then(result => {
  return new Promise((resolve, reject) => {
    if (result === 'success') resolve('next step');
    else reject(new Error('Failed at next step'));
  });
}).then(nextResult => {
  console.log(nextResult); // 打印'next step'
}).catch(err => {
  console.error(err.message);
});

Promise的高级用法

使用Promise.all()

当需要等待多个异步操作完成时，可以使用Promise.all()。它接收一个Promise实例数组作为参数，并返回一个新的Promise，这个新的Promise将在所有输入的Promise都成功完成后才会成功。

const promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'one'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 2000, 'two'));

Promise.all([promise1, promise2]).then((results) => {
  console.log(results); // 打印数组 ['one', 'two']
});

使用Promise.race()

Promise.race()方法接收一个Promise实例的数组，返回一个新的Promise。这个新的Promise将在第一个输入的Promise完成或失败时就立即完成或失败。

const promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'one'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'two'));

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // 打印'two'
});

安全和优化建议

在处理Promise时，应始终考虑错误处理。使用.catch()来捕获可能出现的任何错误是一个好习惯。同时，对于长时间运行的操作，添加超时机制可以提升程序的健壮性。

超时功能示例

function promiseWithTimeout(promise, ms) {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => reject(new Error('Promise timed out')), ms);
    promise.then(result => {
      clearTimeout(timeoutId);
      resolve(result);
    }).catch(err => {
      clearTimeout(timeoutId);
      reject(err);
    });
  });
}

const longRunningPromise = new Promise((resolve) => setTimeout(resolve, 5000, 'done'));

promiseWithTimeout(longRunningPromise, 3000).then(
  result => console.log(result),
  err => console.error('Error:', err.message)
);