学JS的心路历程-Promise(三)
今天我们来说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(三)的更多相关文章
- 学JS的心路历程-Promise(二)
昨天有说到Promise的创建以及then的用法,今天我们来看错误处理. then onRejected 我们昨天有提到说,then两个函式参数,onFulfilled和onRejected,而onR ...
- 学JS的心路历程-Promise(一)
今天在进入Promise代码之前,我们先来用个例子来解释Promise是什么. 未来值 假设我们今天来到快餐店,点了一个汉堡,付钱给店员. 点了餐点并付费,可以理解为我们发送了一个请求,希望得到一个回 ...
- 学JS的心路历程 -函式(三)this
this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...
- 学JS的心路历程-物件与原型(三)
昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题. 复写constructor的问题(vmwork) 我们昨天有提到「建构式函式可 ...
- 学JS的心路历程 - PixiJS -基础(三)
今天我们来试着移动图片吧! 首先,一样先把图片放到PIXI的stage中: let app = new PIXI.Application({ width: 800, height: 600, back ...
- 学JS的心路历程Day26 - PixiJS -入坑
后来知道也可以透过canvas让网页动起来! 而PixiJS是使用WebGL在canvas上绘制内容与制作动态 且同时有下列特色: 支持多点触控 掩码与混合模式 可外加WebGL滤镜 多装置支持 等等 ...
- 学JS的心路历程-物件与原型(一)
前两天说明面向对象的三大特性及JS不符合面向对象,只能称作支持面向对象而已,今天我们来看看JS的原型继承. 首先我们先来看,什么是原型(vmwork): 两个物件之间的原型关系(prototype r ...
- 学JS的心路历程-JS支持面向对象?(一)
昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...
- 学JS的心路历程-闭包closure
闭包是是纯函式语言的一个特性,也是JS的一个关键性的特色,虽然不了解也能开发程序,但我们不是这种人对吧? 闭包不仅可以减少某些高阶功能的代码数量和复杂度,并且可以让我们做到原本无法做的复杂功能.听到这 ...
随机推荐
- Android蓝牙BLE开发,扫描、连接、发送和读取信息;
1.BLE开发权限 Android蓝牙BLE开发须打开蓝牙权限和6.0位置权限: <uses-permission android:name="android.permission.B ...
- 01-spark基础
1.定义 Spark是一个由scala语言编写的实时计算系统 Spark支持的API包括Scala.Python.Java .R 2.功能 Spark Core: 将分布式数据抽象为弹性分布式数据集( ...
- redis集群尝试
1. 使用Docker搭建redis主从复制集群 安装参照 Docker 搭建redis 集群 启动服务 docker run --name redis-master -p 6379:6379 -d ...
- python 插入html到数据库 re.escape() PyMysql
python 把html 网页源码插入到mysql 成功,部分汉字乱码是 mysql编码问题
- 《GPU高性能编程CUDA实战》第三章 CUDA设备相关
▶ 这章介绍了与CUDA设备相关的参数,并给出了了若干用于查询参数的函数. ● 代码(已合并) #include <stdio.h> #include "cuda_runtime ...
- C++学习基础十三——struct和class的区别
来自:http://blog.sina.com.cn/s/blog_48f587a80100k630.html C++中的struct是对C中struct进行了扩展,它不单是一个包含不同数据类型的数据 ...
- scrapy中deferred的回调
def _next_request_from_scheduler(self, spider):#在引擎中处理一个请求 slot = self.slot request = slot.scheduler ...
- PHP + NGINX 控制视频文件播放,并防止文件下载
最简单的方法是使用NGINX的 internal 功能 server { listen 80; server_name www.xxx.com; location / { ...
- HTML 圆心节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Spring boot 自定义starter
以下配置来自尚硅谷.. 常用如何配置 @Configuration //指定这个类是一个配置类 @ConditionalOnXXX //在指定条件成立的情况下自动配置类生效 @AutoConfigur ...