zoukankan      html  css  js  c++  java
  • 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()

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

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

  • 相关阅读:
    @media screen针对不同移动设备-响应式设计
    闭包的一些例子
    es6 新关键字const
    es6 新关键字let
    Unity 多屏(分屏)显示,Muti_Display
    小米手机常用操作
    Charles使用笔记
    AKKA学习笔记
    Gatling-Session
    Scala学习笔记-6-其他
  • 原文地址:https://www.cnblogs.com/fdxjava/p/11622490.html
Copyright © 2011-2022 走看看