promise学习笔记day1----为什么要学习promise

前端不许死

已于 2022-09-22 20:10:43 修改

阅读量179

点赞数 2

文章标签：学习前端 vue.js ajax

于 2022-09-22 16:48:54 首次发布

本文链接：https://blog.csdn.net/m0_63339166/article/details/126994944

版权

1.promise是什么

1.1 基于es6规范的新技术。

1.2 js中进行异步编程的新解决方案

旧方案：单纯使用回调函数。

常见异步编程：①fs 文件操作 ② 数据库操作 ③ AJAX ④ 定时器。

2.promise优势

2.1 指定回调函数方式更加灵活

promise：启动异步任务->返回promise对象 -> 给promise对象绑定回调函数（甚至可以在异步任务结束后指定

2.2 支持链式调用，可以解决回调地狱问题

2.2.1 什么是回调地狱？

回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行结果。

2.2.2 回调地狱的缺点？

不便于阅读和异常处理。

2.2.3 解决方案

promise链式调用

案例：promise 初体验

用回调函数的方式和promise封装的方式来实现简单的抽奖小案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <button class="btn" id="btn">抽奖</button>

    </div>
    <script>
        //生成随机数
        function rand(m,n){
            return Math.ceil(Math.random() * (n-m+1)) + m -1 ;
        }

        // 题目概述 点击按钮 2s后显示是否中奖 （概率为30% ） ---> 设置对应的弹出框

        //用最原始的方式写：
        const btn = document.querySelector('#btn');
        btn.addEventListener('click',function(){
            //定时器
            setTimeout(() => {
                        //获取1-100的随机数
                let n = rand(1,100)
                if(n <= 30){
                    alert('恭喜中奖');
                }
                else{
                    alert('再接再厉');
                }
            },1000);
     
        })
    </script>
</body>
</html>

接下来使用promise进行封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <button class="btn" id="btn">抽奖</button>

    </div>
    <script>
        //生成随机数
        function rand(m,n){
            return Math.ceil(Math.random() * (n-m+1)) + m -1 ;
        }

        // 题目概述 点击按钮 2s后显示是否中奖 （概率为30% ） ---> 设置对应的弹出框

        //用最原始的方式写：
        const btn = document.querySelector('#btn');
        btn.addEventListener('click',function(){
            //定时器
            //promise 形式实现 封装异步操作任务
            //resolve 解决 函数类型数据
            //reject 拒绝 函数类型数据
            const p = new Promise ((resolve,reject)=>{
                setTimeout(() => {
                    let n = rand(1,100)
                    if(n <= 30)
                    {
                        resolve(n);//将promise 对象的状态设置为成功 
                    }
                    else{
                        reject(n);//将promise 对象的状态设置为失败
                    }
                },1000)
            })

            //调用then方法 
            // value 值 形参 用于接收参数

            p.then((value) =>{
                alert('恭喜中奖'+value);
            },(reason)=>{
                alert('再接再厉'+reason);
            });
     
        })
    </script>
</body>
</html>

前端不许死

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
promise学习笔记day1----为什么要学习promise

promise：启动异步任务->返回promise对象 -> 给promise对象绑定回调函数（甚至可以在异步任务结束后指定。回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行结果。常见异步编程：①fs 文件操作 ② 数据库操作 ③ AJAX ④ 定时器。2.2 支持链式调用，可以解决回调地狱问题。1.2 js中进行异步编程的新解决方案。2.2.2 回调地狱的缺点？2.2.1 什么是回调地狱？1.1 基于es6规范的新技术。2.1 指定回调函数方式更加灵活。旧方案：单纯使用回调函数。
复制链接

扫一扫