深入理解js promise chain

新的标准里增加了原生的Promise。

这里只讨论链式使用的情况，思考一下其中的细节部分。

一，关于 then() 和 catch() 的复习

then() 和 catch() 的参数里可以放置 callback 函数用来接收一个 Promise的最终结果。

then() 可以接收一个参数，那么这个 callback 只会在 Promise resolve() 的时候被调用。

then() 还可以接收第二个参数，那么第二个 callback 用来处理 Promise reject() 的情况。

catch() 专门处理 Promise reject() 的情况。

也就是说，then() 可以兼用，catch() 只能处理 reject() 的情况。不过，推荐 使用 then() 处理 resolve()，catch() 处理 reject()。

二，不过，我要讲的不是上面的东西，以上只是复习一下基本用法。这里开始讲 then() 和 catch() 的返回值和链式用法的细节。

那么官方文档说，then() 和 catch() 都返回一个 Promise ，这个说法就很耐人寻味了。（我是js新手，以前的在野的 promise 我没有接触过）。

首先，这个新返回的 Promise 不是原来的 Promise；

第二，这个新返回的 Promise 的状态的变化(是resolve()了；还是reject()了。)跟上一个 Promise 的状态 和 then() 的使用方式有关。

先说明 then() 的情况：（catch 类似）

var p1 = Promise.resolve("Success");
var p2 = p1.then(task1);
var p3 = p2.then(task2);

注：上面的task1 和 task2 都是callback。

这里，p1是一个创建出来的 Promise，并且直接 resolve()了；

p2是用then() 得到的一个 Promise， p3也是用then()得到的一个 Promise。

那么p2的状态如何改变呢，p3呢？

我准备用下图来讲解这个概念：

其中，

1. 八边形代表一个Promise对象。

2. 圆形代表一个Promise内部的状态，黑色箭头代表状态变化。

3. 向右的箭头代表调用 then 函数。

4. 也就是说，只要调用 then 函数就会生成一个新的 Promise 对象。

5. 在调用 then 函数的时候，不知道前面一个 Promise 对象的状态是什么，是 pending 还是 settled？这个无法假设，在外界看不见。

6. then 函数的调用是不会阻塞的，也就是说，几乎是瞬间 p2 和 p3 就是生成了，即使 p1 还在缓慢的迁移它自身的状态。

我们知道，p1的状态是被 resolve了 （见上面的代码）。不过，这里还没有说明白 p2 和 p3 的状态是如何变化的，是 resolve 了还是 reject 了？看下面这个新图。

可以看到多了菱形。

菱形代表 调用 then 时，传入的 callback 函数。向上的菱形代表传入了【针对 上一个 Promise 对象 被 resolve 了的】处理，向下的菱形代表传入了【针对上一个 Promise 对象 被 reject 的】处理。

注意：本例中没有传入 针对 reject 的处理，也就是说，上图中不该画出向下的菱形，这里为了方便画出了，只用知道向上向下的菱形跟我们具体如何使用 then 或者 catch 有关。再看一下示例代码：

var p1 = Promise.resolve("Success");var p2 = p1.then(task1);//产生了向上的菱形var p3 = p2.then(task2);//产生了向上的菱形

可以看出，then 的 第二个参数我们没有给出，也就是我们没有处理 reject 的情况。

补充一句，如果想要处理 reject 可以使用 then ，也可以使用 catch，catch专门用来处理 reject ，除此之外，和 then 没有区别。

1. 如果 p1 的最终状态（resolve 或者 reject）被正确处理（调用 then 时，传入了对应的 callback，也就是有对应的菱形）了，那么 p2 的状态就会转为 resolve。

2. 如果 p1 的最终状态（resolve 或者 reject）没有被正确处理（调用 then 时， 缺少了对应的 callback，也就是没有对应的菱形），那么 p1 的状态就会路由到 p2（接收 p1 的状态）.

3. 如此传递下去。

4. 本文不讲解，如何在 callback 中取得上一个 Promise 最终数据，也就是说，数据如何传递，这个有很多教程了。

三，下面给出一些例子来总结本文。

图中 P1的状态是给定的，resolve或者reject，都是自己给定的。目的是推出 P2 和 P3 的最终状态。

以上是四个独立的例子，之间没有联系。

X代表P3没有使用 then 或者 catch 函数，也就谈不到 针对 resolve或者reject 的处理了。

最后，若有错误，请及时指正，多谢！~！！@~~~

