《尚硅谷Web前端Promise教程从入门到精通》系列博客_ Promise介绍与基本使用

醒了就刷牙

已于 2024-05-25 21:47:25 修改

阅读量693

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript

于 2024-05-25 21:37:39 首次发布

本文链接：https://blog.csdn.net/buyaotutou/article/details/139172258

文章目录

前言
Promise 介绍与基本使用

前言

为学习axios打基础。本尚硅谷Web前端Promise教程从入门到精通系列博客内容介绍。
Promise是ES6引入的进行异步编程的新的解决方案，从语法上说它是一个构造函数，可以封装异步的任务，并且可以对结果进行处理。Promise最大的好处在于可以解决回调地狱的问题，并且在指定回调和处理错误方面更加灵活，在Web或者App项目中应用十分广泛，无论前端还是后端都可以看到Promise的身影，且是现在面试的高频题目，想进入一线大厂必须掌握Promise内部运行的原理。
尚硅谷Web前端Promise教程从入门到精通系列博客主要包含以下五部分：Promise 介绍与基本使用、Promise API、Promise 关键问题、Promise 自定义封装、async 与await。

Promise 介绍与基本使用

1.Promise是什么？

1.1 理解

1.1.1 抽象表达:

Promise 是一门新的技术(ES6规范)
Promise 是JS 中进行异步编程的新解决方案
备注：旧方案是单纯使用回调函数
note:异步编程包括但不限于：文件操作、数据库操作、AJAX、定时器

1.1.2 具体表达:

从语法上来说: Promise是一个构造函数
从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值

1.2. 为什么要用Promise?

1.2.1. 指定回调函数的方式更加灵活

旧的: 必须在启动异步任务前指定
promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
note：回调函数是一种特殊的函数，它作为参数传递给另一个函数，并在被调用函数执行完毕后被调用。

1.2.2. 支持链式调用, 可以解决回调地狱问题

什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件
回调地狱的缺点? 不便于阅读、不便于异常处理
解决方案? promise 链式调用
终极解决方案? async/await

2.Promise初体验

看一下Promise在异步任务当中是如何使用的。需求：点一下“点击抽奖"，在两秒后，页面弹窗展示是否中奖，中奖概率30%。
html文件代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</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;
        }
        /**
            点击按钮,  1s 后显示是否中奖(30%概率中奖)
                若中奖弹出    恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券
                若未中奖弹出  再接再厉
        */
        //获取元素对象
        const btn = document.querySelector('#btn');
        //绑定单击事件
        btn.addEventListener('click', function(){
     
            //定时器
            // setTimeout(() => {
     
            //     //30%  1-100  1 2 30
            //     //获取从1 - 100的一个随机数
            //     let n = rand(1, 100);
            //     //判断
            //     if(n <= 30){
     
            //         alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券');
            //     }else{
     
            //         alert('再接再厉');
            //     }

最低0.47元/天解锁文章