자바스크립트의 비동기식과 콜백의 기본 개념과 콜백 지옥 현상

이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 JavaScript의 비동기 및 콜백 개념과 콜백 지옥 현상을 소개합니다. 이 글은 주로 비동기와 콜백의 기본 개념을 소개합니다. JavaScript의 핵심 내용을 함께 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end】

JavaScript 비동기 및 콜백

1. 서문

이 글의 내용을 배우기 전에 먼저 다음 내용을 이해해야 합니다. 비동기의 개념, 가장 먼저 강조해야 할 점은 비동기성과 병렬성에는 본질적인 차이가 있다는 것입니다.

• 병렬은 일반적으로 병렬 컴퓨팅을 의미하며, 이는 여러 명령어가 동시에 실행된다는 의미입니다. 이러한 명령어는 동일한 CPU의 여러 코어 또는 여러 CPU 여러 물리적 호스트 또는 여러 네트워크에 있습니다.
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:CodeNodedemos3-callback> node .index.js
finished
Copy finished
PS E:CodeNodedemos3-callback> node .index.js
错误：ENOENT: no such file or directory, open 'E:CodeNodedemos3-callbackto.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동기화는 일반적으로 이전 작업이 완료되어야 다음 작업이 실행되는 미리 정해진 순서에 따라 작업을 실행하는 것을 의미합니다.

비동기식, 동기화에 해당하는 비동기식은 CPU가 현재 작업을 일시적으로 보류하고 다음 작업을 먼저 처리한 다음 콜백 알림을 받은 후 이전 작업으로 돌아가는 것을 의미합니다. 이전 작업은 계속 실행되며 전체 프로세스에는 두 번째 스레드의 참여가 필요하지 않습니다. 🎜병렬성, 동기화 및 비동기성을 설명하기 위해 그림을 사용하는 것이 더 직관적일 수 있습니다. 처리해야 하는 두 가지 작업 A와 B가 있다고 가정하면 병렬, 동기 및 비동기 처리 방법이 됩니다. 다음과 같이 표시되는 실행 방법: 🎜

🎜🎜🎜 2. 비동기 함수 🎜🎜🎜JavaScript는 비동기 작업을 편리하게 수행할 수 있는 다양한 비동기 함수를 제공합니다. 즉, 이제 시작합니다. 실행 작업(기능)이지만 작업은 나중에 완료되며 구체적인 완료 시간은 명확하지 않습니다. 🎜🎜예를 들어 setTimeout 함수는 매우 일반적인 비동기 함수입니다. 또한 fs.readFile 및 fs.writeFile도 비동기 함수입니다. . 🎜🎜우리는 비동기 작업 사례를 직접 정의할 수 있습니다. 예를 들어 파일 복사 함수 copyFile(from,to)를 사용자 정의할 수 있습니다. 🎜

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())
    })
})

🎜함수 copyFile는 먼저 from 매개변수는 파일 데이터를 읽은 다음 to 매개변수가 가리키는 파일에 데이터를 씁니다. 🎜🎜다음과 같이 copyFile을 호출할 수 있습니다: 🎜

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)=>{//第三次回调
            ...
        })
    })
})

🎜이 시점에서 copyFile(...) 뒤에 다른 코드가 있는 경우 프로그램은 copyFile의 실행은 종료되지만 바로 아래로 실행됩니다. 프로그램은 파일 복사 작업이 언제 끝나는지 상관하지 않습니다. 🎜

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
                }
                ...
            })
        })
    })
})

🎜지금까지는 모든 것이 정상인 것처럼 보이지만, copyFile(...) 함수 다음에 ./to.txt</code 파일에 직접 접근하면 어떻게 될까요? >?의 내용에 🎜🎜다음과 같이 복사된 내용을 읽지 않습니다. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>fs.readFile(&amp;#39;a.txt&amp;#39;,(err,data)=&gt;{ fs.readFile(&amp;#39;b.txt&amp;#39;,(err,data)=&gt;{ fs.readFile(&amp;#39;c.txt&amp;#39;,(err,data)=&gt;{ fs.readFile(&amp;#39;d.txt&amp;#39;,(err,data)=&gt;{ fs.readFile(&amp;#39;e.txt&amp;#39;,(err,data)=&gt;{ fs.readFile(&amp;#39;f.txt&amp;#39;,(err,data)=&gt;{ fs.readFile(&amp;#39;g.txt&amp;#39;,(err,data)=&gt;{ fs.readFile(&amp;#39;h.txt&amp;#39;,(err,data)=&gt;{ ... /* 通往地狱的大门 ===&gt; */ }) }) }) }) }) }) }) })</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>🎜프로그램을 실행하기 전에 <code>./to.txt 파일이 생성되지 않은 경우 다음 오류가 발생합니다. 🎜< blockquote >🎜PS E:CodeNodedemos

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视频教程、web前端】

위 내용은 자바스크립트의 비동기식과 콜백의 기본 개념과 콜백 지옥 현상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!