JS异步编程之callback

superw 发布于2019-08-23 15:15 / 2860人阅读

摘要：而异步则是相反，调用在发出之后，这个调用就直接返回了，所以没有返回结果而是在调用发出后，被调用者通过状态通知来通知调用者，或通过回调函数处理这个调用。总结回调函数是异步编程中的基石，但同时也存在很多问题，不太适合人类自然语言的线性思维习惯。

为什么 JS 是单线程？

众所周知，Javascript 语言的执行环境是"单线程"（single thread）。

所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

而浏览器是多线程的，JS 线程就是其中一个：

浏览器 GUI 渲染线程

JavaScript 引擎线程

浏览器定时触发器线程

浏览器事件触发线程

浏览器 http 异步请求线程

浏览器线程知识中重要的一点是：

GUI渲染进程和 JavaScript 引擎进程是互斥的，因为如果这两个线程可以同时运行的话， JavaScript 的 DOM 操作将会扰乱渲染线程执行渲染前后的数据一致性。而且如果 DOM 一变化，界面就立刻重新渲染，效率必然很低

所以 JS 主线程执行任务时，浏览器渲染线程处于挂起状态。

同理，如果 JS 采用多线程同步的模型，那么如何保证同一时间修改了 DOM, 到底是哪个线程先生效呢？从操作系统调度多线程的上下文开销，到实际编程里的锁、线程同步等问题，都让开发变得比较困难。

所以 JS 最终采用了单线程的事件模型。

我之前的文章《JS专题之事件循环》也有讲过这块内容，欢迎翻阅。

一、同步与异步

单线程模式这种排队执行的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

那同步和异步的区别是什么？

我们想象一个很常见的场景：我们去面馆吃牛肉面，柜台人很多，前面在排队下单。

这个时候，同步就是，收银员收了你的钱，告诉你要在柜台站着等面煮好，煮好后，就端面开吃，后面的人也只能等前面的人面煮好了才能付款下单然后等着面煮好端走~

而异步就是，收银员收了你的钱，然后给了你一张小票，小票上有一个你的编号，收银员告诉你，可以去座位上，你的面一煮好，会大声叫你，你就来端面开吃。

我们可以看出，我们是过程的调用者，面馆是被调用者，牛肉面煮好，是我们想要的结果，同步是调用者需要主动地等待这个结果。异步是被动的等待结果，当被调用者有结果了，就会通过消息机制或者回调机制告诉调用者结果。

同步和异步关注的是消息通信机制，同步就是在发出一个调用时，在没有得到结果之前，该调用就不返回。但是一旦调用返回，就得到返回值了。

而异步则是相反，调用在发出之后，这个调用就直接返回了，所以没有返回结果, 而是在调用发出后，被调用者通过状态、通知来通知调用者，或通过回调函数处理这个调用。

以上：

下单吃面是发起调用函数

端面开吃的回调函数

煮好的面是调用的结果，也是回调函数的参数

将例子抽象成伪代码：

orderNoodle("牛肉面", function(noodle) {
        // 端面
        getNoodle();
        // 吃面
        eatNoodle();
});

三、事件循环

关于事件循环如何执行异步代码可以翻阅前面的文章《JS专题之事件循环》，这里大概提一下。

如果遇到异步事件，JS 引擎会把事件函数压入执行调用栈，但浏览器识别到它是异步事件后，会将其弹出执行栈，当异步函数有返回结果后，JS 引擎将异步事件的回调函数放入事件队列中，如果执行调用栈为空，就将回调函数压入执行调用栈执行。

四、回调函数

在 JavaScript 中，函数 function 作为一等公民，使用上非常自由，无论调用它，或者作为参数，或者作为返回值都可以。

因为单线程异步的特点，后来在 JS 中，慢慢将函数的业务重点转移到了回调函数中。

function step1(cb) {
    console.log("step1");
    cb()
}

function step2(){
    console.log("step2");
}

step1(step2);  // step1  step2

代码会按先后顺序执行 step1, step2。

现在假设我们有这样的需求：请求文件1后，获取文件1 中的数据后请求文件2，获取文件 2 中的数据后，又请求文件三。

var fs = require("fs");

fs.readFile("./file1.json", function(err, data1) {
    fs.readFile("./file2.json", function (err, data2) {
        fs.readFile("./file3.json", function(err, data3) {
            
        })
    })
})

五、回调函数的问题

由第四节可以看出，回调函数的写法存在很多问题。

