什么是回调地狱?(代码执行顺序的一种操作(解决异步))
回调地狱的概念:回调函数里面嵌套回调函数。
//地狱回调
setTimeout(function () { //第一层
console.log('111');//等3秒打印111在执行下一个回调函数
setTimeout(function () { //第二层
console.log('222');//等2秒打印222在执行下一个回调函数
setTimeout(function () { //第三层
console.log('333');//等一秒打印333
}, 1000)
}, 2000)
}, 3000)
执行结果:
解决回调地狱的方法:
方法一:使用promise链式调用
//promise解决
function fn(str) {
var promise = new Promise(function (success, error) { //success 是成功的方法 error是失败的方法
//处理异步任务
var flag = true;
setTimeout(function () {
if (flag) {
success(str)
}
else {
error('失败')
}
})
})
return promise;
}
fn('111')
.then((res) => { //then是成功执行的方法 返回的还是一个promise对象
console.log(res);//打印111 res是执行
return fn('222');
})
.then((res) => {
console.log(res);
return fn('333')
})
.then((res) => {
console.log(res);
})
.catch((res) => { //catch是失败执行的方法
console.log(res);
})
执行结果:可以看到还是会嵌套,存在回调函数,不是最完美的解决方法
方法二:使用 async/await 终极解决方案(无回调函数,同步执行)
//1.封装一个返回promise的异步任务
function fn(str) {
var promise = new Promise(function (success, error) {
var flag = true;
setTimeout(function () {
if (flag) {
success(str)
} else {
error('处理失败')
}
})
})
return promise;
}
//2.封装一个执行上述异步任务的async函数
async function test() {
try{
var res1 = await fn('111'); //await直接拿到fn()返回的promise的数据,并且赋值给res
var res2 = await fn('222');
var res3 = await fn('333');
console.log(res1);
console.log(res2);
console.log(res3);
} catch(error){
console.log("抛出异常错误: "+error);
}
}
//3.执行函数
test();