异步 一文彻底搞懂JavaScript异步请求

JavaScript异步请求（Callback、Promise、Async/Await、G

异步请求在当今的前端江湖里重要非凡，可以毫无疑问地说，正是异步请求给JavaScript开启了无限的使用场景。下面将介绍在JavaScript中实现异步请求的常见四种方式，即回调函数（Callback），Promise，Async/Await和生成器（Generator）。

一、回调函数（Callback）

回调函数可以说是最简单易懂的，我们无论是使用JQuery或VUE、React这些框架，回调函数都无时不在。回调函数是很多常见请求类库异步请求后默认调用方法。

下面看下实现方式。

使用Callback异步请求

对于使用回调函数作异步请求，无限过多解释，请求成功和回调各有回调，各自处理业务逻辑或错误。回调函数作异步请求的弊端在于，如果应用业务比较复杂，那么异步请求可能需要多层嵌套，影响代码可读性和可维护性，即常规说的“回调地狱”（Callback Hell）。

二、Promise

JavaScript的Promise使用越来越广，它是通过初始化Promise对象，来返回一个“异步承诺”，不管是请求成功或出错都会执行，初始化的promise实例带有resolve和reject方法，可以对上面的请求结果进行分开处理，一般来说，请求成功的情况下resolve数据，请求失败的情况下reject错误信息。但这并不是绝对的，什么时候resolve或reject完全取决于我们，这就给我们带来很大的便利性，我们可以将业务逻辑也考虑进去，从而在不同的使用场景下灵活使用resove和reject。下面看下使用Promise进行异步请求的示例。

Promise的另一个很大便利之处就是，针对多个异步请求的情况，可以使用Promise.all方法来确保各个请求的执行返回，避免了“回调地狱”（Callback Hell）。

下面看下实现方式。

使用Promise异步请求

三、Async/Await

虽然Promise很便利了，但不可否认的是使用Promise来定义异步请求，在实现代码简洁性方面还是稍差一点，因此就有了Async/Await，多个请求情况下更是可以“链式”声明，可以大大节省代码量。

下面看下实现方式。

使用Async/Await异步请求

当然，使用Async/Await也是有一定弊端的，比如在错误处理方法需要处理，特别是多个请求的情况，异步处理稍微麻烦一点，一般是使用try…catch去捕获请求异步。

四、生成器(Generator)

生成器函数（Generator）是ES2015新增的特性，生成器函数具有异步特性，使用生成器作异步请求也正是利用它的异步特性来实现的。

在定义一个生成器函数时，其中的每一个yield操作都是异步的，后面的yield会等待前面的yield操作完成，也可以获取前面yield完成的数据供当前使用。

下面看下实现方式。

使用Generator作异步请求

以上就是JavaScript中用于异步请求的四种常见方式（Callback, Promise, Async/Await，Generator），个人认为，Promise和Async/Await的使用场景和操作性较好，是必须掌握的，在实际开发中也用得最多。

各位大神们，你们觉得呢？