详解JavaScript Promise和Async/Await

Promise的基础知识

Promise的概念

Promise是ES6中新增的一种异步编程解决方案，它以更优雅、更易维护的方式解决了回调地狱的问题。Promise相当于一个容器，异步操作返回的结果会被Promise包装起来并保证异步操作的状态。

Promise的三种状态

在Promise中异步操作的状态有三种：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

在异步操作开始时，Promise处于pending状态。异步操作执行成功后，Promise的状态会转变为fulfilled状态。异步操作执行失败后，Promise的状态会转变为rejected状态。

Promise的常用方法

Promise有三种常用的方法：

then()：在Promise状态变成fulfilled时被调用的方法，接收一个回调函数作为参数，用于处理异步操作成功后的返回结果。
catch()：在Promise状态变成rejected时被调用的方法，接收一个回调函数作为参数，用于处理异步操作失败的返回结果。
finally()：无论Promise状态变成fulfilled还是rejected，都会执行的方法，通常用于释放资源等清理操作。

Async/Await

Async/Await的概念

Async/Await是ES8中新增的异步编程解决方案，它通过对Promise的封装，让异步代码看起来像同步代码。Async用于定义异步函数，Await用于暂停异步函数的执行，等待Promise的结果返回后再继续执行。

Async/Await的语法

Async/Await提供的语法非常简洁：

async function asyncFn() {
  // 异步操作
  const result = await promise; // 等待Promise返回结果
  // 异步操作
}

在上面的代码 example 中，在Async函数中执行异步操作，然后使用Await暂停函数的执行，等待异步操作返回结果后再继续执行。

Async/Await的示例

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data from server');
    }, 3000);
  });
}

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

getData();
// 等待 3s 后，输出：Data from server

在上述代码 example 中，我们使用Promise模拟一个异步操作，返回数据后使用Async/Await获取异步操作结果并进行输出。

下面再给出一个更复杂的示例：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    if (url === 'http://www.example.com/data') {
      setTimeout(() => {
        resolve('Data from server');
      }, 3000);
    } else {
      reject(new Error('Invalid URL'));
    }
  });
}

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

getData('http://www.example.com/data');
// 等待 3s 后，输出：Data from server

getData('http://www.example.com/users');
// 输出：Invalid URL

在上述代码 example 中，我们使用Promise模拟一个异步操作，但这次我们增加了一个参数：url。如果url正确，异步操作执行成功，返回数据到Async 函数内部；如果url错误，异步操作执行失败，抛出异常。我们则使用Async/Await的方式来获取异步操作的结果，并使用try...catch来处理异步操作抛出的异常。