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的使用场景和操作性较好,是必须掌握的,在实际开发中也用得最多。
各位大神们,你们觉得呢?