38.JavaScript中异步与回调的基本概念,以及回调地狱现象
- 《JavaScript再出发》系列文章阅读
- 《仙宗》发布招仙贴,广招天下道友
文章目录
- JavaScript异步与回调
- 一、前言
- 二、异步函数
- 三、回调函数
- 四、回调的回调
- 五、回调地狱
- 六、总结
JavaScript异步与回调
一、前言
在学习本文内容之前,我们必须要先了解异步的概念,首先要强调的是异步和并行有着本质的区别。
并行,一般指并行计算,是说同一时刻有多条指令同时被执行,这些指令可能执行于同一
CPU
的多核上,或者多个CPU
上,或者多个物理主机甚至多个网络中。同步,一般指按照预定的顺序依次执行任务,只有当上一个任务完成后,才开始执行下一个任务。
异步,与同步相对应,异步指的是让
CPU
暂时搁置当前任务,先处理下一个任务,当收到上个任务的回调通知后,再返回上个任务继续执行,整个过程无需第二个线程参与。
也许用图片的方式解释并行、同步和异步更为直观,假设现在有A、B两个任务需要处理,使用并行、同步和异步的处理方式会分别采用如下图所示的执行方式:
二、异步函数
JavaScript
为我们提供了许多异步的函数,这些函数允许我们方便的执行异步任务,也就是说,我们现在开始执行一个任务(函数),但任务会在稍后完成,具体完成时间并不清楚。
例如,setTimeout
函数就是一个非常典型的异步函数,此外,fs.readFile
、fs.writeFile
同样也是异步函数。
我们可以自己定义一个异步任务的案例,例如自定义一个文件复制函数copyFile(from,to)
:
const fs = require('fs')function copyFile(from, to) {fs.readFile(from, (err, data) => {if (err) {console.log(err.message)return}fs.writeFile(to, data, (err) => {if (err) {console.log(err.message)return}console.log('Copy finished')})})
}
函数copyFile
首先从参数from
读取文件数据,随后将数据写入参数to
指向的文件。
我们可以像这样调用copyFile
:
copyFile('./from.txt','./to.txt')//复制文件
如果这个时候,copyFile(...)
后面还有其他代码,那么程序不会等待copyFile
执行结束,而是直接向下执行,文件复制任务何时结束,程序并不关心。
copyFile('./from.txt','./to.txt')
//下面的代码不会等待上面的代码执行结束
...
执行到这里,好像一切还都是正常的,但是,如果我们在copyFile(...)
函数后,直接访问文件./to.txt
中的内容会发生什么呢?
这将不会读到复制过来的内容,就行这样:
copyFile('./from.txt','./to.txt')
fs.readFile('./to.txt',(err,data)=>{...
})
如果在执行程序之前,./to.txt
文件还没有创建,将得到如下错误:
PS E:\Code\Node\demos\03-callback> node .\index.js
finished
Copy finished
PS E:\Code\Node\demos\03-callback> node .\index.js
错误:ENOENT: no such file or directory, open 'E:\Code\Node\demos\03-callback\to.txt'
Copy finished
即使./to.txt
存在,也无法读取其中复制的内容。
造成这种现象的原因是:copyFile(...)
是异步执行的,程序执行到copyFile(...)
函数后,并不会等待其复制完毕,而是直接向下执行,从而导致出现文件./to.txt
不存在的错误,或者文件内容为空错误(如果提前创建文件)。
三、回调函数
异步函数的具体执行结束的时间是不能确定的,例如readFile(from,to)
函数的执行结束时间大概率取决于文件from
的大小。
那么,问题在于我们如何才能准确的定位copyFile
执行结束,从而读取to
文件中的内容呢?
这就需要使用回调函数,我们可以修改copyFile
函数如下:
function copyFile(from, to, callback) {fs.readFile(from, (err, data) => {if (err) {console.log(err.message)return}fs.writeFile(to, data, (err) => {if (err) {console.log(err.message)return}console.log('Copy finished')callback()//当复制操作完成后调用回调函数})})
}
这样,我们如果需要在文件复制完成后,立即执行一些操作,就可以把这些操作写入回调函数中:
function copyFile(from, to, callback) {fs.readFile(from, (err, data) => {if (err) {console.log(err.message)return}fs.writeFile(to, data, (err) => {if (err) {console.log(err.message)return}console.log('Copy finished')callback()//当复制操作完成后调用回调函数})})
}copyFile('./from.txt', './to.txt', function () {//传入一个回调函数,读取“to.txt”文件中的内容并输出fs.readFile('./to.txt', (err, data) => {if (err) {console.log(err.message)return}console.log(data.toString())})
})
如果,你已经准备好了./from.txt
文件,那么以上代码就可以直接运行:
PS E:\Code\Node\demos\03-callback> node .\index.js
Copy finished
加入社区“仙宗”,和我一起修仙吧
社区地址:http://t.csdn.cn/EKf1h
这种编程方式被称为“基于回调”的异步编程风格,异步执行的函数应当提供一个回调参数用于在任务结束后调用。
这种风格在JavaScript
编程中普遍存在,例如文件读取函数fs.readFile
、fs.writeFile
都是异步函数。
四、回调的回调
回调函数可以准确的在异步工作完成后处理后继事宜,如果我们需要依次执行多个异步操作,就需要嵌套回调函数。
案例场景:依次读取文件A和文件B
代码实现:
fs.readFile('./A.txt', (err, data) => {if (err) {console.log(err.message)return}console.log('读取文件A:' + data.toString())fs.readFile('./B.txt', (err, data) => {if (err) {console.log(err.message)return}console.log("读取文件B:" + data.toString())})
})
执行效果:
PS E:\Code\Node\demos\03-callback> node .\index.js
读取文件A:仙宗无限好,只是缺了佬读取文件B:要想入仙宗,链接不能少
http://t.csdn.cn/H1faI
通过回调的方式,就可以在读取文件A之后,紧接着读取文件B。
如果我们还想在文件B之后,继续读取文件C呢?这就需要继续嵌套回调:
fs.readFile('./A.txt', (err, data) => {//第一次回调if (err) {console.log(err.message)return}console.log('读取文件A:' + data.toString())fs.readFile('./B.txt', (err, data) => {//第二次回调if (err) {console.log(err.message)return}console.log("读取文件B:" + data.toString())fs.readFile('./C.txt',(err,data)=>{//第三次回调...})})
})
也就是说,如果我们想要依次执行多个异步操作,需要多层嵌套回调,这在层数较少时是行之有效的,但是当嵌套次数过多时,会出现一些问题。
回调的约定
实际上,fs.readFile
中的回调函数的样式并非个例,而是JavaScript
中的普遍约定。我们日后会自定义大量的回调函数,也需要遵守这种约定,形成良好的编码习惯。
约定是:
callback
的第一个参数是为 error 而保留的。一旦出现 error,callback(err)
就会被调用。- 第二个以及后面的参数用于接收异步操作的成功结果。此时
callback(null, result1, result2,...)
就会被调用。
基于以上约定,一个回调函数拥有错误处理和结果接收两个功能,例如fs.readFile('...',(err,data)=>{})
的回调函数就遵循了这种约定。
五、回调地狱
如果我们不深究的话,基于回调的异步方法处理似乎是相当完美的处理方式。问题在于,如果我们有一个接一个 的异步行为,那么代码就会变成这样:
fs.readFile('./a.txt',(err,data)=>{if(err){console.log(err.message)return}//读取结果操作fs.readFile('./b.txt',(err,data)=>{if(err){console.log(err.message)return}//读取结果操作fs.readFile('./c.txt',(err,data)=>{if(err){console.log(err.message)return}//读取结果操作fs.readFile('./d.txt',(err,data)=>{if(err){console.log(err.message)return}...})})})
})
以上代码的执行内容是:
- 读取文件a.txt,如果没有发生错误的话;
- 读取文件b.txt,如果没有发生错误的话;
- 读取文件c.txt,如果没有发生错误的话;
- 读取文件d.txt,…
随着调用的增加,代码嵌套层级越来越深,包含越来越多的条件语句,从而形成不断向右缩进的混乱代码,难以阅读和维护。
我们称这种不断向右增长(向右缩进)的现象为“回调地狱”或者“末日金字塔”!
fs.readFile('a.txt',(err,data)=>{fs.readFile('b.txt',(err,data)=>{fs.readFile('c.txt',(err,data)=>{fs.readFile('d.txt',(err,data)=>{fs.readFile('e.txt',(err,data)=>{fs.readFile('f.txt',(err,data)=>{fs.readFile('g.txt',(err,data)=>{fs.readFile('h.txt',(err,data)=>{.../*通往地狱的大门===>*/})})})})})})})
})
虽然以上代码看起来相当规整,但是这只是用于举例的理想场面,通常业务逻辑中会有大量的条件语句、数据处理操作等代码,从而打乱当前美好的秩序,让代码变的难以维护。
幸运的是,JavaScript
为我们提供了多种解决途径,Promise
就是其中的最优解。
(原谅我卖了一个关子,这篇文章太长了,下篇继续讲)
六、总结
本文主要介绍了异步和回调的基本概念,二者是JavaScript
的核心内容,需要所有热爱JS
的小伙伴深入了解。
- 异步、并行、同步的基本概念;
- 使用回调函数处理异步任务;
- 回调函数的嵌套和约定;
- 回调地狱的基本概念;
38.JavaScript中异步与回调的基本概念,以及回调地狱现象相关推荐
- JavaScript中异步/等待的用法和理解
昨天更新的是"JavaScript中的Promise使用详解",其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出.今天就说一说"JavaS ...
- 在JavaScript中没有二维数组的概念
在编写WebClinet端脚本时有时需要用到数组进行操作,javascript中声明数组的语法为 Dim 变量 = new Array(); 需要注意的是,在javascript中没有二维数组的概念, ...
- 38 JavaScript中的this指向问题
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.函数内this指向问题 函数内部的this指向是当我们调用函数的时候确定的.调用方式的 ...
- JavaScript中的引用函数、调用函数和回调函数
引用函数与调用函数的区别 引用函数与调用函数的差别与函数名称后是否附有括号()有关.函数引用只会单独出现,但函数调用则必定后随括号,很多时候还附有自变量. 举个例子 // 函数引用 代码一 funct ...
- php event loop,理解javascript中的事件循环(Event Loop)
背景 在研究js的异步的实现方式的时候,发现了JavaScript 中的 macrotask 和 microtask 的概念.在查阅了一番资料之后,对其中的执行机制有所了解,下面整理出来,希望可以帮助 ...
- [ Javascript ] JavaScript中的定时器(Timer) 是怎样工作的!
作为入门者来说.了解JavaScript中timer的工作方式是非常重要的.通常它们的表现行为并非那么地直观,而这是由于它们都处在一个单一线程中.让我们先来看一看三个用来创建以及操作timer的函数. ...
- Javascript 中的 Function对象
在 js 中 函数 Function(大写) 就是一个对象.在 javascript 中没有函数 reload (重载)的概念. 我们看下面这个,结果应该是什么呢? <html><h ...
- 以及其任何超类对此上下文都是未知的_web前端入门到实战:Javascript 中的「上下文」你只需要看这一篇
正文 上下文 是Javascript 中的一个比较重要的概念, 可能很多朋友对这个概念并不是很熟悉, 那换成「作用域」 和 「闭包」呢?是不是就很亲切了. 「作用域」和「闭包」 都是和「执行上下文」密 ...
- Javascript中类型的判断
数据类型的判断有这么几种方式 1.一元运算符 typeOf 2.关系运算符 instanceof 3.constructor 属性 4.prototype属性 一.typeof typeof的返回值有 ...
- 理解JavaScript中的原型与原型链
理解JavaScript中的原型与原型链 原型链是一种机制,指的是JavaScript中每个内置的对象都有一个内置的__proto__属性指向创建它的构造函数的prototype(原型)属性.原型链的 ...
最新文章
- large_IPYi_09ef000018c21215
- 编程笔试(解析及代码实现):求出一个整数中各位数上所包含全部质数之和
- 算法训练 出现次数最多的整数
- MySQL/MariaDB Tips
- 论《LEFT JOIN条件放ON和WHERE后的区别》
- python全局变量一般没有缩进_python全局变量与局部变量
- Git 工具之TortoiseGit小乌龟安装配置及使用
- PostgreSQL13.1-CN-v1.0中文手册.chm下载
- 光盘文件格式-udf、iso9660、Joliet、Romeo
- 小波变换复习 (Review on Wavelet Transform)
- IT人物——冯诺依曼
- android 应用自启管理
- 编译原理:代码生成(pcode),C语言实现
- 迪文T5-T5L使用测试笔记1
- XTU OJ 1375 Fibonacci
- excel表格换行快捷键_常州办公excel表格常用技巧, 办公软件常用快捷键【金坛吧】...
- Win10系统文件备份方法汇总
- 装机之 BIOS、EFI与UEFI详解
- 微信小程序 初学——【音乐播放器】
- Docker搭建公司内部私有云平台 -- Gitlab