本文详细解析JavaScript中同步、并行与异步的本质区别，通过Node.js文件操作示例演示异步函数的执行机制。重点讲解基于回调的异步编程模式，包括回调函数的定义、嵌套使用及错误处理约定，并深入剖析“回调地狱”现象的成因及其对代码可读性的影响，为后续引入Promise等解决方案奠定基础。
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的小伙伴深入了解。
- 异步、并行、同步的基本概念；
- 使用回调函数处理异步任务；
- 回调函数的嵌套和约定；
- 回调地狱的基本概念；
到此这篇关于JavaScript中异步与回调的基本概念，以及回调地狱现象的文章就介绍到这了,更多相关js异步回调地狱内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！