探索Javascript异步编程

JavaScript同步操作与异步操作JS】——探索JavaScript的同步和异步编程模式 同步操作适用于简单的、顺序执行的任务,而异步操作则适用于复杂的、需要等待的任务。通过理解和灵活运用这两种模式,我们可以更好地处理JavaScript应用程序中的各种情况,提高代码的性能和响应能力【JavaScript编程:探索同步与异步操作】在处理复杂任务时,同步和异步操作是至关重要的概念。无论是回调函数还是Promise,它们都可以处理异步操作的结果,并允许我们在操作完成后执行相应的操作。无论是回调函数还是Promise,它们都可以处理异步操作的结果,并允许我们在操作完成后执行相应的操作。 阅读详情

笔者在之前的一片博客中简单的讨论了Python和Javascript的异同,其实作为一种编程语言Javascript的异步编程是一个非常值得讨论的有趣话题。

JavaScript 异步编程简介

回调函数和异步执行

所谓的异步指的是函数的调用并不直接返回执行的结果,而往往是通过回调函数异步的执行。

我们先看看回调函数是什么:

var fn = function(callback) {
    // do something here
    ...
    callback.apply(this, para);
};

var mycallback = function(parameter) {
    // do someting in customer callback
};

// call the fn with callback as parameter
fn(mycallback);


回调函数,其实就是调用用户提供的函数,该函数往往是以参数的形式提供的。回调函数并不一定是异步执行的。比如上述的例子中,回调函数是被同步执行的。大部分语言都支持回调,C++可用通过函数指针或者回调对象,Java一般也是使用回调对象。

在Javascript中有很多通过回调函数来执行的异步调用,例如setTimeout()或者setInterval()。

setTimeout(function(){
    console.log("this will be exectued after 1 second!");
},1000);


在以上的例子中,setTimeout直接返回,匿名函数会在1000毫秒(不一定能保证是1000毫秒)后异步触发并执行,完成打印控制台的操作。也就是说在异步操作的情境下,函数直接返回,把控制权交给回调函数,回调函数会在以后的某一个时间片被调度执行。那么为什么需要异步呢?为什么不能直接在当前函数中完成操作呢?这就需要了解Javascript的线程模型了。

Javascript线程模型和事件驱动

Javascript最初是被设计成在浏览器中辅助提供HTML的交互功能。在浏览器中都包含一个Javascript引擎,Javscript程序就运行在这个引擎之中,并且只有一个线程。单线程能都带来很多优点,程序员们可以很开心的不用去考虑诸如资源同步,死锁等多线程阻塞式编程所需要面对的恼人的问题。但是很多人会问,既然Javascript是单线程的,那它又如何能够异步的执行呢?

这就需要了解到Javascript在浏览器中的事件驱动(event driven)机制。事件驱动一般通过事件循环(event loop)和事件队列(event queue)来实现的。假定浏览器中有一个专门用于事件调度的实例(该实例可以是一个线程,我们可以称之为事件分发线程event dispatch thread),该实例的工作就是一个不结束的循环,从事件队列中取出事件,处理所有很事件关联的回调函数(event handler)。注意回调函数是在Javascript的主线程中运行的,而非事件分发线程中,以保证事件处理不会发生阻塞。

Event Loop Code:

while(true) {
 var event = eventQueue.pop();
 if(event && event.handler) {
     event.handler.execute(); // execute the callback in Javascript thread
 } else {
     sleep(); //sleep some time to release the CPU do other stuff
 }
}


通过事件驱动机制,我们可以想象Javascript的编程模型就是响应一系列的事件,执行对应的回调函数。很多UI框架都采用这样的模型(例如Java Swing)。

那为什要异步呢,同步不是很好么?

异步的主要目的是处理非阻塞,在和HTML交互的过程中,会需要一些IO操作(典型的就是Ajax请求,脚本文件加载),如果这些操作是同步的,就会阻塞其它操作,用户的体验就是页面失去了响应。

综上所述Javascript通过事件驱动机制,在单线程模型下,以异步回调函数的形式来实现非阻塞的IO操作。

Javascript异步编程带来的挑战

Javascript的单线程模型有很多好处,但同时也带来了很多挑战。

代码可读性

想象一下,如果某个操作需要经过多个非阻塞的IO操作,每一个结果都是通过回调,程序有可能会看上去像这个样子。

operation1(function(err, result) {
    operation2(function(err, result) {
        operation3(function(err, result) {
            operation4(function(err, result) {
                operation5(function(err, result) {
                    // do something useful
                })
            })
        })
    })
})