回调地狱（洋葱模型）

当多个异步事务多级依赖时，回调函数会形成多级的嵌套，被花括号一层层包括，代码变成
金字塔型结构，也被称为回调地狱和洋葱模型。

在回调地狱的情况下，代码逻辑的梳理，流程的控制，代码封装维护，错误处理都变得越来越困难。

异常处理

try...catch 是被设计成捕获当前执行环境的异常，意思是只能捕获同步代码里面的异常，异步调用里面的异常无法捕获。

function readFile(fileName) {
    setTimeout(function () {
      throw new Error("类型错误");
    }, 1000);
}
try {
    readFile("./file1.json");
} catch (e) {
    // 如果异步事件出错，打印不出来错误信息
    console.log("err", e);
}

在 nodejs 对回调函数采用 error first 的思想，回调函数的第一个参数保留给一个错误error对象，如果有错误发生，错误将通过第一个参数err返回。

原因是一个有回调函数的函数，执行分两段，第一段执行完之后，任务所在的上下文环境就已经结束了。在这以后抛出的错误，原来的上下文已经无法捕捉，只能当做参数，传入第二阶段。

fs.readFile("/etc/passwd", "utf8", function (err, data) {
    if(err) {
        console.log(err)
        return;
    }
});

总结

回调函数是 JS 异步编程中的基石，但同时也存在很多问题，不太适合人类自然语言的线性思维习惯。

接下来几篇文章，我将梳理 JS 中异步编程中的历史演进中 Promise, generator, async&await 相关的内容，欢迎关注。

云服务器 GPU云服务器 js异步编程异步编程易语言编程之 python异步编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101762.html

探索Javascript 异步编程

摘要：因为浏览器环境里是单线程的，所以异步编程在前端领域尤为重要。除此之外，它还有两个特性，使它可以作为异步编程的完整解决方案函数体内外的数据交换和错误处理机制。 showImg(https://segmentfault.com/img/bVz9Cy); 在我们日常编码中，需要异步的场景很多，比如读取文件内容、获取远程数据、发送数据到服务端等。因为浏览器环境里Javascript是单线程的，...

Salamander 2019-08-22 10:35 评论0 收藏0
ES6&ES7中的异步之Generator函数与异步编程

摘要：传统的异步方法回调函数事件监听发布订阅之前写过一篇关于的文章，里边写过关于异步的一些概念。内部函数就是的回调函数，函数首先把函数的指针指向函数的下一步方法，如果没有，就把函数传给函数属性，否则直接退出。 Generator函数与异步编程因为js是单线程语言，所以需要异步编程的存在，要不效率太低会卡死。传统的异步方法回调函数事件监听发布/订阅 Promise 之前写过一篇关...

venmos 2019-08-21 17:01 评论0 收藏0
javascript -- 回调函数之美

javascript -- 回调函数在高级语言层出不穷的年代, 各个语言都号称有着一切皆为对象的自豪说法, 而 js 作为一门脚本语言却相对于java等传统面向对象语言有很大的不同之处, 除了 js 诡异的继承体系之外, 最令人着迷的一个特性就是回调函数, 当然也有很多人对他诟病, 笔者认为回调函数和异步是js语言特性的两大最为突出的店, 当然正如所有优点需要满足自我的需求, 这个世界...

kbyyd24 2019-08-26 11:38 评论0 收藏0
JavaScript 异步编程之 jsdeferred 原理解析

摘要：异步编程是编写的一个很重要的理念，特别是在处理复杂应用的时候，异步编程的技巧就至关重要。那么下面就来看看这个被称为里程碑式的异步编程库吧。 1. 前言最近在看司徒正美的《JavaScript框架设计》，看到异步编程的那一章介绍了jsdeferred这个库，觉得很有意思，花了几天的时间研究了一下代码，在此做一下分享。异步编程是编写js的一个很重要的理念，特别是在处理复杂应用的时候，异...

LuDongWei 2019-08-22 10:39 评论0 收藏0
Javascript异步编程 - 函数式编程 - Javascript核心

摘要：不少第三方模块并没有做到异步调用，却装作支持回调，堆栈的风险就更大。我们可以编写一个高阶函数，让传入的函数顺序执行还是我们之前的例子看起来还是很不错的，简洁并且清晰，最终的代码量也没有增加。原文： http://pij.robinqu.me/JavaScript_Core/Functional_JavaScript/Async_Programing_In_JavaScript....

hlcc 2019-08-19 14:50 评论0 收藏0