新的标准里增加了原生的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的更多相关文章

  1. JS - Promise使用详解--摘抄笔记

    第一部分: JS - Promise使用详解1(基本概念.使用优点) 一.promises相关概念 promises 的概念是由 CommonJS 小组的成员在 Promises/A 规范中提出来的. ...

  2. [Ramda] Refactor a Promise Chain to Function Composition using Ramda

    Promise chains can be a powerful way to handle a series of transformations to the results of an asyn ...

  3. js Promise finally All In One

    js Promise finally All In One finally let isLoading = true; fetch(myRequest).then(function(response) ...

  4. [Node.js] Promise,Q及Async

    原文地址:http://www.moye.me/2014/12/27/promise_q_async/ 引子 在使用Node/JS编程的时候,经常会遇到这样的问题:有一连串的异步方法,需要按顺序执行, ...

  5. ANGULAR JS PROMISE使用

    Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写javascript异步代码时,callback是最最简单的机制,可是用这种机制的 ...

  6. JS Promise API

    一.描述 我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以继续下一个任务. 这种“单线程”的好处就是 ...

  7. js promise 介绍和使用

    1.什么是promise js是单线程执行的. ajax是典型的异步操作,我们通常会在ajax的成功或者失败之后写上回掉函数.这中写法是一种嵌套的方式,如果回掉多了会造成代码复杂并且难以复用. pro ...

  8. [转]JS - Promise使用详解1(基本概念、使用优点)

    一.promises相关概念 promises 的概念是由 CommonJS 小组的成员在 Promises/A 规范中提出来的.   1,then()方法介绍 根据 Promise/A 规范,pro ...

  9. [转]JS - Promise使用详解2(ES6中的Promise)

    原文地址:https://www.hangge.com/blog/cache/detail_1638.html 2015年6月, ES2015(即 ECMAScript 6.ES6) 正式发布.其中  ...

随机推荐

  1. windows命令——taskkill

    C:\Users\Administrator>taskkill /? TASKKILL [/S system [/U username [/P [password]]]] { [/FI filt ...

  2. 简单了解JS 中的indexOf方法

    indexOf() 方法返回指定值在字符串对象中首次出现的位置.从 fromIndex 位置开始查找,如果不存在,则返回 -1. 首先先看下MDN下的参考文档,文档里列出的很详细,这里我只列出了注意点 ...

  3. C#设计模式-代理模式

    在软件开发过程中,有些对象有时候会由于网络或其他的障碍,以至于不能够或者不能直接访问到这些对象,如果直接访问对象给系统带来不必要的复杂性,这时候可以在客户端和目标对象之间增加一层中间层,让代理对象代替 ...

  4. KnockoutJS 3.X API 第七章 其他技术(2) 使用扩展器来增加可观察量(监控属性)

    Knockout observables提供了支持读取/写入值并在值改变时通知订阅者所需的基本功能. 但在某些情况下,您可能希望向可观察者添加其他功能. 这可能包括通过在可观察者前面放置一个可写的计算 ...

  5. margin-top失效的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...

  6. Kali信息收集系列:(都是我以前的笔记整理了一下,就没加水印,习惯就好)

    好几天没发微信公众号了,今天一起发下.(最近有点事情) 前些天老业界的一位朋友问我一些Safe新时代信息收集的问题 逆天虽然好多年不干老本行,但隔段时间都会关注一下 于是就花了点时间整理了一下,你们就 ...

  7. C#设计模式系列:外观模式(Facade)

    外观模式主要解决的问题是:当我们有多个类要处理时,往往要一个类一个类地区调用,没有复用性和扩展性.外观模式通过定义一个界面,把处理子类的过程封装成操作,主要就把用户从复杂的调用过程中解放出来. 1.外 ...

  8. 传智播客--WPF基础视频学习--sender解释(小白内容)

    sender是激发该事件的对象,如果用在Button的双击点击事件上的话,就是只当前点击的对象 用例子来说明一下,有两个Button控件,分别为1和2,同时绑定一个Button_Click事件 pri ...

  9. 【原创】开源.NET排列组合组件KwCombinatorics使用(三)——笛卡尔积组合

           本博客所有文章分类的总目录:本博客博文总目录-实时更新 本博客其他.NET开源项目文章目录:[目录]本博客其他.NET开源项目文章目录 KwCombinatorics组件文章目录: 1. ...

  10. 应用程序框架实战十七:DDD分层架构之值对象(层超类型篇)

    上一篇介绍了值对象的基本概念,得到了一些朋友的支持,另外也有一些朋友提出了不同意见.这其实是很自然的事情,设计本来就充满了各种可能性,没有绝对正确的做法,只有更好的实践.但是设计与实践的好与坏,对于不 ...