回调地狱问题
是发生在,后面每一个函数执行,都要等待前面一个完成,才能继续下去
即,函数1–函数2–函数3–,一个个按顺序执行,函数2要等函数1完成,才能开始
但是,js是一起执行的,才不会等你呢,这要怎么办呢?
回调可以解决:但会出现回调地狱,就像下面一样:
一层一层嵌套,好恶心,哈哈
解决方法2:用jquery的Deferred函数,能比较好解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./jquery.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
hello world!-好的asdfasdf 12323
<p style="font-family: sans-serif;">上传失败</p>
<p id="time"></p>
<script>
document.getElementById('time').innerHTML = Date.now();
$().ready(async () => {
console.error('jquery加载完成:', $)
var requestFun = function(obj){
let {type,url,data} = obj
var dtd = $.Deferred();
$.ajax({
type,
url,
data,
dataType: "json",
success: function(data){
console.error('success:',data);
dtd.resolve(data)
},
error: function(data){
console.error('error:',data);
dtd.reject(data)
}
});
return dtd.promise();
}
// 参考连接 https://blog.csdn.net/weixin_34106122/article/details/92575433
var fun1 = function () {
var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
// 请求后台
let obj={
type: 'get',
url: '/one',
data: {name: 'tom',age: 12},
}
requestFun(obj).then(
(data)=>{
console.error('请求返回data:',data);
// 成功,然后调resolve
dtd.resolve(data)
},
(err)=>{
console.error('请求err:',err);
// 失败,然后调reject
dtd.reject(err)
}
)
return dtd.promise(); // 返回promise对象
};
var fun2 = function () {
var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
let obj={
type: 'get',
url: '/two',
data: {name: 'tom',age: 13},
}
requestFun(obj).then(
(data)=>{
console.error('请求返回data:',data);
// 成功,然后调resolve
setTimeout(()=>{
dtd.resolve(data)
},2000)
},
(err)=>{
console.error('请求err:',err);
// 失败,然后调reject
dtd.reject(err)
}
)
return dtd.promise(); // 返回promise对象
};
var fun3 = function () {
var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
let obj={
type: 'get',
url: '/three',
data: {name: 'tom',age: 14},
}
requestFun(obj).then(
(data)=>{
console.error('请求返回data:',data);
// 成功,然后调resolve
dtd.resolve(data)
},
(err)=>{
console.error('请求err:',err);
// 失败,然后调reject
dtd.reject(err)
}
)
return dtd.promise(); // 返回promise对象
};
// 每个函数都会返回一个promise,用链式的then来接收结果
fun1()
.then(
(res) => {
console.log('成功时:', res);
return fun2()
},
(error) => {
console.error('失败时:', error);
return fun2()
}
)
.then(
(res) => {
console.log('成功时:', res);
return fun3()
},
(error) => {
console.error('失败时------:', error);
return fun3()
}
)
.then(
(res) => {
console.log('成功时:', res);
},
(error) => {
console.error('失败时:', error);
}
)
})
</script>
</body>
</html>
解决办法3: 用最新的async await 也是很好解决的,但要考虑浏览器的兼容性问题喔,所以可能上面的方法2是最好的。