ES6中Promise解决回调地狱

在你写代码的时候,是否遇到过回调地狱。

回调地狱如何的问题怎么解决?            答:使用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>

上一篇:云朵云朵云朵


下一篇:跟我学浏览器事件环