浅谈JavaScript中的异步处理

简介:

在 JavaScript 的世界中,所有代码都是单线程执行的,由于这个“缺陷”,导致 JavaScript 的所有网络操作,浏览器事件,都必须是异步执行。

异步执行可以用回调函数实现。

异步操作会在将来的某个时间点触发一个函数调用。

主流的异步处理方案主要有:回调函数 (CallBack) 、 Promise 、 Generator 函数、 async/await 。

浅谈JavaScript中的异步处理

一、回调函数(CallBack)

这是异步编程最基本的方法

假设我们有一个 getData 方法,用于异步获取数据,第一个参数为请求的 url 地址,第二个参数是回调函数,如下:


 
 
  1. function getData(url, callBack){ 
  2.     // 模拟发送网络请求 
  3.     setTimeout(()=> { 
  4.         // 假设 res 就是返回的数据 
  5.         var res = { 
  6.             url: url, 
  7.             data: Math.random() 
  8.         } 
  9.         // 执行回调,将数据作为参数传递 
  10.         callBack(res) 
  11.     }, 1000) 

我们预先设定一个场景,假设我们要请求三次服务器,每一次的请求依赖上一次请求的结果,如下:


 
 
  1. getData('/page/1?param=123', (res1) => { 
  2.     console.log(res1) 
  3.     getData(`/page/2?param=${res1.data}`, (res2) => { 
  4.         console.log(res2) 
  5.         getData(`/page/3?param=${res2.data}`, (res3) => { 
  6.             console.log(res3) 
  7.         }) 
  8.     }) 
  9. }) 
  • 通过上面的代码可以看出,第一次请求的 url 地址为: /page/1?param=123 ,返回结果为 res1 。
  • 第二个请求的 url 地址为: /page/2?param=${res1.data} ,依赖第 一次请求的 res1.data ,返回结果为 res2`。
  • 第三次请求的 url 地址为: /page/3?param=${res2.data} ,依赖第二次请求的 res2.data ,返回结果为 res3 。

由于后续请求依赖前一个请求的结果,所以我们只能把下一次请求写到上一次请求的回调函数内部,这样就形成了常说的:回调地狱。

二、发布/订阅

我们假定,存在一个”信号中心”,某个任务执行完成,就向信号中心”发布”( publish )一个信号,其他任务可以向信号中心”订阅”( subscribe )这个信号,从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”(publish-subscribe pattern),又称”观察者模式”(observer pattern)

这个模式有多种实现,下面采用的是Ben Alman的 Tiny Pub/Sub ,这是 jQuery 的一个插件

首先, f2 向”信号中心” jQuery 订阅” done “信号


 
 
  1. jQuery.subscribe("done", f2); 

f1进行如下改写


 
 
  1. function f1(){ 
  2. setTimeout(function(){ 
  3. // f1的任务代码 
  4. jQuery.publish("done"); 
  5. }, 1000); 

jQuery.publish("done") 的意思是, f1 执行完成后,向”信号中心 "jQuery 发布 "done" 信号,从而引发f2的执行。 此外,f2完成执行后,也可以取消订阅( unsubscribe )


 
 
  1. jQuery.unsubscribe("done", f2); 

这种方法的性质与”事件监听”类似,但是明显优于后者。因为我们可以通过查看”消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

三、Promise

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大

所谓 Promise ,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说, Promise 是一个对象,从它可以获取异步操作的消息。 Promise 提供统一的 API ,各种异步操作都可以用同样的方法进行处理

简单说,它的思想是,每一个异步任务返回一个 Promise 对象,该对象有一个 then 方法,允许指定回调函数。

现在我们使用 Promise 重新实现上面的案例,首先,我们要把异步请求数据的方法封装成 Promise


 
 
  1. function getDataAsync(url){ 
  2.     return new Promise((resolve, reject) => { 
  3.         setTimeout(()=> { 
  4.             var res = { 
  5.                 url: url, 
  6.                 data: Math.random() 
  7.             } 
  8.             resolve(res) 
  9.         }, 1000) 
  10.     }) 

那么请求的代码应该这样写


 
 
  1. getDataAsync('/page/1?param=123'
  2.     .then(res1=> { 
  3.         console.log(res1) 
  4.         return getDataAsync(`/page/2?param=${res1.data}`) 
  5.     }) 
  6.     .then(res2=> { 
  7.         console.log(res2) 
  8.         return getDataAsync(`/page/3?param=${res2.data}`) 
  9.     }) 
  10.     .then(res3=> { 
  11.         console.log(res3) 
  12.     }) 

then 方法返回一个新的 Promise 对象, then 方法的链式调用避免了 CallBack 回调地狱

但也并不是完美,比如我们要添加很多 then 语句, 每一个 then 还是要写一个回调。

如果场景再复杂一点,比如后边的每一个请求依赖前面所有请求的结果,而不仅仅依赖上一次请求的结果,那会更复杂。 为了做的更好, async/await 就应运而生了,来看看使用 async/await 要如何实现

四、async/await

getDataAsync 方法不变,如下


 
 
  1.  function getDataAsync(url){ 
  2.     return new Promise((resolve, reject) => { 
  3.         setTimeout(()=> { 
  4.             var res = { 
  5.                 url: url, 
  6.                 data: Math.random() 
  7.             } 
  8.             resolve(res) 
  9.         }, 1000) 
  10.     }) 

业务代码如下


 
 
  1. async function getData(){ 
  2.     var res1 = await getDataAsync('/page/1?param=123'
  3.     console.log(res1) 
  4.     var res2 = await getDataAsync(`/page/2?param=${res1.data}`) 
  5.     console.log(res2) 
  6.     var res3 = await getDataAsync(`/page/2?param=${res2.data}`) 
  7.     console.log(res3) 

可以看到使用 async\await 就像写同步代码一样

对比 Promise 感觉怎么样?是不是非常清晰,但是 async/await 是基于 Promise 的,因为使用 async 修饰的方法最终返回一个 Promise , 实际上, async/await 可以看做是使用 Generator 函数处理异步的语法糖,我们来看看如何使用 Generator 函数处理异步

五、Generator

首先异步函数依然是


 
 
  1. function getDataAsync(url){ 
  2.     return new Promise((resolve, reject) => { 
  3.         setTimeout(()=> { 
  4.             var res = { 
  5.                 url: url, 
  6.                 data: Math.random() 
  7.             } 
  8.             resolve(res) 
  9.         }, 1000) 
  10.     }) 

使用 Generator 函数可以这样写


 
 
  1. function*getData(){ 
  2.     var res1 = yield getDataAsync('/page/1?param=123'
  3.     console.log(res1) 
  4.     var res2 = yield getDataAsync(`/page/2?param=${res1.data}`) 
  5.     console.log(res2) 
  6.     var res3 = yield getDataAsync(`/page/2?param=${res2.data}`) 
  7.     console.log(res3)) 

然后我们这样逐步执行


 
 
  1. var g = getData() 
  2. g.next().value.then(res1=> { 
  3.     g.next(res1).value.then(res2=> { 
  4.         g.next(res2).value.then(()=> { 
  5.             g.next() 
  6.         }) 
  7.     }) 
  8. }) 

上面的代码,我们逐步调用遍历器的 next() 方法,由于每一个 next() 方法返回值的 value 属性为一个 Promise 对象

所以我们为其添加 then 方法, 在 then 方法里面接着运行 next 方法挪移遍历器指针,直到 Generator 函数运行完成,实际上,这个过程我们不必手动完成,可以封装成一个简单的执行器


 
 
  1. function run(gen){ 
  2.     var g = gen() 
  3.  
  4.     function next(data){ 
  5.         var res = g.next(data) 
  6.         if (res.done) return res.value 
  7.         res.value.then((data) => { 
  8.             next(data) 
  9.         }) 
  10.     } 
  11.  
  12.     next() 
  13.  

run 方法用来自动运行异步的 Generator 函数,其实就是一个递归的过程调用的过程。这样我们就不必手动执行 Generator 函数了。 有了 run 方法,我们只需要这样运行 getData 方法


 
 
  1. run(getData) 

这样,我们就可以把异步操作封装到 Generator 函数内部,使用 run 方法作为 Generator 函数的自执行器,来处理异步。其实我们不难发现, async/await 方法相比于 Generator 处理异步的方式,有很多相似的地方,只不过 async/await 在语义化方面更加明显,同时 async/await 不需要我们手写执行器,其内部已经帮我们封装好了,这就是为什么说 async/await 是 Generator 函数处理异步的语法糖了。


作者:佚名

来源:51CTO

相关文章
|
3月前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
8月前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
75 7
|
4月前
|
前端开发 JavaScript 开发者
JS 异步解决方案的发展历程以及优缺点
本文介绍了JS异步解决方案的发展历程,从回调函数到Promise,再到Async/Await,每种方案的优缺点及应用场景,帮助开发者更好地理解和选择合适的异步处理方式。
|
4月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
39 1
|
5月前
|
JavaScript 前端开发
一个js里可以有多少个async function,如何用最少的async function实现多个异步操作
在 JavaScript 中,可以通过多种方法实现多个异步操作并减少 `async` 函数的数量。
|
5月前
|
JSON 前端开发 JavaScript
一文看懂 JavaScript 异步相关知识
一文看懂 JavaScript 异步相关知识
51 4
|
6月前
|
存储 JavaScript API
Node.js中的异步API
【8月更文挑战第16天】
52 1
|
7月前
|
数据采集 JavaScript Python
【JS逆向课件:第十三课:异步爬虫】
回调函数就是回头调用的函数
|
6月前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
102 0
|
6月前
|
前端开发 JavaScript
JavaScript——promise 是解决异步问题的方法嘛
JavaScript——promise 是解决异步问题的方法嘛
60 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    40
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    27
  • 3
    Node.js 中实现多任务下载的并发控制策略
    32
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    54
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55