相信我，ES7 async 函数和 promise.js 差不多一样简单
前言
在前端开发中，异步编程是非常常见的一种操作方式。在实际项目中，异步请求、异步数据的处理以及异步渲染、交互操作等都已经是必不可少的操作。而在异步编程中使用 callback，虽然简单，但是容易陷入回调嵌套地狱的情况，影响代码的可读性以及可维护性。为了解决这个问题，ES6里面对Promise做出了支持，提供了ES7 async 函数，可以让异步编程变得非常简单。
什么是ES7 async 函数
ES7 async 函数是ES6 async 关键字（用于定义异步函数）的一个变体。async函数返回一个Promise 对象，可以使用 then 函数进行回调处理，并且ES7 async 函数可以使用 await 关键字来等待异步操作完成，因此可以使用同步式的调用方式进行代码的编写。
ES7 async 函数的优势
除了更简单易懂之外，ES7 async 函数的主要优势在于避免了回调处理带来的回调地狱的问题，进一步提高开发效率。此外，ES7 async 函数还提供了相对较好的错误处理方式，因此代码的可维护性和容错性都得到了较大的提升。
ES7 async 函数的语法
定义一个async函数的语法如下：
async function functionName() {
}异步代码语法如下：
async function functionName() {
let response = await asyncResult;
console.log(response);
}其中 asyncResult 表示异步代码的返回结果，await 表示等待异步操作完成后获取结果。await 只能在async函数内工作。
ES7 async 函数与 Promise 的区别
ES7 async 函数和 Promise 作用相似，但是使用方式不同。ES7 async 函数使用 yield 关键字来等待异步操作完成，而 Promise 通过 then 和 catch 方法来完成同等功能。此外，ES7 async 函数提供了更直观的错误处理和更好的可读性。
下面是一个 Promise 的代码示例：
-- -------------------- ---- -------
-------- ------------- -
------ --- --------------- -- -
------------- -- -
-----------------
-- ------
---
-
--------------------------- -- -
----------------------
---ES7 async 函数提供了更直接简单的方式：
-- -------------------- ---- -------
----- -------- ------------- -
------ ----- --- --------------- -- -
------------- -- -
-----------------
-- ------
---
-
----------------- ---------------ES7 async 函数的使用场景
ES7 async 函数主要用于以下场景：
- 异步数据的处理
- 异步请求的处理
- 异步渲染和交互操作的处理
ES7 async 函数的注意点
- await 只能在 async 函数内部使用。
- await 后面需要跟 Promise 对象或者原始类型的数据。
- 如果 async 函数中没有返回值，那么返回的 Promise 对象将是一个空对象。
总结
相信我，ES7 async 函数和 Promise.js 差不多一样简单，并且避免了回调地狱，提高了代码的可读性和可维护性。如果你在项目中还在使用 callback 的方式，不妨试试 ES7 async 函数的方式，相信会有惊叹的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64742efb968c7c53b0197fc6