前端解决地狱回调
1. 什么是地狱回调:
函数作为参数层层嵌套,嵌套很多层。
演示地狱回调
var num = function(name,callback){
setTimeout(function(){
console.log(name),
callback();
},2000)
}
num ('one',function(){
num('two',functiom(){
num('three',function(){
num('four',function(){
console.log('end'),
})
})
})
})
2. 什么是回调函数:
一个函数作为参数需要依赖另一个函数执行调用。
3. 解决地狱回调的方法有:
3.1 Promise 对象
//导入文件模块
const fs = require("fs");
function getData(path, datafn, errfn) {
// new Promise()是立即执行构造函数的代码的,构造函数是隐含return的
return new Promise(function() {
fs.readFile(path, "utf8", function(err, data) {
if (err) {
// return console.log(err)
errfn(err.message);
}
// console.log(data)
datafn(data);
});
});
}
getData("./files/1.txt", function (data) {
console.log(data)
}, function (err) {
console.log(err.message)
});
// 相当于下面,只不过是将作为参数的函数用.then方法传到promise实例的函数的形参
function getData(path) {
// new Promise()是立即执行构造函数的代码的,构造函数是隐含return的
return new Promise(function(resolve, reject) {
fs.readFile(path, "utf8", function(err, data) {
if (err) {
// return console.log(err)
reject(err.message);
}
// console.log(data)
resolve(data);
});
});
}
getData("./files/1.txt").then(function(data) {
console.log(data)
// 此时必须再返回一个promise构造函数的实例,也就是翻出去你需要请求的数据调用,这样才能继续用.then
// .then 是promise对象的一个属性
return getData("./files/2.txt");
// 如果报错,可以继续执行后面的代码
}, function(err) {
console.log(err.message)
return getData("./files/2.txt");
}).then(function(data) {
console.log(data);
return getData("./files/3.txt");
}).then(function(data) {
console.log("文本3", data)
});
3.2 Generator 函数
var co = require('co') ;
var sayhello = function (name, ms) {
setT imeout (function (name,ms) {
console.log (name) ;
},ms) ;
var gen = function*() {
yield sayhello ("xiaomi", 2000) ;
console.log('frist') ;
yield sayhello ("huawei", 1000) ;
console.log(' second') ;
yield sayhel lo("apple", 500) ;
console.log('end') ;
co(gen()) ;
}
总结:
如何避免地狱回调:
- 在函数中,要命名规范,见名知意。
- 在函数当中,尽量减少代码量,保持代码简短。
- 尽量不要使用匿名函数。
参考网址:
https://es6.ruanyifeng.com/#docs/generator-async