Promise的概念在ES6标准推出来之前已经深入人心,很多框架和第三方库都有类似的实现。但在深入理解ES6的Promise对象的时候,受之前经验的影响,很多概念给人似是而非的感觉,其中有一个特别明显的地方就是ES6中对Promise对象状态的定义以及resolved概念。

Promise的状态

Promise对象有三个状态:pending,fulfilled,rejected,MDN文档上对Promise对象状态变化过程用一幅图描述:

图中有几个小细节:

  1. 图中的fulfill和reject只是表示指向不同结果,而不是指一个过程,在到达fulfilledrejected状态前promise都处在pending状态。
  2. settled包括了fulfilledrejected
  3. promise只会在pendingfulfilledrejected三种状态下切换。

resolved 和 unresolved

事情在现在看来都很美好,状态清晰,一目了然。然而,在各种教程中我们会看到这样一个状态:resolved,阮老师的ECMAScript 6 入门中直接把它当作了fulfilled状态:

Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和Rejected(已失败)。

但是MDN中的备注是这样写的:

你可能也会听到一个术语resolved,它表示Promise对象处于settled状态,或者Promise对象被锁定在了调用链中。

嗯?记不记得上面提到settled状态包括fulfilledrejected状态,那么他至少不能和fulfilled状态划等号吧?于是我又搜了搜,发现网上很多文章提到resolved这个词时,有人直接当作fulfilled状态,有人把它理解为complete(类似地,fulfilled是success,rejected自然就是error或者failure),不过更多人都是很含糊地引用了一下文档或者阮老师的文章。

不过确实有人直接提出了这个问题:Promise的fulfill和resolve为啥要用两个词?,我着重看了贺师俊老师的回答:

因为 fulfill 和 resolve 是不同的。

resolve 只是表示这个 promise 已经确定了,比如 promise A 被 resolve 为 promise B,则 A 已经 resolved 但是并未 fulfilled 。

好吧,我承认我一开始看没看懂...

不过还好在备注那里MDN放出了一篇帮助理解的文章,Domenic Denicola 的 States and Fates,基本把这两个概念说清楚了,不过文中只有简单的文字描述,下面说一下我自己的理解。

state 和 fates

文章将Promise分得更细,分为了状态(state)和结果(fates,命运,原谅我粗浅的翻译)。

状态(state)就是上面提到的三种状态,需要稍微留意一下的是,文中提到settled不是一种Promise状态,只是一种语义上的便利,说白了就是描述Promise确定了而已。

结果(fates)分为resolvedunresolved,两种结果互斥。

  • resolved,原文解释有点绕:

A promise is resolved if trying to resolve or reject it has no effect,当没办法去resolve或reject一个promise的时候,这个promise就是resolved的。

  • unresolved,原文解释倒是很简单:非resolved的promise...... (:з」∠)

显而易见,只要理解了resolved的描述,自然就理解unresolved。首先先提一个Promise的概念,即当Promise的状态一旦改变,就永久保持该状态。所以什么时候没办法去resolve或reject一个promise对象呢?

  1. 处于fulfilledrejected状态的promise对象,因为他们已经无法改变状态,而resolve和reject只能对pending状态的promise有效。
  2. 处于pending状态的promise对象也有可能处于resolved,当promise对象被'锁定'在另外一个promise对象或者一个非即时返回的thenable函数中时,也就是上面贺老师提到的promise A 被 resolve 为 promise B这种情况,为了帮助理解,下面用代码举个例子。

说明:Chrome(57.0.2987.133)打印promise对象的时候,[[PromiseStatus]]有三个值:pending,resolved,rejected,这里的resolved状态就是指fulfilled状态,和我们要说明的resolved没有关系,在firefox(49.0.1)中,[[PromiseStatus]]三个值和标准相同:pending,fulfilled,rejected。为了避免混淆,用firefox做测试

先上一个简单的代码:

var p1 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'p1 resolve');
});
p1.then(value => {
console.log(value); // p1 resolve
console.log(p1); // Promise { <state>: "fulfilled", <value>: "p1 resolve" }
})

很简单,一秒后打印p1 resolve,p1对象状态为fulfilled。再来看第二例子,在resolve方法中新建了一个Promise对象:

var p1 = new Promise((resolve, reject) => {
function F() {
resolve(new Promise((resolve, reject) => {
console.log(p1); // Promise { <state>: "pending" }
setTimeout(resolve, 2000, 'new Promise resolve');
}))
}
setTimeout(F, 1000, 'p1 resolve');
});
p1.then(function(value) {
console.log(value); // new Promise resolve
console.log(p1); // Promise { <state>: "fulfilled", <value>: "new Promise resolve" }
})

运行一下发现,一秒后打印

Promise { <state>: "pending" }

三秒后打印

new Promise resolve
Promise { <state>: "fulfilled", <value>: "new Promise resolve" }

