上一篇熟悉了promise的具体过程：

promise的过程：

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

从promise的概念：{

1.promise是es6引入的一门新的JS的解决异步编程的方案。

2.从语法来说promise是一个构造函数

3.从功能上来说promise是一个封装了一个异步操作并可以获取其成功/失败结果的值的一个对象

}

我们可以知道promise不仅仅是封装了一个异步操作，并且可以获取其成功/失败结果的值。

还是以抽奖为例子，我们在抽奖的结果中加上所抽的号码

从代码中可以得知,resolve和reject都可以携带参数，并且在下面通过promise对象的实例调用then方法时，在回调函数的参数中接收resolve和reject携带的参数

源码：

<!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>promise(2)</title>

</head>

<body>

    <div class="container">

        <div id="btn">抽个奖</div>

    </div>

</body>

<script>

    function random(m, n) {

        return Math.ceil(Math.random() * (n - m + 1)) + m - 1

    }//生成随机数

    const btn = document.querySelector('#btn')

    //获取按钮的dom元素

    btn.addEventListener('click', function () {

        //resolve 解决  函数类型数据

        //reject 拒绝  函数类型数据

        const p = new Promise((resolve, reject) => {

            setTimeout(() => {

                let t = random(1, 100)

                if (t < 50) {

                    resolve(t)//成功后的回调,将promise对象的状态设置为【成功】，并携带参数

                } else {

                    reject(t)//失败后的回调，将promise对象的状态设置为【失败】，并携带参数

                }

            }, 2000)

        })

        //用实例化后的promise对象调用then方法，在参数中传入成功/失败后要执行的方法

        p.then((t) => {//在箭头函数中接收resolve和reject携带的参数

            alert('恭喜中奖,'+'中奖号码为：'+t)

        }, (t) => {

            alert("再接再厉,"+'您的号码为： '+t)

        })

    })

</script>

<style>

    .container {

        width: 100%;

        height: 1000px;

        background-color: aquamarine;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }

    #btn {

        width: 150px;

        height: 50px;

        background-color: rgb(217, 217, 230);

        border-radius: 25px;

        text-align: center;

        line-height: 50px;

    }

</style>

</html>

　　

 

ES6 - promise（3）的更多相关文章

  1. ES6 - promise（1）

    今天决定对之前学过的一些前端的知识进行梳理和总结,因为最近都是独自承担项目的开发与搭建,所以先从前后端交互的第一线axios来梳理,复习axios首先一定要先复习promise对象. 什么是promi ...

  2. ES6 - promise（2）

    从上一篇中我们知道promise的概念,上一篇也提到了 promise的过程: 启动异步任务 => 返回promise对象 =>给promise对象绑定回调函数(甚至可以在异步任务结束后指 ...

  3. 基础知识：Promise（整理）

    基础知识:Promise(整理) (来自牛客网)下面关于promise的说法中,错误的是(D) A. resolve和reject都是直接生成一个进入相应状态的promise对象,其参数就是进入相应状 ...

  4. ES6语法（3）—— 用promise（）对象优雅的解决异步操作

    Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. ...

  5. 大白话讲解Promise（二）理解Promise规范

    上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...

  6. 大白话讲解Promise（一）

    去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本 ...

  7. 关于promise（一）

    该新特性属于 ECMAScript 2015(ES6)规范,在使用时请注意浏览器兼容性. 由于ES6原生提供Promise,所以无需安装Promise库.但在ES5环境下我们可以使用bluebird库 ...

  8. Promise （1） 如何使用Promise

    Promise 也是面试高频问题, 今天我们来看看Promise是什么, 能做什么, 怎么用, 下一期我们自己来模拟一个myPromise 1  Promise 是什么 我们要学会自己给自己提问, 才 ...

  9. 【转】大白话讲解Promise（一）

    原文地址:https://www.cnblogs.com/lvdabao/p/es6-promise-1.html ES6 Promise 先拉出来遛遛 复杂的概念先不讲,我们先简单粗暴地把Promi ...

随机推荐

  1. idea 启动微服务 设置 run dashboard

    微服务如果很多,启动时如果在run窗口,会不是很方便,所以idea中配置了rundashboard,有时不自动出现时,需要进行配置: 配置操作如下: 我的idea版本2020.2 1.在父工程的.id ...

  2. 安装并使用Junit

    在Eclipse中配置Junit的方法有两种方式: 第一种方法: 1.下载junit的jar包,目前它的版本是junit3.8.1,可以从www.junit.org上下载. 2.在要使用Junit的p ...

  3. 自定义API（Jar包）的创建与使用（简单实现案例）

    @ 目录 学习内容 1. 自定义工具类 2. 导出jar 3. 加载Jar包 4. 调用自定义的API方法 总结 学习内容 1. 自定义工具类 新建一个java项目,然后创建包和工具类StringUt ...

  4. IO流入门

    @ 目录 总结内容 1. IO流是什么 2. 字符流和字节流 3. File常用API(前面类型为返回类型) 4. 编码转换 5. IO流实现流程 6. 输入输出流简单实现 7. 输入输出流简单实现 ...

  5. 基于Spring接口，集成Caffeine+Redis两级缓存

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 在上一篇文章Redis+Caffeine两级缓存,让访问速度纵享丝滑中,我们介绍了3种整合Caffeine和Redis作为两级缓存使用的方法,虽 ...

  6. 帝国cms修改成https后后台登陆空白的解决办法

    以下方法适用帝国cms7.5版本: 7.5版本已经有了http和https自动识别,但是因为一些疑难杂症的原因,自动识别判断的不准,后台登录也是空白, 我们可以打开e/config.php查找'htt ...

  7. 超详细讲解H5移动端适配

    前言 移动互联网发展至今,各种移动设备应运而生,但它们的物理分辨率可以说是五花八门,一般情况UI会为我们提供375尺寸的设计稿,所以为了让H5页面能够在这些不同的设备上尽量表现的一致,前端工程师就不得 ...

  8. JS/TS项目里的Module都是什么？

    摘要:在日常进行JS/TS项目开发的时候,经常会遇到require某个依赖和module.exports来定义某个函数的情况.就很好奇Modules都代表什么和有什么作用呢. 本文分享自华为云社区&l ...

  9. 这3个免费PPT素材网站，一定要收藏

    制作PPT,这三个网站的素材绝对够用! 1.象刀设计 https://www.101dao.com 象刀设计里面有非常多PPT模板,这个网站也是主打PPT素材. 分类很清晰,需要什么风格的素材能快速找 ...

  10. Apache Doris Oracle ODBC外表使用指南

    1.软件环境 操作系统:ubuntu 18.04 Apache Doris :0.15 Postgresql数据库:oracle 19c UnixODBC:2.3.4 Oracle ODBC :ins ...