我们称之为意大利面条式(spaghetti)的代码。这样的代码很难维护。这样的情况更多的会发生在server side的情况下。

流程控制

异步带来的另一个问题是流程控制,举个例子,我要访问三个网站的内容,当三个网站的内容都得到后,合并处理,然后发给后台。代码可以这样写:

var urls = ['url1','url2','url3'];
var result = [];

for (var i = 0, len = urls.length(); i < len; i++ ) {
    $.ajax({
        url: urls[i],
        context: document.body,
        success: function(){
          //do something on success
          result.push("one of the request done successfully");
          if (result.length === urls.length()) {
              //do something when all the request is completed successfully
          }
        }});
}


上述代码通过检查result的长度的方式来决定是否所有的请求都处理完成,这是一个很丑陋方法,也很不可靠。

异常和错误处理

通过上一个例子,我们还可以看出,为了使程序更健壮,我们还需要加入异常处理。 在异步的方式下,异常处理分布在不同的回调函数中,我们无法在调用的时候通过try...catch的方式来处理异常, 所以很难做到有效,清楚。

更好的Javascript异步编程方式

“这是最好的时代,也是最糟糕的时代”

为了解决Javascript异步编程带来的问题,很多的开发者做出了不同程度的努力,提供了很多不同的解决方案。然而面对如此众多的方案应该如何选择呢?我们这就来看看都有哪些可供选择的方案吧。

Promise

Promise 对象曾经以多种形式存在于很多语言中。这个词最先由C++工程师用在Xanadu 项目中,Xanadu 项目是Web 应用项目的先驱。随后Promise 被用在E编程语言中,这又激发了Python 开发人员的灵感,将它实现成了Twisted 框架的Deferred 对象。

2007 年,Promise 赶上了JavaScript 大潮,那时Dojo 框架刚从Twisted框架汲取灵感,新增了一个叫做dojo.Deferred 的对象。也就在那个时候,相对成熟的Dojo 框架与初出茅庐的jQuery 框架激烈地争夺着人气和名望。2009 年,Kris Zyp 有感于dojo.Deferred 的影响力提出了CommonJS 之Promises/A 规范。同年,Node.js 首次亮相。

在编程的概念中,future,promise,和delay表示同一个概念。Promise翻译成中文是“承诺”,也就是说给你一个东西,我保证未来能够做到,但现在什么都没有。它用来表示异步操作返回的一个对象,该对象是用来获取未来的执行结果的一个代理,初始值不确定。许多语言都有对Promise的支持。

Promise的核心是它的then方法,我们可以使用这个方法从异步操作中得到返回值,或者是异常。then有两个可选参数(有的实现是三个),分别处理成功和失败的情景。

var promise = doSomethingAync()
promise.then(onFulfilled, onRejected)


异步调用doSomethingAync返回一个Promise对象promise,调用promise的then方法来处理成功和失败。这看上去似乎并没有很大的改进。仍然需要回调。但是和以前的区别在于,首先异步操作有了返回值,虽然该值只是一个对未来的承诺;其次通过使用then,程序员可以有效的控制流程异常处理,决定如何使用这个来自未来的值。

对于嵌套的异步操作,有了Promise的支持,可以写成这样的链式操作:

operation1().then(function (result1) {
    return operation2(result1)
}).then(function (result2) {
    return operation3(result2);
}).then(function (result3) {
    return operation4(result3);
}).then(function (result4) {
    return operation5(result4)
}).then(function (result5) {
    //And so on
});


Promise提供更便捷的流程控制,例如Promise.all()可以解决需要并发的执行若干个异步操作,等所有操作完成后进行处理。

var p1 = async1();
var p2 = async2();
var p3 = async3();
Promise.all([p1,p2,p3]).then(function(){
    // do something when all three asychronized operation finished
});


对于异常处理,

doA()
  .then(doB)
  .then(null,function(error){
      // error handling here
  })


如果doA失败,它的Promise会被拒绝,处理链上的下一个onRejected会被调用,在这个例子中就是匿名函数function(error){}。比起原始的回调方式,不需要在每一步都对异常进行处理。这生了不少事。

以上只是对于Promise概念的简单陈述,Promise拥有许多不同规范建议(A,A+,B,KISS,C,D等),名字(Future,Promise,Defer),和开源实现。大家可以参考一下的这些链接。


如果你有选择困难综合症,面对这么多的开源库不知道如何决断,先不要急,这还只是一部分,还有一些库没有或者不完全采用Promise的概念

Non-Promise

