// 生成一个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>
最后的输出结果是:
可以看到前面的代码在阻塞后面的代码。 导致后面的代码无法运行。
因为我们希望这个耗时的代码越快执行越好,会非常严重的影响用户体验,所以把它放在了最前面,如果它没有什么用,就放在了最后面了。
但是后面的代码我们也希望尽快执行啊,那么该怎么办呢? 如果可以让前面的代码单独在一个线程上运行, 而不影响后面的代码运行就好了。
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");
最终的输出结果如下:
可以看到在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>