Promise和Async/Aawait的区别-CSDN博客

本文链接：https://blog.csdn.net/m0_75247890/article/details/139494099

首先，Promise、async、await都是JavaScript中处理异步操作的方法

一.Promise

1.定义

Promise是ES6引入的一种解决异步操作的原生对象，用来表示一个异步操作的最终完成（或失败）及其结果值。它是一个构造函数，用来封装异步操作并可以链式调用.then()处理成功情况，.catch()处理失败情况。

2.错误处理

错误需要通过.catch()方法捕获，如果忘记捕获，错误可能会被丢弃。

3.执行循序

不改变JavaScript的非阻塞特性，即使Promise内部操作未完成，也不会阻碍外部代码的执行。

注意：Promise链式调用可能导致“回调地狱”，即过多的.then()和.catch()嵌套，降低了代码的可读性和可维护性。

代码示例

function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof userId === 'string') {
        resolve(`User data fetched for user ID: ${userId}`);
      } else {
        reject('Invalid user ID');
      }
    }, 2000);
  });
}

fetchUserData('123')
  .then(data => console.log(data))
  .catch(error => console.error(error));
//在这个例子中，fetchUserData函数返回一个Promise，模拟了异步获取用户数据的操作。我们通过.then()处理成功的回调，.catch()处理失败的回调。

二.async/await

1.定义

async是一个函数修饰符，表明函数内部包含异步操作；await只能在async函数内部使用，用于等待Promise的结果，使得异步代码看起来更像同步代码。

相对Promise使用async/await可以让异步代码读起来更像是同步代码，减少了回调函数的使用，提高了代码的可读性和可维护性。

2.错误处理

可以使用标准的try...catch语句来捕获错误，使得错误处理更加集中和自然。

3.执行顺序

虽然await会让代码看起来是同步执行的，但实际上它并不会阻塞其他代码执行，只是在async函数内部暂停执行直到等待的异步操作完成。

代码示例

async function fetchAndProcessUserData(userId) {
  try {
    const userData = await fetchUserData(userId);
    console.log(userData);
  } catch (error) {
    console.error(error);
  }
}

fetchAndProcessUserData('123'); // 正确的用户ID
// fetchAndProcessUserData(123); // 如果传入数字ID，这里会报错，因为我们模拟的fetchUserData只接受字符串

// 注意：fetchUserData函数定义保持不变
//在这个例子中，我们定义了一个async函数fetchAndProcessUserData，它使用await关键字等待fetchUserData的Promise解析。错误处理通过标准的try...catch块完成，使得代码结构更为清晰，类似于同步代码的阅读体验。