可以看到,一秒后p1调用了resolve方法,和上一个例子一样被resolve了,理应变为fulfilled状态,但是他被'锁定'在了一个新的Promise对象中,所以状态没有立刻改变并执行onfulfilled方法,而是依然处于pending状态,但是很明显的是,他的最终结果(这里可以体会到称为fate的原因,有种宿命的味道)就是fulfilled状态,此时的p1不能再resolve或reject。再过了两秒后新Promise对象resolve,p1执行then(),状态变为fulfilled,打印的值也变成了new Promise resolve,而不是p1 resolve。此时打印出的p1的状态就是fulfilled。

到此,处于pending状态的promise对象也有可能处于resolved情况就很清楚了,至于unresolved,就是promise可以被resolve或reject的时候,此时promise对象一定处于pending状态且没有被resolve或reject为其他Promise对象 / 非即时返回的thenable函数。而反过来,处于pending状态的promise对象不一定是unresolved。

小结

到这里Promise对象的状态和resolved的概念差不多都清楚了,这篇文章也是我个人理解过程的一个记录。不过参考到的文章不多,文中的解释可能并不是很准确,所以在这里贴出来,希望能看看其他人的理解。

一些闲话

说起来,这篇文章离我上一篇文章已经很久了,真是光阴似箭,岁月......算了,还是不感慨了。现在工作确实没有在学校那会儿充足的时间和精力,总结还是有不少,大部分都在个人的笔记里,没有贴到博客。有些觉得总结份量不够,有些觉得个人的理解不深,不敢随意贴出来。不过在学习一些稍微深入一点的概念的时候,总觉得网上的一些资料并不是很全面和客观,人云亦云的东西太多,自己的理解也是七七八八。所以希望能够贴出来和大家交流,防止自己闭门造车,后续如果工作时间允许,会发一些这样的文章,对前端一些比较重要的知识点深入理解。

本文来源:JuFoFu

本文地址:http://www.cnblogs.com/JuFoFu/p/5140302.html

参考文档:

Domenic Denicola . States and Fates

阮一峰 . Promise 对象

MDN . Promise

水平有限,错误欢迎指正。原创博文,转载请注明出处。

ES6 Promise的resolved深入理解的更多相关文章

  1. ES6 Promise 状态解惑

    Promise的概念在ES6标准推出来之前已经深入人心,很多框架和第三方库都有类似的实现.但在深入理解ES6的Promise对象的时候,受之前经验的影响,很多概念给人似是而非的感觉,其中有一个特别明显 ...

  2. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  3. ES6 Promise用法讲解

    所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. 下面代码创造了一个 ...

  4. ES6 Promise 异步操作

    最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...

  5. 大白话讲解Promise(二)理解Promise规范

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

  6. 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

    Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...

  7. ES6 Promise 接口

    构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...

  8. ES6 Promise 对象

    Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...

  9. ES6 Promise 全面总结

    转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...

随机推荐

  1. jeakins用户配置

    进入jeakins:系统管理-全局安全设置 如果有多个用户视情况而定进行权限配置

  2. 最小化安装Linux的常用配置整理

    基于安全性考虑,将服务器进行最小化安装,毕竟软件包越少,漏洞越少,相对来说就约安全,但是最小化安装会给运维带来一些问题和不便,下面是我总结的,常见的一些配置和工具的安装,仅供各位大神参考,如有新的id ...

  3. android studio 配置网络代理

    1.首先在vultr网站购买服务器. 然后使用shadowsocksR给服务器配置FQ,再在本地机器配置好shadowsocksR. 参考网址:https://github.com/getlanter ...

  4. 第一次玩博客 感觉自己特别low

    第一天来  来好激动第一天来  来好激动第一天来  来好激动第一天来  来好激动第一天来  来好激动第一天来  来好激动第一天来  来好激动第一天来  来好激动第一天来  来好激动第一天来  来好激动 ...

  5. qemu中的网络设置

    https://www.cnblogs.com/hukey/p/6436211.html 这个链接里教你怎么操作kvm的各种网络模式,实际操作成

  6. NAT64与DNS64基本原理概述

    NAT64与DNS64基本原理概述 1.NAT64与DNS64背景     在IPv6网络的发展过程中,面临最大的问题应该是IPv6与IPv4的不兼容性,因此无法实现二种不兼容网络之间的互访.为了实现 ...

  7. POJ 1061 青蛙的约会 | 同余方程和exGcd

    题解: 要求s+px=t+qx (mod L) 移项 (p-q)x=t-s (mod L) 等价于 (p-q)x+Ly=t-s 即ax+by=c的方程最小非负根 exGcd后乘个C #include& ...

  8. 部分浏览器上a标签包裹的dom元素显示不正常

    在苹果和部分安卓机上出现,pc端和chrome浏览器响应式设计里怎么样也不会出现的访问后a标签包裹的dom元素显示不正常a标签内的hr元素颜色显示不正常hr水平线的颜色被 bootstrap的css的 ...

  9. nutch 2.1安装问题集锦

    参照官方文档http://nlp.solutions.asia/?p=180 中间碰到的问题,解决方法参考 http://blog.javachen.com/2014/05/20/nutch-intr ...

  10. 埃及分数问题_迭代加深搜索_C++

    一.题目背景 http://codevs.cn/problem/1288/ 给出一个真分数,求用最少的1/a形式的分数表示出这个真分数,在数量相同的情况下保证最小的分数最大,且每个分数不同. 如 19 ...