以上这篇深入理解js promise chain就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 举例详解JavaScript中Promise的使用

    摘录 – Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式,那么这意味着什么呢,读完下文你就了解了. "Promises" 代表着在javascript程序里下一个伟大的范式,但是理解他们为什么如此伟大不是件简单的事.它的核心就是一个promise代表一个任务结果,这个任务有可能完成有可能没完成.Promise模式唯一需要的一个接口是调用then方法,它可以用来注册当promise完成或者失败时调用的回调函数,这在Common

  • 详解JavaScript异步编程中jQuery的promise对象的作用

    Promise, 中文可以理解为愿望,代表单个操作完成的最终结果.一个Promise拥有三种状态:分别是unfulfilled(未满足的).fulfilled(满足的).failed(失败的),fulfilled状态和failed状态都可以被监听.一个愿望可以从未满足状态变为满足或者失败状态,一旦一个愿望处于满足或者失败状态,其状态将不可再变化.这种"不可改变"的特性对于一个Promise来说非常的重要,它可以避免Promise的状态监听器修改一个Promise的状态导致别的监听器的行

  • AngularJS中处理多个promise的方式

    在使用AngularJS中处理promise的时候,有时会碰到需要处理多个promise的情况. 最简单的处理就是每个promise都then.如下: var app = angular.module("app",[]); app.controller("AppCtrl", function($q. $timeout){ var one = $q.defer(); var two = $q.defer(); var three = $q.defer(); $time

  • JavaScript中的Promise使用详解

    JavaScript中的Promise使用详解

    许多的语言,为了将异步模式处理得更像平常的顺序,都包含一种有趣的方案库,它们被称之为promises,deferreds,或者futures.JavaScript的promises ,可以促进关注点分离,以代替紧密耦合的接口. 本文讲的是基于Promises/A 标准的JavaScript promises.[http://wiki.commonjs.org/wiki/Promises/A] Promise的用例: 执行规则 多个远程验证 超时处理 远程数据请求 动画 将事件逻辑从应用逻辑中解耦

  • JavaScript编程中的Promise使用大全

    尽管Promise已经有自己的规范,但目前的各类Promise库,在Promise的实现细节上是有差异的,部分API甚至在意义上完全不同.但Promise的核心内容,是相通的,它就是then方法.在相关术语中,promise指的就是一个有then方法,且该方法能触发特定行为的对象或函数. Promise可以有不同的实现方式,因此Promise核心说明并不会讨论任何具体的实现代码. 先阅读Promise核心说明的意思是:看,这就是需要写出来的结果,请参照这个结果想一想怎么用代码写出来吧. 起步:用

  • 异步JavaScript编程中的Promise使用方法

    异步? 我在很多地方都看到过异步(Asynchronous)这个词,但在我还不是很理解这个概念的时候,却发现自己常常会被当做"已经很清楚"(*￣?￣). 如果你也有类似的情况,没关系,搜索一下这个词,就可以得到大致的说明.在这里,我会对JavaScript的异步做一点额外解释. 看一下这段代码: var start = new Date(); setTimeout(function(){ var end = new Date(); console.log("Time elap

  • 浅谈JavaScript中的对象及Promise对象的实现

    浅谈JavaScript中的对象及Promise对象的实现

    JavaScript 中的所有事物都是对象:字符串.数值.数组.函数.下面小编给大家收集整理些javascript中的对象及promise对象的实现.具体内容如下: 到处都是对象 window对象 常用的属性和方法介绍 location 包含页面的URL,如果改变这个属性,浏览器会访问新的URL status 包含将在浏览器状态去显示的一个串.一般在浏览器左下角 onload: 包含了需要在页面完全加载后调用的函数 document: 包含DOM alert方法: 显示一个提醒 prompt方法

  • 理解JavaScript中Promise的使用

    Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doom),绝对是一种糟糕的编程体验.于是便有了 CommonJS 的 Promises/A 规范,用于解决回调金字塔问题.本文先介绍 Promises 相关规范,然后再通过解读一个迷你的 Promises 以加深理解. 什么是 Promise 一个 Promise 对象代表一个目前还不可用,但是在未来的

  • javascript使用Promise对象实现异步编程

    Promise对象是CommonJS工作组为异步编程提供的统一接口,是ECMAScript6中提供了对Promise的原生支持,Promise就是在未来发生的事情,使用Promise可以避免回调函数的层层嵌套,还提供了规范更加容易的对异步操作进行控制.提供了reject,resolve,then和catch等方法. 使用PROMISE Promise是ES6之后原生的对象,我们只需要实例化Promise对象就可以直接使用. 实例化Promise: var promise = new Promis

  • javascript Promise简单学习使用方法小结

    javascript Promise简单学习使用方法小结

    解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Promise交互的主要方式是通过他的then()方法来注册回调函数,去接收Promise的最终结果值 Promise相关的协议有PromiseA和PromiseA+ 定义一个类Promise 定义属性队列queue,初始化空数组[] 定义属性值value,初始化null 定义属性状态status,初始化"pending"(默认值) 定义成员方法getQueue(),返回属性queue 定义成员

  • 详细解读JavaScript编程中的Promise使用

    Promise核心说明 尽管Promise已经有自己的规范,但目前的各类Promise库,在Promise的实现细节上是有差异的,部分API甚至在意义上完全不同.但Promise的核心内容,是相通的,它就是then方法.在相关术语中,promise指的就是一个有then方法,且该方法能触发特定行为的对象或函数. Promise可以有不同的实现方式,因此Promise核心说明并不会讨论任何具体的实现代码. 先阅读Promise核心说明的意思是:看,这就是需要写出来的结果,请参照这个结果想一想怎么用

  • javascript下使用Promise封装FileReader

    Promise 在处理异步的时候是个很好的选择,可以减少嵌套层次,让代码更好读,逻辑更清晰.ES6 将其加入规范,jQuery 3.0 也修改实现向规范靠拢(3.0 发布公告).一些新增元素比如 .fetch() 原生就 "thenable",不过大多数以往的 API 还要依赖回调,这个时候,我们只要将它们重新封装,就能避开嵌套陷阱,享受 Promise 带来的愉悦体验. Promise 一般用法 先来看下 Promise 的一般用法. // 声明 Promise 对象 var p =

  • 详解Javacript和AngularJS中的Promises

    比如页面调用google地图的api时就使用到了promise. function success(position){ var cords = position.coords; console.log(coords.latitude + coords.longitude); } function error(err){ console.warn(err.code+err.message) } navigator.geolocation.getCurrentPosition(success, e

随机推荐