深入解析ES6中的promise(3)

// 生成一个Promise对象的数组 var promises = [2, 3, 5, 7, 11, 13].map(function (id) { return getJSON("/post/" + id + ".json"); }); Promise.all(promises).then(function (posts) { // ... }).catch(function(reason){ // ... });

  在这个例子中,通过数组的map生成了6个Promise对象,然后作为参数传递给了Promise.all() 只有这6个Promise对象最终返回的都是 resolved时, 才会调用Promise.all()后面then()方法。

第六部分:Promise.race()

  该方法同样是将多个Promise实例包装成一个新的Promise实例,如下:

var p = Promise.race([p1, p2, p3]);

  在上面的代码中,如果有一个Promise率先改变状态,p的状态就会跟着改变。

第七部分: Promise.resolve()

  如果我们希望将一个现有对象转化为Promise对象,我们就可以使用Promise.resolve()方法。根据参数的不同可以分为4种情况:

(1)参数是一个Promise实例

  如果参数是Promise实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

(2)参数是一个thenable对象

  如果参数是一个thenable对象,即具有then()方法的对象,那么Promise.resolve()就会将该对象立即转化成 Promise对象那个,并立即执行then方法。

(3)参数不是具有then方法的对象,或根本就不是对象

  如果参数是一个原始值,或者是一个不具有then方法的对象,则Promise.resolve方法返回一个新的Promise对象,状态为Resolved。

(4)不带有任何参数

第八部分: Promise.reject()

  Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。

第九部分: 理解Promise

  它的作用就是如果前面的一段代码非常的耗时,就会阻塞后面的某个代码片段。  所以我们希望他不要阻塞后面的代码,那么就让他异步好了。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>testsettimeout</title> </head> <body> <div> </div> <script> console.time("time"); for (var i = 0; i < 50000; i++) { var li = document.createElement("li"); document.querySelector(".wrap").append(li); } console.timeEnd("time"); var a = 10; var b = a + 25; console.log( a); console.log(b); console.timeEnd("time"); </script> </body> </html>

  最后的输出结果是:

深入解析ES6中的promise

  可以看到前面的代码在阻塞后面的代码。 导致后面的代码无法运行。

 因为我们希望这个耗时的代码越快执行越好,会非常严重的影响用户体验,所以把它放在了最前面,如果它没有什么用,就放在了最后面了。

  但是后面的代码我们也希望尽快执行啊,那么该怎么办呢?  如果可以让前面的代码单独在一个线程上运行, 而不影响后面的代码运行就好了。

setTimeout()就可以做到,如下所示:

console.time("time"); setTimeout(function() { for (var i = 0; i < 50000; i++) { var li = document.createElement("li"); document.querySelector(".wrap").append(li); } console.timeEnd("time"); }, 0); var a = 10; var b = a + 25; console.log(a); console.log(b); console.timeEnd("time");

  最终的输出结果如下:

深入解析ES6中的promise

  可以看到在setTimeout中的函数一开始就执行了。

  但是为什么setTimeout的内容执行的这么慢呢? 我们再看一个例子

console.time("time"); setTimeout(function() { console.timeEnd("time"); }, 0);

  结果如下:

time: 2.234ms

即 setTimeout 自身就会先消耗一定的时间。

ok,那么说了半天Promise到底怎么和他们比较呢? 他的价值在哪里呢?

价值都在这里了!看下面的这个例子:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>testsettimeout</title> </head> <body> <div> </div> <script> let promise = new Promise(function(resolve, reject) { console.log('Promise! 我是Promise对象里的函数,我最早出现是因为我要给后面一个耗时的家伙提供数据a'); var a = 20; resolve(a); }); promise.then(function(value) { console.log('哈哈哈,我得到数据a了,要开始执行喽。我是一个非常耗时的操作,依赖前面的数据,但是我想快一点执行,这有利于用户体验,所以别把我放在后头啊;我被放在了一个新的线程上,不会阻塞别人的'); for (var i = 0; i < 1000000; i++) { var li = document.createElement("li"); document.querySelector(".wrap").appendChild(li); } console.log("执行完毕"); }); console.log('Hi! 我是什么都不依赖的程序,但我也想快一点执行,不能委屈我啊'); </script> </body> </html>

深入解析ES6中的promise

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/f1e91a881fd1efc6dec6311fade7fa74.html