在前端开发中，经常需要进行异步操作，例如从后端获取数据或者进行网络请求等等。在 ES6 中，Promise 出现了，解决了异步操作中回调函数嵌套的问题，使代码具有更好的可读性。而在 ES8 中，async/await 的出现又进一步简化了 Promise 和回调函数的使用。
Promise 回顾
在 Promise 出现之前，JavaScript 中处理异步操作的方式通常是使用回调函数。然而，回调函数嵌套层次深、代码可读性差、错误处理困难等问题使得回调函数的使用受到了很多批评。
Promise 可以解决这些问题，它使用 then 方法将异步操作的结果传递给函数，从而避免了回调函数嵌套的问题。例如，我们从后端获取数据时，可以使用 Promise 来进行处理：
fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
Promise 的第一个 then 方法接收一个 response 对象，返回的是一个 Promise，该 Promise 的 resolve 函数会将 response 对象转化为 JSON 格式的数据。第二个 then 方法接收 JSON 格式的数据，并在控制台上打印出来。如果在 Promise 执行过程中出现错误，catch 方法会捕捉到错误并打印在控制台上。
async/await 入门
使用 async/await 可以更进一步地简化 Promise 的使用。async 表示函数是异步的，而 await 表示等待 Promise 的 resolve，并返回 resolve 后的结果。
例如，在使用 Promise 获取数据时，我们可以这样写：
-- -------------------- ---- ------- ----- -------- -------------- - ----- -------- - ----- ----------- ----- ---- - ----- ---------------- ------ ----- - -------------- ---------- -- ------------------ ------------ -- ----------------------
在上面的代码中，fetchData 函数使用了 async 关键字，表示该函数是异步的。在函数中使用 await 关键字等待 fetch 方法的 resolve，并在接收到 response 对象后，再次使用 await 关键字等待 response.json() 方法的 resolve。最后，函数返回 JSON 格式的数据。
在 fetchData 函数返回的 Promise 中，我们可以通过 then 方法拿到数据，并在控制台上进行打印输出。如果在 fetchData 函数执行过程中出现错误，则 catch 方法会捕捉到错误并打印在控制台上。
异步错误处理
在异步操作中，错误处理一直是一个比较麻烦的问题。使用 Promise 可以通过 catch 方法处理异步操作中出现的错误，而在 async/await 中，可以使用 try/catch 语句实现类似的错误处理。
例如，在 fetchData 函数中使用 try/catch 来处理错误：
-- -------------------- ---- -------
----- -------- -------------- -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
----- --- ----------------
-
-
--------------
---------- -- ------------------
------------ -- ------------------------------在上面的代码中，我们使用 try/catch 语句来包装整个异步操作。如果在异步操作中出现错误，则 catch 语句会捕捉到错误，并打印在控制台上。在 catch 语句中，我们使用 throw 语句来抛出一个新的错误，表示获取数据失败。在 fetchData 函数执行完成之后，我们可以通过 catch 方法拿到错误信息，并进行处理。
总结
使用 async/await 可以进一步简化 Promise 和回调函数的使用，并且在错误处理方面也更加方便。在使用 async/await 的过程中，我们需要注意一些细节，例如将 async 关键字和 await 关键字加到正确的位置，以及使用 try/catch 语句来处理异步操作中出现的错误。
-- -------------------- ---- -------
----- -------- -------------- -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
----- --- ----------------
-
-
--------------
---------- -- ------------------
------------ -- ------------------------------以上是一段使用 async/await 的示例代码，它从后端获取数据并打印在控制台上。我们可以根据自己的需要来使用 async/await 来简化异步操作的处理，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479f1e5968c7c53b05d77b2