如何解决回调地狱问题

经过前面的学习我们已经了解了目前JS中常用的异步编程方式，如Promise、Generator、async/await,本文将通过以上方式来解决回调地狱问题。

回顾一下异步编程的方式，早些年为了实现JS的异步编程，一般都采用回调函数的方式，比较典型的是事件的回调，但是使用回调函数来实现存在一个很常见的问题，那就是回调地狱。

1. 什么是回调地狱

异步任务中回调函数的层层嵌套，随着嵌套的层数增加，代码的可读性和维护性变差，常见的回调函数比如在setTimeout中，以函数作为参数进行调用。

fs.redFile(A,'UTF-8',function(err,data){// 第一层fs.redFile(B,'UTF-8',function(err,data){// 第二层fs.redFile(C,'UTF-8',function(err,data){// 第三层fs.redFile(D,'UTF-8',function(err,data){// ......})})})
})

利用回调函数实现异步编程的场景有很多，如下：

ajax请求回调
定时器中的回调
事件回调
Nodejs中的回调

接下来，讨论如何解决回调地狱的问题

2. 回调地狱的解决

2.1.1 promise初级版本

function read(url){return new Promise((resolve, reject) => {fs.readFil(url, 'UTF-8',(err, data)=>{if(err){reject(err)}else{resolve(data)}      })})
}
read(A).then(data=>{return read(B)
}).then(data=>{return read(C)
}).then(data=>{return read(D)
}).catch(reason=>{console.log(reason);
})

这样写的方法相比于回调函数的可读性是增加了，接下来用Promise的API，all方法进行实现

2.1.2 Promise进阶版本

function read(url){return new Promise((resolve,reject)=>{// 待执行的异步函数fs.readFil(url,'UTF-8',(err,data)=>{if(err){reject(err)}else{resolve(data)}})})
}
Promise.all([read(A),read(B),read(C),read(D)]).then(data=>{console.log(data);
}).catch(err=>{console.log(err);
})

相比于上面的方式，用all方法看起来更加地简洁。

2.2 Generator

为什么第一次传递的参数无效呢？

function * gen(){let a = yield 111;console.log(a);let b = yield 222;console.log(b);let c = yield 333;console.log(c);
}
let t = gen()
console.log(t.next(1)); // 第一次传递参数无效，无打印结果
console.log(t.next(2));
console.log(t.next(3));
console.log(t.next(4));

2.3 async/await

代码清晰，异步代码看起来像同步一样。

function teastWait(){return new Promise((resolve, reject)=>{setTimeout(function(){console.log("testWait");resolve()}, 1000);})
}async function testAwaitUse(){await teastWait()console.log("hello");return 123
}
console.log(testAwaitUse());
// 猜测打印顺序
// hello，testWait无await情况下；存在则先打印testwait，hello

3. 总结

如何解决回调地狱问题相关推荐

什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？
什么是回调函数?回调函数有什么缺点?如何解决回调地狱问题? 参考文章: (1)什么是回调函数?回调函数有什么缺点?如何解决回调地狱问题? (2)https://www.cnblogs.com/kzxi ...
Promise使用，return的运用，解决回调地狱
Promise使用,return的运用,解决回调地狱回调地狱 httpBookModel.getHotList().then((res) => {console.log(res)httpBoo ...
Promise解决回调地狱写法
这里可以使用Promise来解决回调地狱的问题! 那么我们这里有一个需求,就是我们需要读取三个 .txt 文件,需要第一个文件读取完成后才能读取第二个文件以此类推. 那么这里来一个Promise的错误 ...
Promise(解决回调地狱)
Promise() 对象: 存在三种状态: //进行时 pending// 成功 resolve//失败 reject 执行语句: let promise= new Promise((resolve, ...
ES6----promise方法解决回调地狱问题
ES6–promise方法解决回调地狱问题要解决回调地狱问题,首先要了解回调地狱的产生是由于早期的javascript只支持回调函数来表现异步操作完成,由于业务逻辑复杂时,就会出现一个串联多个异步操 ...
promise解决回调地狱（callback hell）
promise解决回调地狱(callback hell) 具体参考阮一峰,ES6标准入门在我们需要对一个异步操作进行频繁的调用的时候,且要保证一步操作的顺序,可能会出现回调地狱(callback ...
Promise的基础使用与生成器配合Promise解决回调地狱
经过几天对Promise的了解,希望可以帮助到大家. 什么是回调地狱说起回调地狱首先想到的是异步在js中我们经常会大量使用异步回调,常用的ajxa请求来看下面这段代码: fun ...
回调地狱的产生，以及如何解决回调地狱
前言在了解回调地狱之前,我们先来了解两个概念: 1. 回调函数当一个函数作为参数传入另一个参数中,并且它不会立即执行,只有当满足一定条件后该函数才可以执行,这种函数就称为回调函数.我们熟悉的定时器 ...
promise解决回调地狱的问题
什么是回调地狱怎么解决回调地狱的问题要了解什么是回调地狱,首先要了解什么是同步,什么是异步函数同步函数:当一个函数是同步执行时,那么当该函数被调用时不会立即返回,直到该函数要做的事情全部做完之 ...
解决回调地狱终极方法 - ES7新增 - async 和 await
概念: ES7 新增的专门配合 promise封装函数一起执行的程序 async: - 关键字 - 异步的 await: - 关键字 - 等待作用: 让异步程序按照顺序一个一个的执行也是 ...

如何解决回调地狱问题

1. 什么是回调地狱

2. 回调地狱的解决

3. 总结

如何解决回调地狱问题相关推荐

最新文章

热门文章