转载自 十分钟快速了解 ES6 Promise

什么是Promise

Promise最早由社区提出并实现,典型的一些库有Q,when, bluebird等;它们的出现是为了更好地解决JavaScript中异步编程的问题,传统的异步编程最大的特点就是地狱般的回调嵌套,一旦嵌套次数过多,就很容易使我们的代码难以理解和维护。而Promise则可以让我们通过链式调用的方法去解决回调嵌套的问题,使我们的代码更容易理解和维护,而且Promise还增加了许多有用的特性,让我们处理异步编程得心应手。


如何创建Promise

ES6给我们提供了一个原生的构造函数Promise,我们可以看一下这个构造函数:

下面我们先来创建一个promise,下面是一个简单的示例:

下面来解释一下上面的代码:

【1】因为Promise是一个构造函数,所以我们使用了new操作符来创建promise。

【2】构造函数Promise的参数是一个函数(暂时叫它func),这个函数(func)有两个参数resolve和reject,它们分别是两个函数,这两个函数的作用就是将promise的状态从pending(等待)转换为resolved(已解决)或者从pending(等待)转换为rejected(已失败)。

【3】创建后的promise有一些方法,then和catch。当然我们也可以人为的在Promise函数上添加一些满足我们自己需求的方法,方便每一个promise对象使用。

如果我们使用一些ES6的语法的话,我们上面的代码会更加简洁:

其实可以这样理解,Promise函数体的内部包裹着一个异步的请求或者操作或者函数;然后我们可以在这个异步的操作完成的时候使用resolve函数将我们获得的结果传递出去,或者使用reject函数将错误的消息传递出去。


Promise对象的一些方法

Promise对象可以通过使用then方法将上一步返回的结果获取过来(不管是resolved还是rejected),可以通过使用catch方法捕获Promise对象在使用catch之前的异常。

首先来说一下then方法的使用:

我们可以看到,then方法可以接受两个函数作为参数,第一个函数是用来处理resolve的结果,第二个是可选的,用来处理reject的结果。也就是说,我们在创建p这个Promise对象的时候,通过函数resolve传递出去的结果可以被p的第一个then方法中的第一个函数捕获然后作为它的参数。通过函数reject传递出去的结果可以被p的第一个then方法中的第二个函数捕获然后作为它的参数。

当然我们还可以在每一个then方法中创建新的Promise,然后将这个Promise对象返回,之后我们就可以在后面的then方法中继续对这个对象进行操作。下面是一个简单的例子:

从上面的代码中我们可以看到,一旦创建一个Promise对象之后,我们就可以使用then方法来进行链式的调用,而且我们可以把每一次的结果都返还给下一个then方法,然后在下一个then方法中对这个值进行处理。每一个then方法中都可以再次新创建一个Promise对象,然后返还给下一个then方法处理。

Promise还有另一个方法catch,这个方法其实是then方法的一种特例,这个特例就是:

.then(null, rejection)

相当于我们不使用then方法的第一个函数,只是用第二个函数;catch函数比较简单,就是用来捕获之前的then方法里面的异常,我们可以简单的来看一个例子:

上面代码的输出结果如下:

progress...
VM141:9 Error: fail(…)

我们可以使用catch函数来捕获整个then函数链中的异常。


Promise的一些方法

Promise.all方法用来包装许多个Promise实例,然后组成了一个新的Promise对象,新的Promise对象的状态由前面几个被包裹的Promise对象的状态决定,如果前面的Promise都被resolve了,那么新的Promise的状态也是resolve的;只要有一个Promise被reject了,那么组成的新的Promise的状态也是reject的。

可以看下面一个例子:

上面的代码的输出结果如下:

[ Promise { <pending> },Promise { <pending> },Promise { <pending> } ]
[ 1, 2, 3 ] // 3s后输出的结果

Promise.race方法和上面的Promise.all有点类似,都是包装许多的Promise对象,然后组成了一个新的Promise对象,但是使用Promise.race的含义是:只要包裹的的Promise对象中有一个的状态发生了改变,那么组成的这个新的Promise对象的状态就是上面那个率先改变的Promise实例的状态。

下面是一个简单的例子:

上面程序的输出结果如下:

[ Promise { <pending> },Promise { <pending> },Promise { <pending> } ]
1 // 是最先改变状态的那个Promise实例resolve的值

Promise.resolve方法主要是将一个值转变为一个Promise对象,然后使它具有Promise的一些方法和特性,为了满足我们一些特殊情况下的要求。

下面是一个简单的例子:

上面的输出结果如下:

[ null, 0, 'hello', { then: [Function: then] } ]a thenable obj // Promise.resolve方法会将具有then方法的对象转换为一个Promise对象,然后就立即执行then方法。

Promise.reject方法和Promise.resolve方法一样,只不过通过Promise.reject方法产生的Promise对象的状态是rejected的,下面是一个示例:

