回调地狱
- 回调函数
- 匿名函数
回调函数
什么是回调函数？
一个函数，作为参数的形式传给另一个函数调用，那么这个这个函数就叫做回调函数。 当然回调函数很常见，如下
let array = [{ name: 'bob' }, { name: 'cindy' }, { name: 'linda' }]
array.map((item, index) => {
console.log(item.name, index)
})我们常用的map方法中传入的参数就是一个回调函数。 当然还有forEach()方法等...
我们再看一个例子
/**
getData接收两个参数，一个是数据对象 另一个是函数logName。在getData函数内部调用传入的函数
并把option参数再作为参数传给logName
**/
let allUserName = []
function logName(data) {
console.log(data)
}
// 此处的callback也就是logName函数
function getData(options, callback) {
allUserName.push(options)
console.log(allUserName)
callback(options) // 回调函数
}
getData({ name1: "Russ", name2: "Harden" }, logName)匿名函数
在map中我们传入的函数为什么没有名字？那么就引出了匿名函数。
array.map((item, index) => {
console.log(item.name, index)
})匿名函数就是没有名字的函数。
如下当我们声明一个如下的匿名函数时是会报错的
function (){
console.log("张培跃");
}但是声明一个箭头函数形式的匿名函数是不会报错的
(a) => {
console.log(a)
}那么对于普通函数的声明的匿名函数报错怎么办？用()包起来。当然最好箭头函数也用()包起来
(function (){
console.log("aaa");
})立即执行
(function (){
console.log("张培跃");
})()
// 也可以传递参数
(function (a){
console.log(a);
})('aa') 回调地狱
好比省市区，我先拿到了省，然后我根据省去请求市、然后根据市去请求地区。这就需要嵌套三层。
ajax1(url,(res)=>{
ajax2(res.url,(res1)=>{
ajax3(res.url,(res2)=>{
console,log(res2)
})
})
})回调地狱也就是出现了多层的嵌套。
还有一个恰当的比喻，妈妈让我做家务。先洗衣服需要3分钟、然后拖地2分钟、整理桌子1分钟、浇花1分钟...
//我们这里用 秒模仿一分钟
function washCloth(fn){
// 无论我们fn传入什么这里是写死的fn('洗衣服')
setTimeout(()=>{
fn('洗衣服')
},3000)
}
function mopFloor(fn){
setTimeout(()=>{
fn('拖地')
},2000)
}
function desk(fn){
setTimeout(()=>{
fn('整理桌子')
},1000)
}
function washFlower(fn){
setTimeout(()=>{
fn('浇花')
},1000)
}
// 先执行洗衣服的函数
washCloth(function(data1){
console.log(data1)
// 执行完洗衣服 我们拖地
mopFloor(function(data2){
console.log(data2)
desk(function(data3){
console.log(data3)
washFlower(function(data4){
console.log(data1,data2,data3,data4)
})
})
})
})
// 洗衣服 3s
// 拖地 3s + 2s
// 整理桌子 3s + 2s + 1s
// 洗衣服 拖地 整理桌子 浇花 3s+2s+1s+1s 如果还有其他家务，我们就需要一层一层的嵌套。这会影响到代码的可读性和维护。
怎么解决回调地狱我们下一篇文章再去了解
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-02-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录