Promise的基础知识

最新推荐文章于 2024-07-13 12:28:29 发布

-Y、

最新推荐文章于 2024-07-13 12:28:29 发布

阅读量156

点赞数

分类专栏： Promise异步请求包装文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44776706/article/details/105942692

版权

Promise异步请求包装专栏收录该内容

1 篇文章 0 订阅

订阅专栏

===============================================================================================
Promise的注意事项：
1、当出现回调地狱的时候，最好使用promise，它是一种链式编程，有利于提高代码的可读性，当使用普通嵌套是会到时代码层级不清晰
2、resolve解决，reject拒绝，它们两个不仅是作为参数传进去new Promise，同时也是一个函数
3、resolve（data）被调用时会执行 then（（从resolve传进来的data）=>{ 处理函数 })
reject（err）被调用时会执行 catch（（从reject传进来的err）=>{ 处理代码 }）
4、上面是异步请求代码例如：setTimeout(()=>{ 内容 }，1000)
下面是处理代码例如：console.log(data)
在这里插入图片描述

5、直接用then将两个执行处理代码的函数包起来：
在这里插入图片描述

promise的链式调用：

<body>
    <!-- <script>
        //常规写法
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('aaa')         
            },1000)
            
        }).then((temp)=>{
                console.log(temp,'第一层处理')

               return new Promise((resolve)=>{
                    resolve(temp+'1111')
                })

            }).then((temp)=>{
                console.log(temp,'第二层处理')

              return  new Promise((resolve,reject)=>{
                    resolve(temp+'aaa')
                    // reject('err massage')
                })

            }).then((temp)=>{
                console.log(temp,'第三层处理')
            }).catch((err)=>{
                console.log(err)
            })
       
    </script> -->
    （三选一）
     <script>
         //简化写法
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('aaa')         
            },1000)
        }).then((temp)=>{
                console.log(temp,'第一层处理')
               return Promise.resolve(temp+'1111')
            }).then((temp)=>{
                console.log(temp,'第二层处理')
                // throw 'error message'//手动抛出异常
                // return Promise.reject('error message')//通过promise中的reject抛出异常
              return  Promise.resolve(temp+'3333')//接收数据
            }).then((temp)=>{//resolve调用这个函数
                console.log(temp,'第三层处理')
            }).catch((err)=>{//reject和throw调用这个函数
                console.log(err)
            })
       
    </script>
    （三选一）
     <script>
         //超级简化写法
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('aaa')         
            },1000)
        }).then((temp)=>{
                console.log(temp,'第一层处理')
               return temp+'1111'//直接返回数据默认是fulfill(满足状态)
            }).then((temp)=>{
                console.log(temp,'第二层处理')
                // throw 'error message'//手动抛出异常
                // return Promise.reject('error message')//通过promise中的reject抛出异常
              return  temp+'3333'//接收数据
            }).then((temp)=>{//resolve调用这个函数
                console.log(temp,'第三层处理')
            }).catch((err)=>{//reject和throw调用这个函数
                console.log(err)
            })
       
    </script>
</body>