在你写代码的时候,是否遇到过回调地狱。
回调地狱如何的问题怎么解决? 答:使用Promise解决
有的人就问了,什么是回调地狱?
回调地狱代码示例
<script>
// 回调地狱
setTimeout(() => {
setTimeout(() => {
setTimeout(() => {
setTimeout(() => {
setTimeout(() => {
setTimeout(() => {
setTimeout(() => {
setTimeout(() => {
// ......
})
})
})
})
})
})
})
})
// 回调地狱,顾名思义 也就是回调函数中包含回调函数,再包含回调函数,再包含回调函数....
</script>
回调地狱,代码可读性差,维护性差。所以是不建议写回调地狱的
在我们的es6中给我们提供了解决异步代码的方法 Promise
Promise基本语法
let promise=new Promise((resolve,reject)=>{
异步逻辑
})
注意:
Promise 对象需要接受一个函数作为参数
作为参数的函数需要接受两个参数 resolve reject
Promise的三种状态
1.pending 进行中
2.fulfilled 成功
3.rejected 失败
promise的状态一旦发生改变,就不会再改变了
状态改变的两种情况
pending---->fulgilled
pending---->rejected
如何修改promise的状态(重要)?
通过在promise的回调函数体中调用resolve方法,可以将promise的状态修改为成功(fullfilled)
通过promise的回调函数体中调用reject方法,可以将promise的状态修改为失败(rejected)
promise对象的方法
在promise对象中我们通常使用then()来接受成功返回的数据和catch()来接收失败返回的数据
then()方法
then方法可以监听成功和失败
<script>
//then方法需要接收两个函数作为参数
//第一个参数:状态的成功的回调
//第二个参数:状态失败的回调
p.then(()=>{
console.log('成功');
},()=>{
console.log('失败');
});
</script>
catch()
虽然then()可以监听成功和失败的状态,但我们更多的去使用catch()去监听失败状态,使用then()去接收成功的状态
<script>
p.catch((err)=>{ //既可以监听失败,又可以捕获代码异常
console.log('哈哈哈哈哈');
console.log(err);
})
</script>
ps:p就是promise对象
补充:then可以连缀
例:p.then().then().then().catch()
Promise.all
可以将多个promise对象封装为一个新的promise对象,例如:
有三个promise对象p1,p2,p3,封装为一个新的promise,p
新的promise的状态取决于p1,p2和p3
-
若p1,p2,p3都成功了,则p会变为成功状态
-
若p1,p2,p3有一个失败了,则p会立即变为失败状态
用法:
<script>
let p1, p2, p3;
//使用
let p = Promise.all([p1, p2, p3])
p.then(rst => { }).catch(err => { });
</script>