今天我们来说then一些特殊情况以及Promise.all()与Promise.race()。

我们都知道函式作为参数传入时,可以参照的方式传入,也能传入时执行拿回传值作使用:

function useReference(cb){

console.log(“useReference”);

console.log(cb());

}

function useFunctionValue(val){

console.log(val);

}

function funB(){

return“funB”;

}

useReference(funB);

useFunctionValue(funB());

但是在Promise中使用then时,要注意到:

onFulfilled或onRejected不是函式时,忽略跳过(thenorwegianstig)。

function doA(){

console.log('doA start')

return new Promise(function(resolve,reject){

console.log('doA end');

resolve(1);

})

}

function doB(){

console.log('doB');

return 10;

}

function final(value){

console.log('final');

console.log(value);

return 0;

}

//正常函式参照写法

doA().then(doB).then(final);

//doA start

//doA end

//doB

//final

//10

上面这个是一般我们把函式当参数传入时的做法,那如果在传入doB时就先执行了,会发生什么事情呢?

doA().then(doB()).then(final);

//doA start

//doA end

//doB

//final

//1

在执行then(doB())时,虽然有说到如果不是函式便会跳过,但我们知道函式的回传值也可以为函式,所以JS还是会执行它,当然最后得到的只是doB()的回传值2。

所以then(doB())会继续用fulfilled的状态,带着值1回传新的Promise物件给下个then方法。

如果真的要这样写,可以改写成这样:

doA()

.then((val)=>{

})

.then(final);

Promise.all()

前面在用Promise时都是一次进行一个任务,但如果今天需要一次执行多个任务时,像是同时发出两个ajax请求,就需要用Promise.all()。

语法如下:

Promise.all(iterable);

iterable代表可以传入一个数组或字串,一般来说都会使用数组当作参数。

Promise.all()会将数组中的值全部执行完后,才会接着执行下个then方法。这边要注意到几个规则:

数组索引值与执行顺序无关。

数组中的值如果不是Promise物件,则会自动使用Promise.resolve方法转换。

执行过程中只要数组其中一个值发生错误,会立即回传reject状态。

执行完成后会回传一个数组值。

最好每次在使用时加上错误处理。当然一般Promise也要!

让我们来看几个例子吧:

var promise1 = 42;

var promise2 = Promise.resolve(“hihi”);

var promise3 = new Promise((resolve,reject)=> {

setTimeout(()=> resolve('Im async'),1000)

});

Promise.all([promise1,promise2,promise3]).then((value)=> {

console.log(value)

}).catch((err)=> {

console.log(err.message)

});

//[42,“hihi”,“Im async”]

Promise.race()

Promise.race()的规则跟Promise.all()一样,区别在于只会回传最快完成的那个,不论最快成功或失败。

通常用于获取资源时有很多个地方,像是服务器端与自己电脑端,只需要取最快回来的就好。

var promise1 = new Promise((resolve,reject)=> {

setTimeout(()=> resolve('delay 200'),200)

});

var promise2 = new Promise((resolve,reject)=> {

setTimeout(()=> resolve('delay 1000'),1000)

});

var promise3 = new Promise((resolve,reject)=> {

setTimeout(()=> resolve('delay 2000'),2000)

});

Promise.race([promise1,promise2,promise3]).then((value)=> {

console.log(value)

}).catch((err)=> {

console.log(err.message)

});

//delay 200

到这边Promise就告一段落了,希望大家看完后有比较了解。

如果有错误及来源未附上也欢迎留言指正,那么我们明天见(aichi-kaigo)。

