ES6 promise的用法总结
Posted 哪 吒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6 promise的用法总结相关的知识，希望对你有一定的参考价值。
目录
一、什么是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>
以上是关于ES6 promise的用法总结的主要内容，如果未能解决你的问题，请参考以下文章