ES6中Promise解决回调地狱

2021-12-11 18:02:01 阅读：178 来源： 互联网

标签：ES6 setTimeout 状态地狱 Promise 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>

标签：ES6,setTimeout,状态,地狱,Promise,promise,回调
来源： https://blog.csdn.net/m0_55258023/article/details/120746522

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。