本篇文章给大家带来了关于javascript的相关知识,主要介绍了JavaScript中异步与回调的基本概念,以及回调地狱现象,本文主要介绍了异步和回调的基本概念,二者是JavaScript的核心内容,下面一起来看依稀啊,希望对大 ...
本篇文章给大家带来了关于javascript的相关知识,主要介绍了JavaScript中异步与回调的基本概念,以及回调地狱现象,本文主要介绍了异步和回调的基本概念,二者是JavaScript的核心内容,下面一起来看依稀啊,希望对大家有帮助。 【相关推荐:javascript视频教程、web前端】 JavaScript异步与回调一、前言在学习本文内容之前,我们必须要先了解异步的概念,首先要强调的是异步和并行有着本质的区别。
也许用图片的方式解释并行、同步和异步更为直观,假设现在有A、B两个任务需要处理,使用并行、同步和异步的处理方式会分别采用如下图所示的执行方式: 二、异步函数
例如, 我们可以自己定义一个异步任务的案例,例如自定义一个文件复制函数 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.txt','./to.txt')//复制文件 如果这个时候, copyFile('./from.txt','./to.txt') //下面的代码不会等待上面的代码执行结束 ... 执行到这里,好像一切还都是正常的,但是,如果我们在 这将不会读到复制过来的内容,就行这样: copyFile('./from.txt','./to.txt') fs.readFile('./to.txt',(err,data)=>{ ... }) 如果在执行程序之前,
即使 造成这种现象的原因是: 三、回调函数异步函数的具体执行结束的时间是不能确定的,例如 那么,问题在于我们如何才能准确的定位 这就需要使用回调函数,我们可以修改 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()) }) }) 如果,你已经准备好了
这种编程方式被称为“基于回调”的异步编程风格,异步执行的函数应当提供一个回调参数用于在任务结束后调用。 这种风格在 四、回调的回调回调函数可以准确的在异步工作完成后处理后继事宜,如果我们需要依次执行多个异步操作,就需要嵌套回调函数。 案例场景:依次读取文件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()) }) }) 执行效果:
通过回调的方式,就可以在读取文件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('./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 } ... }) }) }) }) 以上代码的执行内容是:
随着调用的增加,代码嵌套层级越来越深,包含越来越多的条件语句,从而形成不断向右缩进的混乱代码,难以阅读和维护。 我们称这种不断向右增长(向右缩进)的现象为“回调地狱”或者“末日金字塔”! 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视频教程、web前端】 以上就是JavaScript中异步与回调的基本概念及回调地狱现象的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章! |