Promise 是 JavaScript 中用于处理异步操作的对象,它代表一个异步操作的最终完成(或失败)及其结果值。

基本用法

创建 Promise

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 操作成功 */) {
    resolve('成功的结果'); // 调用resolve表示Promise成功完成
  } else {
    reject('失败的原因'); // 调用reject表示Promise失败
  }
});

使用 Promise

myPromise
  .then(result => {
    // 处理成功情况
    console.log(result); // '成功的结果'
  })
  .catch(error => {
    // 处理失败情况
    console.error(error); // '失败的原因'
  })
  .finally(() => {
    // 无论成功失败都会执行
    console.log('操作完成');
  });

Promise 链式调用

doSomething()
  .then(result => doSomethingElse(result))
  .then(newResult => doThirdThing(newResult))
  .then(finalResult => {
    console.log('最终结果:', finalResult);
  })
  .catch(error => {
    console.error('链中某处出错:', error);
  });

Promise 静态方法

Promise.all()

等待所有 Promise 完成,或任一 Promise 失败:

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // [3, 42, "foo"]
  })
  .catch(error => {
    console.error(error);
  });

Promise.race()

返回最先完成或拒绝的 Promise:

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

Promise.race([promise1, promise2])
  .then(value => {
    console.log(value); // "two" (因为更快)
  });

Promise.allSettled()

等待所有 Promise 完成(无论成功或失败):

const promise1 = Promise.resolve(3);
const promise2 = new Promise((_, reject) => 
  setTimeout(reject, 100, 'foo')
);

Promise.allSettled([promise1, promise2])
  .then(results => {
    console.log(results);
    // [
    //   { status: 'fulfilled', value: 3 },
    //   { status: 'rejected', reason: 'foo' }
    // ]
  });

Promise.any()

返回第一个成功的 Promise(忽略拒绝,除非全部拒绝):

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => 
  setTimeout(resolve, 100, 'quick')
);
const promise3 = new Promise((resolve) => 
  setTimeout(resolve, 500, 'slow')
);

Promise.any([promise1, promise2, promise3])
  .then(value => {
    console.log(value); // "quick"
  })
  .catch(error => {
    // 所有Promise都被拒绝时才会进入这里
    console.log(error.errors); // [0]
  });

实际应用示例

1. 使用 Fetch API

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('获取数据时出错:', error);
  });

2. 使用 async/await 语法糖

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('获取数据时出错:', error);
  }
}

fetchData();

注意事项

  1. Promise 一旦创建就会立即执行

  2. Promise 的状态一旦改变就不会再变(pending → fulfilled 或 pending → rejected)

  3. 总是使用 .catch() 或 try/catch 处理错误

  4. 在 .then() 中返回新的 Promise 可以实现链式调用

  5. 避免 Promise 嵌套(Promise hell)

Promise 是现代 JavaScript 异步编程的基础,理解它的工作原理对于编写健壮的异步代码至关重要。