ES8 中的 async/await 与 Promise 异步方式的异同-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，异步编程是不可避免的一个话题。异步编程解决了 JavaScript 运行在单线程环境下的一个重大问题：当代码需要执行时间很长的操作（如网络请求、文件读写等），如果每次都等待该操作完成，程序可能会被阻塞很长时间，用户体验会受到很大的影响。异步编程技术使得程序可以在等待耗时操作完成的同时继续执行其他任务，这样就不会被阻塞。

在 ES6 中，Promise 成为了管理异步编程的新方式，它为 JavaScript 中的异步编程提供了更加优雅的解决方案，这与传统的回调方式相比具有很多的优势。而在 ES8 中，Async/Await 更是一个全新的异步编程体系，使得异步编程变得更加简单和易懂。本文将探讨 ES8 中的 Async/Await 与 Promise 异步方式的异同点。

1. 基础概念

1.1 Promise

Promise 是 JavaScript 中新的异步编程方式，在 ES6 中被引入。它可以将异步操作拆分成两个阶段，分别是 promise 的建立阶段和 promise 的消耗阶段。在 promise 建立时，会返回一个 promise 对象，该 promise 对象代表着操作的未来结果。在操作完成之后，promise 对象会根据操作的结果变成已决结果。

Promise 的基本结构如下：

new Promise((resolve, reject) => {
  // 异步操作
});

在这个结构中，我们可以看到 new Promise() 接受一个函数作为参数，该函数会被立刻执行。在这个函数内部，我们可以执行异步操作，当异步操作完成时，调用 resolve() 或 reject() 来改变 Promise 对象的状态。

1.2 Async/Await

Async/Await 是 ES8 中的异步编程方式，它是在 Promise 基础上的进一步封装。Async/Await 配合 Promise 来使用，它通过将异步编程中的 Promise 链改为常规代码的方式来简化异步编程。Async/Await 使得异步函数的写法更加类似于同步函数，代码可读性更高。

Async/Await 的基本结构如下：

async function asyncFunction() {
  // 异步操作
}

在这个结构中，我们可以看到 async function 关键字表示该函数是一个异步函数。异步操作可以通过 await 关键字来暂停执行异步函数，等待异步操作的返回结果，再继续执行后面的代码。

2. 异同点比较

2.1 使用方式

Promise 与 Async/Await 的使用方式是不同的。Promise 将异步操作封装成一个 Promise 对象，并返回该对象，可以使用 .then() 或 .catch() 方法来处理异步操作的结果，也可以使用 .finally() 方法来处理异步操作结束时的操作，如释放资源、关闭文件等。

Async/Await 则是使用 async 关键字声明一个异步函数，使用 await 关键字来等待异步操作结果。与 Promise 不同的是，Async/Await 可以使用 try catch 来捕获错误，进一步增强了代码的健壮性。

// Promise
function loadData() {
  return fetch('https://api.example.com/data/json')
    .then(response => response.json())
    .then(data => {
      console.log('Loaded data:', data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

// Async/Await
async function loadData() {
  try {
    const response = await fetch('https://api.example.com/data/json');
    const data = await response.json();
    console.log('Loaded data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

2.2 可读性

Async/Await 可以使得代码的可读性更高。由于 Async/Await 是通过让异步操作看起来像是同步操作来实现的，所以 Async/Await 的代码结构更像是常规的同步代码，更容易理解。

除此之外，Promise 在处理嵌套回调时需要使用链式调用，这会使代码嵌套层数过多，导致可读性很差。而 Async/Await 相较于 Promise 更容易处理嵌套的异步操作。

// Promise
getData()
  .then(data => {
    return getMoreData(data.id);
  })
  .then(moreData => {
    return getSomethingElse(moreData.name);
  })
  .then(somethingElse => {
    console.log('Done', somethingElse);
  })
  .catch(error => {
    console.error(error);
  });

// Async/Await
async function doSomething() {
  const data = await getData();
  const moreData = await getMoreData(data.id);
  const somethingElse = await getSomethingElse(moreData.name);
  console.log('Done', somethingElse);
}

2.3 异常处理

在 Promise 中，我们可以使用 .catch() 方法来捕获 Promise 中出现的错误，并进行处理。而在 Async/Await 中，我们可以使用 try catch 来处理出现的异常。

// Promise
function doSomething() {
  return new Promise((resolve, reject) => {
    // 异步操作
    if (出现错误) {
      reject(错误原因);
    } else {
      resolve(操作结果);
    }
  });
}

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

// Async/Await
async function doSomething() {
  try {
    // 异步操作
    const result = await someAsyncOperation();
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

doSomething();

3. 总结

无论是 Promise 还是 Async/Await 都是处理异步编程的一种方式，各有优点。Promise 相对于 Callback Hell 等传统的异步方式来说，已经提供了更加优美的异步语法，使得代码的可读性更高，实现更加简单，错误处理也更加清晰；而 Async/Await 则是在 Promise 的基础上进一步的封装，使得异步操作的代码结构更像是同步操作，更符合人们对于面向对象思想的理解，同时也使得基于 Promise 的代码更加健壮。在实际开发过程中，我们可以根据自己的需求来决定使用哪一种异步编程方式，以便更加高效地实现我们的业务逻辑。

4. 示例代码

4.1 使用 Promise

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

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

4.2 使用 Async/Await

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

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

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

ES8 中的 async/await 与 Promise 异步方式的异同