下面列出了其它的一些开源的库,也可以帮助解决Javascript中异步编程所遇到的诸多问题,它们的解决方案各不相同,我这里就不一一介绍了。大家有兴趣可以去看看或者试用一下。

Non-3rd Party

其实,为了解决Javascript异步编程带来的问题,不一定非要使用Promise或者其它的开源库,这些库提供了很好的模式,但是你也可以通过有针对性的设计来解决。

比如,对于层层回调的模式,可以利用消息机制来改写,假定你的系统中已经实现了消息机制,你的code可以写成这样:

eventbus.on("init", function(){
    operationA(function(err,result){
        eventbus.dispatch("ACompleted");
    });
});

eventbus.on("ACompleted", function(){
    operationB(function(err,result){
        eventbus.dispatch("BCompleted");
    });
});

eventbus.on("BCompleted", function(){
    operationC(function(err,result){
        eventbus.dispatch("CCompleted");
    });
});

eventbus.on("CCompleted", function(){
    // do something when all operation completed
});


这样我们就把嵌套的异步调用,改写成了顺序执行的事件处理。

更多的方式,请大家参考这篇文章,它提出了解决异步的五种模式:回调、观察者模式(事件)、消息、Promise和有限状态机(FSM)。

下一代Javscript对异步编程的增强

ECMAScript6

下一代的Javascript标准Harmony,也就是ECMAScript6正在酝酿中,它提出了许多新的语言特性,比如箭头函数、类(Class)、生成器(Generator)、Promise等等。其中Generator和Promise都可以被用于对异步调用的增强。

Nodejs的开发版V0.11已经可以支持ES6的一些新的特性,使用node --harmony命令来运行对ES6的支持。

co、Thunk、Koa

koa是由Express原班人马(主要是TJ)打造,希望提供一个更精简健壮的nodejs框架。koa依赖ES6中的Generator等新特性,所以必须运行在相应的Nodejs版本上。

利用Generator、co、Thunk,可以在Koa中有效的解决Javascript异步调用的各种问题。

co是一个异步流程简化的工具,它利用Generator把一层层嵌套的调用变成同步的写法。

var co = require('co');
var fs = require('fs');

var stat = function(path) {
  return function(cb){
    fs.stat(path,cb);
  }
};

var readFile = function(filename) {
  return function(cb){
    fs.readFile(filename,cb);
  }
};

co(function *() {
  var stat = yield stat('./README.md');
  var content = yield readFile('./README.md');
})();


通过co可以把异步的fs.readFile当成同步一样调用,只需要把异步函数fs.readFile用闭包的方式封装。

利用Thunk可以进一步简化为如下的code, 这里Thunk的作用就是用闭包封装异步函数,返回一个生成函数的函数,供生成器来调用。

var thunkify = require('thunkify');
var co = require('co');
var fs = require('fs');

var stat = thunkify(fs.stat);
var readFile = thunkify(fs.readFile);

co(function *() {
  var stat = yield stat('./README.md');
  var content = yield readFile('./README.md');
})();


利用co可以串行或者并行的执行异步调用。

串行

co(function *() {
  var a = yield request(a);
  var b = yield request(b);
})();


并行

co(function *() {
 var res = yield [request(a), request(b)];
})();


更多详细的内容,大家可以参考这两篇文章1,2。

总结

异步编程带来的问题在客户端Javascript中并不明显,但随着服务器端Javascript越来越广的被使用,大量的异步IO操作使得该问题变得明显。许多不同的方法都可以解决这个问题,本文讨论了一些方法,但并不深入。大家需要根据自己的情况选择一个适于自己的方法。

同时,随着ES6的定义,Javascript的语法变得越来越丰富,更多的功能带来了很多便利,然而原本简洁,单一目的的Javascript变得复杂,也要承担更多的任务。Javascript何去何从,让我们拭目以待。


JavaScript 异步编程:探索 JavaScript 技巧和最佳实践 异步编程是 JavaScript 中一个重要且常见的概念。在处理网络请求、文件操作、定时任务等场景中,异步编程能够有效地提高应用程序的性能和响应能力。本文将深入探讨 JavaScript 异步编程的技巧和最佳实践,并提供相应的源代码示例。 阅读详情

相关推荐

JavaScript异步编程的深入探索

本文详细介绍了JavaScript中的异步编程技术,包括回调函数、基于Promise的异步函数以及异步函数的使用。深入探讨了异步编程在浏览器和Node.js环境下的工作原理,事件循环的概念,以及如何避免阻塞JavaScript进程。此外,文章还介绍了异步结果交付的三种模式:事件、回调函数和Promise。

