首页 > web前端 > js教程 > 正文

深入理解js promise chain_javascript技巧

WBOY
发布: 2016-05-16 15:02:04
原创
1424 人浏览过

新的标准里增加了原生的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 有关。再看一下示例代码:

<span>var</span> p1 = Promise.resolve("Success"<span>);</span><span>var</span> p2 =<span> p1.then(task1);//产生了向上的菱形</span><span>var</span> p3 = p2.then(task2);//产生了向上的菱形
登录后复制

Seperti yang anda lihat, kami tidak memberikan parameter kedua pada masa itu, yang bermaksud kami tidak mengendalikan situasi penolakan.

Selain itu, kalau nak handle reject, boleh pakai lepas tu, atau boleh guna Catch digunakan khas untuk handle reject.

1. Jika keadaan akhir p1 (selesai atau tolak) diproses dengan betul (apabila memanggil kemudian, panggilan balik yang sepadan dihantar, iaitu, terdapat berlian yang sepadan), maka keadaan p2 akan berubah untuk menyelesaikan .

2. Jika keadaan akhir p1 (selesai atau tolak) tidak diproses dengan betul (apabila membuat panggilan, panggilan balik yang sepadan hilang, iaitu, tiada berlian yang sepadan), maka keadaan p1 akan dihalakan ke p2 (menerima status p1).

3. Sampaikan seperti ini.

4. Artikel ini tidak menerangkan cara mendapatkan data akhir Janji sebelumnya dalam panggilan balik, iaitu cara memindahkan data Terdapat banyak tutorial mengenai perkara ini.

Tiga, beberapa contoh diberikan di bawah untuk meringkaskan artikel ini.

Status P1 dalam gambar diberi, azam atau tolak semuanya diberikan sendiri. Matlamatnya adalah untuk menyimpulkan keadaan akhir P2 dan P3.

Di atas ialah empat contoh bebas tanpa kaitan antara mereka.

X bermaksud P3 tidak menggunakan fungsi then atau catch, jadi tiada cara untuk menangani penyelesaian atau penolakan.

Akhir sekali, jika terdapat sebarang kesilapan, sila betulkan tepat pada masanya, terima kasih! ~! ! @~~~

Pemahaman mendalam tentang rantai janji js di atas adalah semua kandungan yang dikongsi oleh editor saya harap ia dapat memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板