Promise 和 async/await 简单介绍和使用方法

什么是 Promise？

Promise 是一种用于 JavaScript 异步编程的 API。它可以让我们更加方便地处理异步操作，避免回调地狱的问题。Promise 有三种状态：pending（等待中）、fulfilled（已完成）和 rejected（已拒绝）。当 Promise 的状态变为 fulfilled 或 rejected 时，会调用 then 或 catch 方法来处理结果或错误。

Promise 的语法

// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve('成功的结果');
  } else {
    reject('失败的原因');
  }
});

promise.then(result => {
  // 处理成功的结果
}).catch(error => {
  // 处理失败的原因
});

Promise 的示例

// javascriptcn.com 代码示例
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据请求成功');
    }, 2000);
  });
}

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

什么是 async/await？

async/await 是 ES2017 中新增的语法，它是 Promise 的一种更加优雅的写法。async/await 让异步代码看起来更像同步代码，使得代码更加易读易懂。

async/await 的语法

async function fetchData() {
  try {
    const result = await 异步操作;
    // 处理成功的结果
  } catch (error) {
    // 处理失败的原因
  }
}

async/await 的示例

// javascriptcn.com 代码示例
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据请求成功');
    }, 2000);
  });
}

async function getData() {
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

getData();

Promise 和 async/await 的使用场景

Promise 和 async/await 都可以用于处理异步操作，但是它们的使用场景略有不同。一般来说，Promise 更适合处理多个异步操作的情况，而 async/await 更适合处理单个异步操作的情况。

Promise 的使用场景

Promise.all([promise1, promise2, promise3]).then(results => {
  // 处理多个异步操作的结果
}).catch(error => {
  // 处理多个异步操作的错误
});

async/await 的使用场景

// javascriptcn.com 代码示例
async function getData() {
  try {
    const result1 = await fetchData1();
    const result2 = await fetchData2();
    const result3 = await fetchData3();
    // 处理单个异步操作的结果
  } catch (error) {
    // 处理单个异步操作的错误
  }
}

总结

Promise 和 async/await 都是用于处理异步操作的 API，它们的语法和使用场景略有不同。Promise 更适合处理多个异步操作的情况，而 async/await 更适合处理单个异步操作的情况。在实际开发中，我们可以根据具体的情况选择使用哪种方式来处理异步操作。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6577a2d8d2f5e1655d140bb7