使用Promise和await代替then()

基础概念

Promise 和 async/await 是 JavaScript 中处理异步操作的两种方式。Promise 是一个对象，表示异步操作的最终完成（或失败）及其结果值的状态。async/await 是基于 Promise 的语法糖，使得异步代码看起来更像同步代码，提高了代码的可读性和可维护性。

优势

可读性：async/await 使得异步代码看起来更像同步代码，减少了嵌套的回调函数，提高了代码的可读性。
错误处理：使用 try/catch 可以更方便地捕获和处理异步操作中的错误。
维护性：代码结构更清晰，便于后续的维护和扩展。

类型

Promise：表示一个异步操作的最终完成（或失败）及其结果值的状态。
async/await：基于 Promise 的语法糖，使得异步代码看起来更像同步代码。

应用场景

适用于需要处理异步操作的场景，例如网络请求、文件读写、定时任务等。

示例代码

使用 `then()`

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 1000);
  });
}

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

使用 `async/await`

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 1000);
  });
}

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

getData();

常见问题及解决方法

问题：为什么 `await` 只能在 `async` 函数中使用？

原因：await 关键字只能在 async 函数中使用，因为 await 会暂停当前函数的执行，等待 Promise 的解决。如果不在 async 函数中使用，JavaScript 引擎无法确定如何处理这种暂停。

解决方法：确保 await 关键字在 async 函数内部使用。

// 错误示例
function fetchData() {
  const data = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 1000);
  });
  console.log(data);
}

// 正确示例
async function fetchData() {
  const data = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 1000);
  });
  console.log(data);
}

问题：如何处理 `async/await` 中的错误？

原因：async/await 中的错误处理与同步代码类似，可以使用 try/catch 语句捕获和处理错误。

解决方法：使用 try/catch 语句捕获和处理异步操作中的错误。

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('Error fetching data');
      }, 1000);
    });
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();