什么是嵌套回調(diào)（回調(diào)地獄）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
$.get("/getUser", function() {
$.get("/getUserDetail", function() {
$.get("/getUserOrder", function() {
......
})
})
})
</script>
</body>
</html>
promise() 函數(shù)基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 將異步操作封裝在一個(gè) promise 對(duì)象中
function fn() {
return new Promise(function(resolve, reject) {
setTimeout(()=>{
console.log('你好');
// 執(zhí)行 resolve() 函數(shù)，表示操作成功，告訴外界可以執(zhí)行其他操作了；執(zhí)行 reject() 函數(shù)，表示操作失敗，告訴外界可以執(zhí)行其他操作了
resolve();
}, 1000);
})
}
fn().then(res=>{
console.log("首先");
});
</script>
</body>
</html>
以上代碼，瀏覽器打印內(nèi)容：
你好
首先
promise() 函數(shù)解決回調(diào)地獄
- 無(wú)參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function f1() {
return new Promise(function(resolve, reject) {
setTimeout(()=>{
console.log('第一步');
// 執(zhí)行 resolve() 函數(shù)，表示操作成功，告訴外界可以執(zhí)行其他操作了
resolve();
}, 1000);
})
}
function f2() {
return new Promise(function(resolve, reject) {
setTimeout(()=>{
console.log('第二步');
// 執(zhí)行 resolve() 函數(shù)，表示操作成功，告訴外界可以執(zhí)行其他操作了
resolve();
}, 1000);
})
}
function f2() {
return new Promise(function(resolve, reject) {
setTimeout(()=>{
console.log('第三步');
// 執(zhí)行 resolve() 函數(shù)，表示操作成功，告訴外界可以執(zhí)行其他操作了
resolve();
}, 1000);
})
}
f1().then(res=>{
// 返回 promise 對(duì)象
return f2();
}).then(res=>{
// 返回 promise 對(duì)象
return f3();
}).then(res=>{
setTimeout(()=>{
console.log('已完成');
}, 1000);
});
</script>
</body>
</html>
以上代碼，瀏覽器打印內(nèi)容：
第一步
第二步
第三步
已完成
- 有參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function getUser() {
return new Promise(resolve=>{
$.get("/getUser", res=>{
// 執(zhí)行 resolve() 函數(shù)，表示操作成功，告訴外界可以執(zhí)行其他操作了，并將從后端獲取的數(shù)據(jù) res 傳遞給外界
resolve(res);
})
});
}
getUser().then(res=>{
// res 就是上一個(gè)異步操作返回的參數(shù)值（從后端獲取的數(shù)據(jù)）
console.log(res);
})
</script>
</body>
</html>
- 錯(cuò)誤處理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function getBooks() {
return new Promise((resolve, reject)=>{
$.ajax({
url:"/getBooks",
success(res) {
// 執(zhí)行 resolve() 函數(shù)，表示操作成功，告訴外界可以執(zhí)行其他操作了，并將從后端獲取的數(shù)據(jù) res 傳遞給外界
resolve(res);
},
error(res) {
// 執(zhí)行 reject() 函數(shù)，表示操作失敗，告訴外界可以執(zhí)行其他操作了，并將錯(cuò)誤信息 res 傳遞給外界
reject(res);
}
})
});
}
// 第一種處理錯(cuò)誤的方式
getBooks().then(res=>{
// res 就是 ajax 請(qǐng)求成功時(shí)獲取的數(shù)據(jù)
console.log(res);
}),resError=>{
// resError 就是 ajax 請(qǐng)求失敗時(shí)的錯(cuò)誤信息
console.log(resError);
}
// 第二種處理錯(cuò)誤的方式（推薦）
getBooks().then(res=>{
// res 就是 ajax 請(qǐng)求成功時(shí)獲取的數(shù)據(jù)
console.log(res);
}).catch(resError=>{
// resError 就是 ajax 請(qǐng)求失敗時(shí)的錯(cuò)誤信息
console.log(resError);
})
</script>
</body>
</html>
上面代碼中錯(cuò)誤處理的方式，推薦使用第二種。因?yàn)榈诙N方式不僅僅可以捕獲到 reject() 函數(shù)傳遞的參數(shù)，而且還能捕獲到成功時(shí)回調(diào)函數(shù) then() 中發(fā)生的錯(cuò)誤。示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function fn(name) {
return new Promise(resolve=>{
if (name == 'Tom') {
resolve('allow');
}
else {
reject('refuse');
}
})
}
fn('Tom').then(res=>{
var a = '';
a();
console.log(res);
}).catch(resError=>{
console.log(resError);
})
</script>
</body>
</html>
