10 个片段助您理解 ES 中的 Promise

在 JavaScript 的异步编程世界里，Promise 是一个至关重要的概念。它为处理异步操作提供了一种更优雅、更可管理的方式。以下是 10 个关键片段，帮助您深入理解 ES 中的 Promise。

片段一：创建一个简单的 Promise

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  if (成功) {
    resolve('操作成功');
  } else {
    reject('操作失败');
  }
});

通过传入一个执行函数来创建 Promise，该函数接收 resolve 和 reject 两个参数用于决定 Promise 的最终状态。

片段二：then 方法的使用

myPromise.then(result => {
  console.log(result);
}).catch(error => {
  console.error(error);
});

then 方法用于处理 Promise 成功的情况，catch 方法用于处理失败的情况。

片段三：多个 then 链式调用

myPromise.then(result => {
  // 一些操作
  return newResult;
}).then(newResult => {
  // 进一步的操作
});

可以通过链式调用 then 方法实现连续的异步操作处理。

片段四：处理并发的 Promise

Promise.all([promise1, promise2]).then(results => {
  // 当两个 Promise 都成功时
});
Promise.race([promise1, promise2]).then(result => {
  // 其中一个 Promise 先完成时
});

片段五：Promise 的 resolve 传递值

const myPromise = new Promise(resolve => {
  resolve({ key: 'value' });
});

可以传递各种类型的值，包括对象、数组等。

片段六：reject 抛出错误

const myPromise = new Promise((resolve, reject) => {
  reject(new Error('发生错误'));
});

片段七：结合 async/await

async function myFunction() {
  try {
    const result = await myPromise;
  } catch (error) {
    // 处理错误
  }
}

片段八：处理异步循环

const promises = [promise1, promise2, promise3];
const results = await Promise.all(promises.map(promise => promise));

片段九：创建延迟的 Promise

const delayedPromise = new Promise(resolve => {
  setTimeout(() => resolve('延迟完成'), 2000);
});

片段十：在实际项目中的应用 比如在数据获取、文件读写等场景中，Promise 能让代码更清晰、更易于维护。

通过以上 10 个片段，相信您对 ES 中的 Promise 有了更深入的理解和认识，能够更高效地运用它来处理异步编程任务。