Vue- Promise函数---参数resolve(调用.then方法)-- 参数reject(调用.catch方法)---链式结构...

结构:

//什么情况下会用到Promise?
//一把情况下是有异步操作时,使用Promise对这个异步操作进行封装
<script>
new Promise((resolve, reject) =>{
    setTimeout(() =>{
        //成功的时候调用resolve
        resolve('成功data')
        //失败的时候调用reject
        reject('error message')
    }, 1000)
}).then((data) =>{
    //处理成功后的逻辑
    console.log(data);//这个data 是接收的resolve参数--
}).catch((err) =>{
    console.log(err);
})
</script>

简便写法二

.then(函数一,函数二)

<script>
    new Promise((resolve, reject) =>{
        setTimeout(() =>{
            //成功的时候调用resolve
            resolve('成功data')
            //失败的时候调用reject
            reject('error message')
        }, 1000)
    }).then(data =>{
         console.log(data);
    }, err =>{
        console.log(err)
    })
    </script>

  链式案例

<script>
            //模拟网络请求
            //网络请求:aaa ->自己处理(10行)
            //处理:aaa111 ->自己处理(10 行)
            //处理:aaa111222->自己处理
        new Promise((resolve, reject) =>{
            setTimeout(() =>{
                //成功的时候调用resolve
                resolve('aaa')
            }, 1000)
        }).then(res =>{
            // 自己处理10行代码
             console.log(res,'第一层的10行处理代码');
            //2.对结果进行第一次处理
            //return Promise.reject('err')
            //throw 'err'
            return Promise.resolve(res +'111')
            })
        }).then(res =>{
            console.log(res, '第二层的10行处理代码')
            return Promise.resolve(res +'222')
            })
        }).then(res =>{
            console.log(res +'第三层代码')
        }).catch(err =>{
            console.log("err")
        })
        </script>
         <script>
            new Promise((resolve, reject) =>{
                setTimeout(() =>{
                    //成功的时候调用resolve
                    resolve('aaa')
                }, 1000)
            }).then(res =>{
                // 自己处理10行代码
                 console.log(res,'第一层的10行处理代码');
                //2.对结果进行第一次处理
                return Promres +'111'
                })
            }).then(res =>{
                console.log(res, '第二层的10行处理代码');
                return res +'222'
                })
            }).then(res =>{
                console.log(res +'第三层代码');
            })
            </script>

 此外,promise还有同时处理几个或多个请求

Promise.all()

这个用于:需求:需要同时获取两个或多个数据,之后才能下一步

用于判断是否接受到了或者叫判断执行完成了这两个或多个请求

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值