面试官看着你，问道：“可以讲讲 async/await 到底是什么吗？”这是很多前端开发者面试时都会遇到的问题。不少人第一反应是：“就是让异步代码看起来像同步的……”但这样的回答太浅显了。

在面试的时候，经常会遇到一道经典的面试题：如何优化网页加载速度？常规的回答中总会有一条：把 css 文件放在页面顶部，把 js 文件放在页面底部。

开篇观点，async/await 不仅仅是 Promise 上面的语法糖，因为 async/await 确实提供了切实的好处。async/await 让异步代码变成同步的方式，从而使代码更具表现力和可读性。async/await 统一了异步编程的经验；以及提供了更好的错误堆栈跟踪。

useEffect 作为 Hooks 中一个很重要的 Hooks，可以让你在函数组件中执行副作用操作。它能够完成之前 Class Component 中的生命周期的职责。它返回的函数的执行时机如下：

使用async关键字声明的函数，是AsyncFunction构造函数的实例，在async函数体内，可以使用await接收promise实例，async和await关键字，在开发过程中，可以简洁地去做一些异步操作。

如果原始的Promise成功了，那么数组中的第一项是空的，表示没有错误，第二项是原始 Promise的结果。如果原来的Promise失败了，那么数组的第一项是错误，第二项是未定义。就是这样了。

看报错，我们知道 effect function 应该返回一个销毁函数（effect：是指return返回的cleanup函数），如果 useEffect 第一个参数传入 async，返回值则变成了 Promise，会导致 react 在调用销毁函数的时候报错。

由于javascript是单线程的执行模型，因此为了提高效率就有了异步编程，单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行

async 函数表示这个函数内部有异步请求,如果这个 async 函数没有返回值,那么这个 async 仅仅只是一个标识而已.await 需要结合 async 函数一起使用,它通常用于等待一个 Promise 函数或 async 函数的执行

一般来说对方法的调用都是同步执行的。例如在线程执行体内，即线程的调用函数中，方法的调用就是同步执行的。如果方法需要很长的时间来完成，比方说从Internet加载数据的方法，调用者线程将被阻塞直到方法调用完成。

Generator 函数是 ES6 提供的一种异步编程解决方案，可以先理解为一个状态机，封装了多个内部状态，执行Generator函数返回一个遍历器对象，通过遍历器对象，可以依次遍历 Generator 函数内部的每一个状态

我们经常会遇到这样的需求，在循环中使用异步请求，而 ES6 的 async/await 是我们让异步编程更简单的利剑 。本篇总结了 5 种在循环中使用 async/await 的方法（代码干货都能在浏览器控制台自测）：

async的意思是异步，顾名思义就是有关异步操作的关键字，async 是 ES7 才有的，与我们之前说的Promise、Generator有很大的关联。

Async/Await是基于Promise而来的，Async/Await是相互依存的，缺一不可，它们的出现就是为了Promise而来，也算是Promise的进化改良版，为的就是解决文章开始说的如果出现大量复杂嵌套不易读的Promise异步问题。

为了让还没听说过这个特性的小伙伴们有一个大致了解，以下是一些关于该特性的简要介绍：async/await是一种编写异步代码的新方法。在这之前编写异步代码使用的是回调函数和promise。async/await实际是建立在promise之上的。因此你不能把它和回调函数搭配使用。