ES6 promise的用法总结
【摘要】
目录
一、什么是Promise？1、Promise是异步编程的一种解决方案2、什么是回调地狱？3、通过promise函数解决回调地狱的问题
二、Promise的三种状态1、pending2、...
目录
一、什么是Promise？
1、Promise是异步编程的一种解决方案
异步编程，通俗的解释就是，我们封装一个网络请求的函数，因为不能立刻返回结果，所以我们可以将其传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调回去。
但是，如果网络请求比较复杂的时候，就会出现网络地狱的问题。
2、什么是回调地狱？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//1.使用setTimeout
setTimeout(() => {
console.log('hello 哪吒编程')
},1000)
//2.使用promise进行异步操作
new Promise((resolve, reject) => {
setTimeout(() => {
console.log('hello 哪吒编程')
console.log('hello 哪吒编程')
console.log('hello 哪吒编程')
setTimeout(() => {
console.log('hello 云韵')
setTimeout(() => {
console.log('hello 比比东')
},1000)
},1000)
},1000)
})
</script>
</head>
<body>
</body>
</html>
这种情况下便出现了回调地狱。当异步操作越多，这种嵌套的层级也就越复杂，不利于代码维护。
3、通过promise函数解决回调地狱的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//使用promise进行异步操作
new Promise((resolve, reject) => {
resolve()
}).then(() => {
setTimeout(() => {
console.log('hello 哪吒编程')
console.log('hello 哪吒编程')
console.log('hello 哪吒编程')
return new Promise((resolve, reject) => {
resolve()
}).then(() => {
setTimeout(() => {
console.log('hello 云韵')
return new Promise((resolve, reject) => {
resolve()
}).then(() => {
setTimeout(() => {
console.log('hello 比比东')
},1000)
})
},1000)
})
},1000)
}).catch((err) => {
console.log(err)
})
</script>
</head>
<body>
</body>
</html>
代码虽然更加复杂了，但是代码的结果还是比较清晰的。
二、Promise的三种状态
1、pending
等待状态
2、fulfill
满足状态，当主动回调resolve时，就处于该状态，并且会回调.then()
3、reject
拒绝状态，当主动回调reject时，就处于该状态，并且会回调.catch()
三、Promise的另一种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//使用promise进行异步操作
new Promise((resolve, reject) => {
//resolve('hello 哪吒编程')
reject('我是一个大bug')
}).then(data => {
console.log(data)
},err => {
console.log(err)
})
</script>
</head>
<body>
</body>
</html>
四、Promise的链式调用
1、菜鸟写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//使用promise进行异步操作
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello 哪吒编程')
},1000)
}).then(data => {
console.log(data, '测试第 1 次')
return new Promise((resolve, reject) => {
resolve(data, '11111')
})
}).then(data => {
console.log(data, '测试第 2 次')
return new Promise((resolve, reject) => {
resolve(data, '22222')
})
}).then(data => {
console.log(data, '测试第 3 次')
})
</script>
</head>
<body>
</body>
</html>
2、中级写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//使用promise进行异步操作
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello 哪吒编程')
},1000)
}).then(data => {
console.log(data, '测试第 1 次')
return Promise.resolve(data, '11111')
}).then(data => {
console.log(data, '测试第 2 次')
return Promise.resolve(data, '22222')
}).then(data => {
console.log(data, '测试第 3 次')
})
</script>
</head>
<body>
</body>
</html>
3、大师写法
省略掉Promise.resolve
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//使用promise进行异步操作
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello 哪吒编程')
},1000)
}).then(data => {
console.log(data, '测试第 1 次')
return data + '11111'
}).then(data => {
console.log(data, '测试第 2 次')
return data + '22222'
}).then(data => {
console.log(data, '测试第 3 次')
})
</script>
</head>
<body>
</body>
</html>
五、Promise的all方法的使用
1、菜鸟写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
let isResult1 = false
let isResult2 = false
//请求1
$ajax({
url: '',
success: function () {
console.log('请求1')
isResult1 = true
handleResult()
}
})
//请求2
$ajax({
url: '',
success: function () {
console.log('请求2')
isResult2 = true
handleResult()
}
})
function handleResult(){
if(isResult1 && isResult2){
console.log('两个请求都成功了，执行以下操作：')
}
}
</script>
</head>
<body>
</body>
</html>
2、Promise的all方法的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
Promise.all([
new Promise(() => {
//请求1
$.ajax({
url: '',
success: function (data) {
resolve(data)
}
})
}),
new Promise(() => {
//请求2
$.ajax({
url: '',
success: function (data) {
resolve(data)
}
})
}),
]).then(results => {
results[0]
results[1]
})
</script>
</head>
<body>
</body>
</html>
文章来源: blog.csdn.net，作者：哪 吒，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/guorui_java/article/details/122649856
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）