let p = Promise.reject('fail');
p.catch((err) => {console.log(err);
}); // fail

上面的内容把ES6中新增的Promise的基本使用方法给大家讲了一下,希望对大家有多帮助。

十分钟快速了解 ES6 Promise相关推荐

  1. python新手教程 从零开始-Python零基础从零开始学习Python十分钟快速入门

    原标题:Python零基础从零开始学习Python十分钟快速入门 学习Python的,都知道Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python是一种动态解释型的 ...

  2. 十分钟快速DIY简易FM电台和收音机

    十分钟快速DIY简易FM电台和收音机 FM简介 实现功能 使用前准备 器件连接 频率调节 广播音乐 无线话筒 总结 原文链接:https://www.yourcee.com/newsinfo/2923 ...

  3. 【Microsoft Azure 的1024种玩法】五十四. 十分钟快速上手创建部署Azure speech服务

    [简介] Azure语音服务是Microsoft提供稳定可靠的云通信服务,其在单个 Azure 订阅中统合了语音转文本.文本转语音以及语音翻译功能,我们可以通过各种方式(语音 CLI.语音 SDK.S ...

  4. 用整站程序(网站源代码)十分钟快速建站

     用整站程序(网站源代码)十分钟快速建站 悬赏分:0 - 解决时间:2007-2-2 18:20 怎么做 提问者: guolibao888 - 试用期 一级 最佳答案 现在提起做网站,特别是一些做一些 ...

  5. Linux一键部署duckchat,DuckChat 1.0.7发布,十分钟快速搭建聊天系统

    DuckChat 1.0.7发布,十分钟快速搭建聊天系统 2018年09月28日 11:55作者:黄页编辑:黄页 分享 DuckChat是一款安全的私有聊天软件,基于PHP环境,可运行在Docker. ...

  6. Python语言十分钟快速入门

    假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(CheatSheet ...

  7. 梓晨教你十分钟快速搭建安装属于自己的网站

    其实搭建网站很简单,对老手来说方法很多,不过还是有些新手不明白,今天梓晨就为大家简单的讲解一下快速搭建网站的方法. 1:环境的选择 搭建网站有很多种方法,不过现在asp网站不多了,基本都是php的,一 ...

  8. 十分钟快速了解《你不知道的 JavaScript》(上卷)

    最近刚刚看完了<你不知道的 JavaScript>上卷,对 JavaScript 有了更进一步的了解. <你不知道的 JavaScript>上卷由两部分组成,第一部分是< ...

  9. linux下分析webmail代码,十分钟快速架设Linux系统下WebMail

    目前,网上能找到不少WebMail,但多为商业,动辄支持百万级用户.它们虽然功能很强,但对一般单位来讲,有点儿"大材小用".那么,能否找到这样一个WebMail:免费的.对中文支持 ...

最新文章

  1. 【目标检测】(6) YOLOV2 目标检测在V1基础上的改进
  2. 如何查他人【思科CCIE证书真伪、有效期】
  3. EOJ_1081_朋友圈
  4. mysql磁盘临时表清理_mysql 创建大量磁盘临时表
  5. python3 xlrd包的用法
  6. Spring-context-ConfigurationClassBeanDefinitionReader类
  7. zabbix替代smokeping的解决方案
  8. JS无刷新修改URL类似博客园翻页效果
  9. C# 版本设计模式(Design Pattern)(转)
  10. vc 获得桌面文件坐标_为何 Elementary OS 中使用 Pantheon 桌面
  11. SecureCRT的下载、安装、使用( 过程非常详细~)
  12. 时空行为检测数据集 JHMDB UCF101_24 详解
  13. windows系统电脑实用快捷键
  14. ZOJ 3987 Numbers(枚举)
  15. 高德地图巡航异步加载数据_python3爬虫-高德地图POI数据的爬取
  16. 页面跳转之前显示等待 wating ------
  17. UVA 10387 Billiard
  18. P4使用Ubuntu中安装教程
  19. js插件的经典写法与总结
  20. Kaggle实战:Store Sales - Time Series Forecasting

热门文章

  1. mysql数据转储方法_Mysql数据库各种导出导入数据方式的区别(我的理解错误还望指正)...
  2. 高度平衡的二叉搜索树基础概念与经典题目(Leetcode题解-Python语言)
  3. 组件库实战 | 教你如何设计Web世界中的表单验证
  4. 高等数学下-赵立军-北京大学出版社-题解-练习8.5
  5. nginx 带宽_前端工程师不可不知的Nginx知识
  6. 经典排序算法(6)——直接选择排序算法详解
  7. 网络时延——发送时延和传播时延
  8. 深入理解 JVM Class文件格式(十)
  9. P5591 小猪佩奇学数学(单位根反演)
  10. F - Sugoroku2(动态规划)