js学习之 promise （笔记粗糙版）

对应代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        new Promise(function(Resolved,reject){
            //Resolved();
            reject();
        }).then(function(){alert("成功");},function(){alert("失败");})
    </script>
</head>
<body>
    
</body>
</html>

new Promise(function(Resolved,reject){
            //Resolved();
            reject();
        }).then(function(){alert("成功");}).catch(function(){alert("来自catch的失败信息")})

写成函数并带参数：

function showPromise(res){
        new Promise((Resolved,reject)=>{
            // Resolved(res);
            reject(res);
        }).then((x)=>{alert(x);}).catch((x)=>{alert(x+" 来自catch的失败信息")})
    }
    
    showPromise("hello promise");

感觉有点想那个VBA里面的 isError 那个method。

// 【4】回调函数
        new Promise(function(Resolved,reject){
            Resolved("Resolved");
            reject();
        }).then(function(x){alert(x);return "第一次then的return"})
        .then(function(x){alert(x);return "第二次then的return"})
        .then(function(x){alert(x);return "第三次then的return"})
        .then(function(x){alert(x);return "第四次then的return"})
        .then(function(x){alert(x);return "第五次then的return"})
        .then(function(x){alert(x);return "第六次then的return"})

promise的厉害之处，在于可以无限回调。

为什么没有第六次then呢，因为他return的没有后面的then去alert他了。

catch的无限回调函数。

        // 【5】catch 的无限回调
        new Promise(function(Resolved,reject){
            // Resolved("Resolved");
            reject();
        }).then(function(x){alert(x);return "第一次then的return"})
        .catch(()=>{alert(" 失败了 ");return "失败了，第二次then的return";})
        .then(function(x){alert(x);return "第二次then的return"})

表示 or 不表示的promise的小demo

<body>
    <button id="button1" value="click" >Click</button>
    <div id="div1">111111</div>
    
    <script type="text/javascript">
        // 【6】小demo的练习
        
        let index = 0;   
        button1.onclick = ()=>{
            index++;
            new Promise((succ,error)=>{
                index%2==1?succ():error();
            }).then(()=>{
                div1.style.display = "none";
            },
            ()=>{
                div1.style.display = "block";
            })
        }
    
    </script>
</body>

race 竞速与 all

        // // 【7】race 竞速
        // pro1 = new Promise((succ,err)=>{
        //     setTimeout(succ,1300,'1');
        // }).then((x)=>{alert(x);return "1OK";}).catch((e)=>{alert(e+"======失败了")})
        // pro2 = new Promise((succ,err)=>{
        //     setTimeout(succ,1000,'2');
        // }).then((x)=>{alert(x);return "2OK";}).catch((e)=>{alert(e+"======失败了")})
        // pro3 = new Promise((succ,err)=>{
        //     setTimeout(succ,1600,'3');
        // }).then((x)=>{alert(x);return "3OK";}).catch((e)=>{alert(e+"======失败了")})

        // Promise.race([pro1,pro2,pro3])
        // .then((x)=>{alert(x);}).catch((e)=>{alert(e+"==真的失败了！")})

        // 【8】all 竞速
        pro1 = new Promise((succ,err)=>{
            setTimeout(succ,1300,'1');
        }).then((x)=>{alert(x);return "1OK";}).catch((e)=>{alert(e+"======失败了")})
        pro2 = new Promise((succ,err)=>{
            setTimeout(succ,1000,'2');
        }).then((x)=>{alert(x);return "2OK";}).catch((e)=>{alert(e+"======失败了")})
        pro3 = new Promise((succ,err)=>{
            setTimeout(succ,1600,'3');
        }).then((x)=>{alert(x);return "3OK";}).catch((e)=>{alert(e+"======失败了")})

        Promise.all([pro1,pro2,pro3])
        .then((x)=>{alert(x);}).catch((e)=>{alert(e+"==真的失败了！")})

all的这个运行结果比较有意思，打印出来是1ok2ok3ok。不知道为啥？？？~~~~~~

复数参数化，不支持不定参数化，需要的话，只能传单个参数，但是是数组形式。

// 【9】函数 複數参数化
        function showPromise(res){
            new Promise((Resolved,reject)=>{
                 Resolved([res,"others"]);
                //reject(res);
            }).then((x)=>{alert(x[0] + "===" + x[1]);}).catch((x)=>{alert(x+" 来自catch的失败信息")})
        }

        showPromise("111111");

猛吃仙子

发布了42 篇原创文章 · 获赞 1 · 访问量 5386

私信关注

js学习 之 promise （笔记粗糙版）

猜你喜欢

js学习之 promise （笔记粗糙版）