一. Promise概念
异步编程的一种解决方案
二. Promise用法
1. 异步请求
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 5000);
})
.then(()=>{
console.log("1111111111111")
});
new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, 2000);
})
.then(()=>{
console.log("2222222222222")
});
</script>
</html>
2. 防止回调地狱
1）回调地狱函数（层层嵌套，逻辑混乱）
new Promise((resolve, reject) => {
setTimeout(() => {
console.log("Hellow World")
console.log("Hellow World")
console.log("Hellow World")
console.log("Hellow World")
setTimeout(() => {
console.log("Hellow Vue")
console.log("Hellow Vue")
console.log("Hellow Vue")
console.log("Hellow Vue")
setTimeout(() => {
console.log("Hellow Java")
console.log("Hellow Java")
console.log("Hellow Java")
console.log("Hellow Java")
}, 1000);
}, 1000);
}, 1000);
})
2）通过promise解决回调地狱
new Promise((resolve, reject) => {
// 第一次网络请求的代码
setTimeout(() => {
resolve();
}, 1000)
})
.then(() => {
// 第一次拿到结果处理代码
console.log("Hellow World")
console.log("Hellow World")
console.log("Hellow World")
console.log("Hellow World")
return new Promise((resolve, reject) => {
//第二次网络请求的代码
setTimeout(() => {
resolve();
}, 1000)
})
})
.then(() => {
//第二次拿到结果处理代码
console.log("Hellow Vue")
console.log("Hellow Vue")
console.log("Hellow Vue")
console.log("Hellow Vue")
//第三次网络请求的代码
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000)
})
})
.then(() => {
//第三次拿到结果处理代码
console.log("Hellow Java")
console.log("Hellow Java")
console.log("Hellow Java")
console.log("Hellow Java")
})
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