weixin_33773084的博客 297

推荐一款轻量级JavaScript事件管理库——EventBus

推荐一款轻量级JavaScript事件管理库——EventBus 在JavaScript开发中,事件驱动模型是一种常见的设计模式,它使得组件之间能够以解耦的方式交互。今天,我们要向您推荐一个简单而强大的事件管理库——EventBus。这款库以其小巧的体积和易于使用的API,为您的前端应用提供了一种有效管理事件的方式。 项目介绍 EventBus是一个小型的JavaScript类,用于在JavaSc...

gitblog_00027的博客 761

新手必看:如何用PhaGCN2和vConTACT2搞定宏病毒组注释(附避坑指南)

本文为宏病毒组研究新手提供了使用PhaGCN2和vConTACT2进行病毒注释的完整实战指南。内容涵盖从Conda环境配置、软件安装、参数解析到结果解读的全流程,并重点分享了整合双工具进行交叉验证的策略与常见报错解决方案,旨在帮助研究者高效、准确地完成病毒分类注释工作。

j2k3l4的博客 798

vue去哪儿复习

1.使用vue.js 2.使用组件化修改todo-list 3.生命周期钩子 4.模板语法 5.计算属性 6.直接用方法计算(计算属性有缓存,效率更高) 对象绑定 数组绑定 :style :style 数组 v-if和v-show区别 v-if和v-else必须一起使用 错误使用 加了key值后input就是唯一的 v-for 对象这样直接操作是没有问题的 在根组件中的data是{}格式,但是在自组件中不行 在自组件中的data必须是一个函数,而且还要返回值,因为自组件不会像根

qq_47701723的博客 332

关于AD中如何绘制原理图及其封装

AD中如何绘制原理图及其封装 题记:这是一个比较基础的知识,之所以我打算写一篇这样的笔记,主要是因为在日常生活中,我极少绘制特殊模块或芯片原理图及其封装。久而久之就忘记咋画了,有时需要画封装的时候又想不起来,网上的资料虽然一堆堆的,但往往只是仅原理图的绘制,或者是仅封装的绘制。为此我写一篇这样的笔记,记录绘制原理图及其封装的一条龙服务,感觉这对我而言尤为重要。 本文分为三大板块,依次是原理图的绘制、封装的绘制、二者的联立 第一板块——原理图的绘制 原理图的建立 第二板块——封装的绘制 第三板块——二者的

weixin_51130221的博客 7万+

ctfshow WEB web4

ctfshow WEB web4

weixin_68416970的博客 724

js实现事件总线EventBus

