ES6 - promise() 函数解决嵌套回调（回调地狱）
2019-04-12 本文已影响0人
Hyso
什么是嵌套回调（回调地狱）
<!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() 函数基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 将异步操作封装在一个 promise 对象中
function fn() {
return new Promise(function(resolve, reject) {
setTimeout(()=>{
console.log('你好');
// 执行 resolve() 函数，表示操作成功，告诉外界可以执行其他操作了；执行 reject() 函数，表示操作失败，告诉外界可以执行其他操作了
resolve();
}, 1000);
})
}
fn().then(res=>{
console.log("首先");
});
</script>
</body>
</html>
以上代码，浏览器打印内容：
你好
首先
promise() 函数解决回调地狱
- 无参数
<!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('第一步');
// 执行 resolve() 函数，表示操作成功，告诉外界可以执行其他操作了
resolve();
}, 1000);
})
}
function f2() {
return new Promise(function(resolve, reject) {
setTimeout(()=>{
console.log('第二步');
// 执行 resolve() 函数，表示操作成功，告诉外界可以执行其他操作了
resolve();
}, 1000);
})
}
function f2() {
return new Promise(function(resolve, reject) {
setTimeout(()=>{
console.log('第三步');
// 执行 resolve() 函数，表示操作成功，告诉外界可以执行其他操作了
resolve();
}, 1000);
})
}
f1().then(res=>{
// 返回 promise 对象
return f2();
}).then(res=>{
// 返回 promise 对象
return f3();
}).then(res=>{
setTimeout(()=>{
console.log('已完成');
}, 1000);
});
</script>
</body>
</html>
以上代码，浏览器打印内容：
第一步
第二步
第三步
已完成
- 有参数
<!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=>{
// 执行 resolve() 函数，表示操作成功，告诉外界可以执行其他操作了，并将从后端获取的数据 res 传递给外界
resolve(res);
})
});
}
getUser().then(res=>{
// res 就是上一个异步操作返回的参数值（从后端获取的数据）
console.log(res);
})
</script>
</body>
</html>
- 错误处理
<!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) {
// 执行 resolve() 函数，表示操作成功，告诉外界可以执行其他操作了，并将从后端获取的数据 res 传递给外界
resolve(res);
},
error(res) {
// 执行 reject() 函数，表示操作失败，告诉外界可以执行其他操作了，并将错误信息 res 传递给外界
reject(res);
}
})
});
}
// 第一种处理错误的方式
getBooks().then(res=>{
// res 就是 ajax 请求成功时获取的数据
console.log(res);
}),resError=>{
// resError 就是 ajax 请求失败时的错误信息
console.log(resError);
}
// 第二种处理错误的方式（推荐）
getBooks().then(res=>{
// res 就是 ajax 请求成功时获取的数据
console.log(res);
}).catch(resError=>{
// resError 就是 ajax 请求失败时的错误信息
console.log(resError);
})
</script>
</body>
</html>
上面代码中错误处理的方式，推荐使用第二种。因为第二种方式不仅仅可以捕获到 reject() 函数传递的参数，而且还能捕获到成功时回调函数 then() 中发生的错误。示例：
<!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>