学JS的心路历程-Promise(三)的更多相关文章

  1. 学JS的心路历程-Promise(二)

    昨天有说到Promise的创建以及then的用法,今天我们来看错误处理. then onRejected 我们昨天有提到说,then两个函式参数,onFulfilled和onRejected,而onR ...

  2. 学JS的心路历程-Promise(一)

    今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么. 未来值 假设我们今天来到快餐店,点了一个汉堡,付钱给店员. 点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回 ...

  3. 学JS的心路历程 -函式(三)this

    this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...

  4. 学JS的心路历程-物件与原型(三)

    昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题. 复写constructor的问题(vmwork) 我们昨天有提到「建构式函式可 ...

  5. 学JS的心路历程 - PixiJS -基础(三)

    今天我们来试着移动图片吧! 首先,一样先把图片放到PIXI的stage中: let app = new PIXI.Application({ width: 800, height: 600, back ...

  6. 学JS的心路历程Day26 - PixiJS -入坑

    后来知道也可以透过canvas让网页动起来! 而PixiJS是使用WebGL在canvas上绘制内容与制作动态 且同时有下列特色: 支持多点触控 掩码与混合模式 可外加WebGL滤镜 多装置支持 等等 ...

  7. 学JS的心路历程-物件与原型(一)

    前两天说明面向对象的三大特性及JS不符合面向对象,只能称作支持面向对象而已,今天我们来看看JS的原型继承. 首先我们先来看,什么是原型(vmwork): 两个物件之间的原型关系(prototype r ...

  8. 学JS的心路历程-JS支持面向对象?(一)

    昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...

  9. 学JS的心路历程-闭包closure

    闭包是是纯函式语言的一个特性,也是JS的一个关键性的特色,虽然不了解也能开发程序,但我们不是这种人对吧? 闭包不仅可以减少某些高阶功能的代码数量和复杂度,并且可以让我们做到原本无法做的复杂功能.听到这 ...

随机推荐

  1. 「2017 山东一轮集训 Day5」距离

    /* 写完开店再写这个题目顿时神清气爽, 腰也不疼了, 眼也不花了 首先考虑将询问拆开, 就是查询一些到根的链和点k的关系 根据我们开店的结论, 一个点集到一个定点的距离和可以分三部分算 那么就很简单 ...

  2. windows下安装tomcat8

    1.下载tomcat,下载地址:https://tomcat.apache.org/download-80.cgi 2.官网下载下来的tomcat是zip格式,解压到安装目录 3.修改环境变量: CA ...

  3. JVM总结-垃圾回收(下)

    大部分的 Java 对象只存活一小段时间,而存活下来的小部分 Java 对象则会存活很长一段时间. 之所以要提到这个假设,是因为它造就了 Java 虚拟机的分代回收思想.简单来说,就是将堆空间划分为两 ...

  4. 获取手机浏览器IP的函数

    function GetIP() { if (!empty($_SERVER['HTTP_CLIENT_IP'])) { //如果变量是非空或非零的值,则 empty()返回 FALSE. $IP = ...

  5. java接口的学习笔记

    1接口 接口是一个特殊的类,在JAVA中,接口是由抽象方法和全局敞亮组成. 在JAVA忠使用INTERFACE定义接口. public class InterfaceDemo { public sta ...

  6. react-native ios 集成 react-native-baidu-map

    自己测试了下,https://www.jianshu.com/p/eceb7e66fa5e?appinstall=0 记录下自己遇到的问题,以及解决方法, 首先新建一个react native项目,然 ...

  7. Linux查看系统中socket状态

    当我们打开的socket数量很多时,netstat就会变得慢了,有什么办法可以快速查看系统中socket状态? IPv4: $ cat /proc/net/sockstat sockets: used ...

  8. Cache专用: SoftReference

    SoftReference的语义就是当内存不够用的时候,GC会回收SoftReference所引用的对象.所以,在memory sensitive的程序中将某些大型数据设置成SoftReference ...

  9. sublime text3:快捷键

    1.就近选择相同项:ctrl+d,按住ctrl,然后多次按d,就不断往下选择相同项 2.选择所有匹配项:alt+f3,一次性选中所有匹配项 3.ctrl+shift+a:在html中同时按这三个键,则 ...

  10. list<T>中的按特定顺序排序

    前段时间有个任务,就是把参数要按特定顺序排序,就是要是在一张大的参数表中,只选取,2,5,12,9,13,10 这几个参数,并按上述顺序进行排序. 假设这个参数在一个类中.例如: 上述参数序列就存在P ...