手写EventBus class EventBus { constructor() { this._events = [];//存储自定义事件 } /** * 注册事件和处理函数 * @param event * @param fn */ on(event, fn) { if (Array.isArray(event)) { f...

一袋米要扛几楼_ 8875

K230+canMV开发中常见的数据类型转换参考示例

【代码】K230+canMV开发中常见的数据类型转换参考示例。

weixin_47446386的博客 68

vue.js之路(4)——vue2.0s中eventBus实现兄弟组件通信

在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现。然而在vue2.0中,已经废除了这种用法。 vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择。 然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispa

YuuyaRin的博客 3万+

ESP32-IDF开发之旅 基础篇⑨ ESP-IDF的FreeRTOS任务间通信和同步

本文介绍了FreeRTOS任务间通信中的队列机制,重点讲解了队列的创建、发送和接收数据的API使用方法。文章提供了详细的技术说明和示例代码,包括xQueueCreate、xQueueSend、xQueueReceive等核心函数的参数说明和返回值解释。通过一个2生产者+1消费者的实际案例,展示了如何在ESP-IDF环境下使用FreeRTOS队列实现任务间通信。示例中包含了数据发送失败处理和接收数据验证等实用技巧,为开发者提供了可参考的实现模式。

单片机菜鸟哥的博客 430

Altium Designer(AD24/25)导出DXF或DWG结构文件的方法

DXF(Drawing Exchange Format)和DWG(Drawing)是两种常见的CAD(计算机辅助设计)文件格式,常用于结构和硬件之间的沟通。本文介绍Altium Designer(AD24/25)导出DXF或DWG结构文件的方法。

fydar的博客 2343

[JS]探索JavaScript的异步迭代器解锁现代异步编程的新维度

开发者可以通过实现异步迭代器协议来创建处理特定异步数据源的自定义迭代器。例如,可以从WebSocket连接、分页API或读取大文件中创建异步迭代器,从而以流式方式处理数据。

plxfx1209的博客 259

2026年全国青少年信息素养大赛算法应用主题赛C++样题及答案解析

2026年全国青少年信息素养大赛算法应用主题赛C++样题

王老师青少年编程 3728

探索Promise:JavaScript异步编程的基石

Promise是JavaScript异步编程的强大工具,它通过提供清晰、可控的方式来处理异步操作,极大地改善了JavaScript代码的结构和可维护性。通过掌握Promise的基本概念和使用方法,以及利用async和await简化异步代码的编写,我们可以编写出更加高效、易读的JavaScript代码。在现代Web开发中,理解和运用Promise是不可或缺的技能之一。

everfoot的博客 1458

真正会做事的AI-OpenClaw关联飞书机器人

飞书关联Openclaw,实现AI高效办公

zy_xingdian的博客 220

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

探索async/await的魔力:简化JavaScript异步编程

在JavaScript的世界里,异步编程一直是开发者必须面对的挑战。传统的异步模式,如回调函数、Promise链和链式调用,虽然功能强大,但有时也会使代码变得复杂难懂。幸运的是,`async`和`await`关键字的出现,为我们提供了一种更加直观和简洁的方式来处理异步操作。

interest_ing_的博客 1448

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

《探索现代JavaScript中的异步编程》

JavaScript 作为 Web 开发中最主要的语言之一,提供了多种异步编程的方法来帮助开发者编写高效、可维护的应用程序。本文将介绍几种现代 JavaScript 中常用的异步编程方式,并探讨它们的优缺点。通过在函数中传入另一个函数作为参数,在异步操作完成时执行这个参数函数,可以实现非阻塞的操作。异步编程是现代 JavaScript 中不可或缺的一部分。不同的异步编程方式各有特点,开发者应根据具体场景选择最合适的方案。Promise 是 ES6 中引入的一种用于简化异步编程的新方法。

Envyᥫᩣ的博客 1049

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

探索Monio:JavaScript异步编程的未来之光

在当今快速发展的前端世界里,优雅地处理异步操作和复杂的状态管理成为了工程师们的共同挑战。而**Monio**正是为此应运而生的一项创新解决方案,它以一种强大的新方式拓展了JavaScript函数式编程的边界。 ## 项目介绍 **Monio**,一个听起来宛如未来科技的名字,实则是一个将异步IO能力嵌入到JavaScript中的强大工具包。通过引入易于使用的IO Monad(包括“do”风格)...

gitblog_00808的博客 913

深入探索 JavaScript 中的 Promise:异步编程的未来

在JavaScript的世界里,异步编程一直是核心主题之一。随着ES6(ECMAScript 2015)的引入,Promise 成为了处理异步操作的首选方案,逐渐取代了传统的回调函数和事件监听器。Promise 提供了一种更加优雅和简洁的方式来处理异步任务,使得代码更加易于理解和维护。

前端开发工程师 5844

探索Javascript 异步编程

在我们日常编码中,需要异步的场景很多,比如读取文件内容、获取远程数据、发送数据到服务端等。因为浏览器环境里Javascript是单线程的,所以异步编程在前端领域尤为重要。 异步的概念 所谓异步,是指当一个过程调用发出后,调用者不能立刻得到结果。实际处理这个调用的过程在完成后,通过状态、通知或者回调来通知调用者。 比如我们写这篇文字时点击发布按钮,我们并不能马上得到文章发布成功或者失败。等待服...

weixin_30466421的博客 74

探索Mediator.js:简化异步编程的轻量级工具

探索Mediator.js:简化异步编程的轻量级工具 在现代Web开发中,异步编程是不可或缺的一部分。无论是处理WebSocket回调、Ajax请求还是DOM事件,一个高效的事件管理机制都是至关重要的。今天,我们将深入探讨一个轻量级的JavaScript库——Mediator.js,它通过实现中介者模式,为异步编程提供了一个简洁而强大的解决方案。 项目介绍 Mediator.js是一个轻量级的实用...

gitblog_00527的博客 357

深入探索JavaScript中的Promise:异步编程的艺术与智慧

在JavaScript中,Promise作为一种处理异步操作的强大工具,不仅简化了代码结构,还提升了程序的可读性和可维护性。本文将深入探讨Promise的机制、应用场景以及最佳实践,帮助读者更好地理解和运用这一技术。

zzjnlwb的专栏 470
上一篇: 使用Python进行并发编程
下一篇: Python 与 Javascript 之比较
刚是程序员
博客等级 码龄9年 47粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值