Promise初体验

文章目录

Promise
- 实例

Promise

Promise是什么
抽象表达“
1） promise是一门新技术
2） promise是js中进行异步编程的新解决方案
具体表达
1）从语法上来说：promise是一个构造函数
2）从功能上来说，promise对象用来封装一个异步操作并可以获取其成功失败的结果值

为什么要用promise？

旧的：必须在启动异步任务前指定
Promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）

支持链式调用，可以解决回调地狱问题
什么是回调地狱？
回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件

回调地狱的缺点？
不便于阅读
不便于异常处理

异步编程：
Fs文件操作
数据库操作
AJAX
定时器

实例

点击抽奖按钮，会有中奖结果提示。

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>Documenttitle>
head>
<body>
    <div class="container">
        <h2 class="page-header" >Promise 初体验h2>
        <button class="btn btn-primary" id="btn">点击抽奖button>
    div>
    <script>
        function rand(m, n){
            return Math.ceil(Math.random() * (n-m+1)) + m-1;
        }
        // 获取元素对象
        const btn = document.querySelector("#btn");
        // 绑定单击事件
        btn.addEventListener("click", function(){

    
            const p = new Promise((resolve, reject) => {
                // 定时器
                  setTimeout(() => {
                        let n = rand(1, 100);
                        if(n <= 30){
                            resolve(n);//将promise的状态设置为成功
                        }else{
                            reject(n);
                        }
                    }, 1000);
            });
            
            // 调用then方法
            //一个为成功的回调
            p.then((value) => {
                alert("成功中奖,中奖数字为"+value)
            }, (reason)=>{
                alert("再接再励,号码为"+reason)
            });

        });


    script>  
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

运行结果：
在这里插入图片描述
点击抽奖

在这里插入图片描述

相关阅读:
列表和标签企业报告版的完整报告解决方案
面向Java开发者的ChatGPT提示词工程（4）
qml之动态元素类型
C/C++ 排序算法总结
python 知识点汇总
做了大量数据分析，数据分析思维还有没有意义
33.反射
面试金典--面试题 16.18. 模式匹配（前缀和+哈希表）
第21节——useEffect
什么是接口

原文地址：https://blog.csdn.net/qq_52785473/article/details/126466829