大白话理解promise对象
Promise 代表了未来某个将要发生的事件(通常是一个异步操作)
Promise 是异步编程的解决方案,能够简化多层回调嵌套,代表了未来某个将要发生的事件。
Promise是一个构造函数,本身有all、reject、resolve,原型上有then、catch。故Promise new出来的对象肯定就有then、catch。
promise接收的参数是一个匿名函数,匿名函数也有二个参数resolve/reject。
resolve表示异步操作执行成功后的回调函数,并将异步操作的结果,作为参数传递出去;
b. reject表示异步操作执行失败后的回调函数,并将异步操作的问题,作为参数传递出去;
promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。
* 创造promise实例后,会立即执行,一般是包在一个函数中,在需要的时去运行这个函数,包装好的函数最后,会return出Promise对象
1)then方法进行链式调用,then 方法必须返回一个新的 promise 对象
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
var aPromise = new Promise(function (resolve) {
resolve(100);
});
var thenPromise = aPromise.then(function (value) {
console.log(value);
});
var catchPromise = thenPromise.catch(function (error) {
console.error(error);
});
console.log(aPromise !== thenPromise); // => true
console.log(thenPromise !== catchPromise);// => true
我们可以看出这三个对象都是互不相同的,这也就证明了 then
和 catch
都返回了和调用者不同的promise对象。
2)catch方法在执行resolve的回调时,如果抛出异常了(代码出错了),那么并不会报错卡死js,而是会进到这个catch方法中。
let p = new Promise((resolve, reject) => {
console.log('====')
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num < 5 ){
resolve(num);
}
else{
reject('数字大于等于5');
}
}, 1000);
});
p.then((data) => {
console.log('resolved',data);
console.log(somedata);
},(err) => {
console.log('rejected',err);
}
).catch((err) => {
console.log('catch',err);
}); // 立即输出=====
1s后根据num判断输出resolved 3、rejected 数字大于等于5
应用场景:
使用promise实现超时处理、封装处理ajax请求
2) Promise.all。提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调.
可以将多个Promise实例包装成一个新的Promise实例
同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组(数据顺序和Promise.all接收到的数组顺序是一致的,即p1的结果在前,即便p1的结果获取的比p2要晚),而失败的时候则返回最先被reject失败状态的值。
应用场景:
Promse.all在处理多个异步处理时非常有用,比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示,在此之前只显示loading图标。
一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后,我们再进行页面的初始化。
3) Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。
应用场景:
可以用race给某个异步请求设置超时时间,并且在超时后执行相应的操作
相关笔试题:
const promise = new Promise((resolve, reject) => {
console.log(1)
resolve()
console.log(2)
}) promise.then(() => {
console.log(3)
}) console.log(4)
注意点:
1、不可对同一个promise对象同时调用 `then` 方法
var aPromise = new Promise(function (resolve) {
resolve(100);
});
aPromise.then(function (value) {
return value * 2;
});
aPromise.then(function (value) {
return value * 2;
});
aPromise.then(function (value) {
console.log("1: " + value); // => 1:100
})
对promise采用链式调用
var bPromise = new Promise(function (resolve) {
resolve(100);
});
bPromise.then(function (value) {
return value * 2;
}).then(function (value) {
return value * 2;
}).then(function (value) {
console.log("2: " + value); // => 100 * 2 * 2
});
按照 resolve → then → then → then 的顺序执行,并且传给每个 then
方法的 value
的值都是前一个promise对象通过 return
返回的值。
大白话理解promise对象的更多相关文章
- 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)
本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...
- 大白话讲解Promise(二)理解Promise规范
上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...
- angularJS中的Promise对象($q)的深入理解
原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...
- ES6中Promise对象个人理解
Promise是ES6原生提供的一个用来传递异步消息的对象.它减少了传统ajax金字塔回调,可以将异步操作以同步操作的流程表达出来使得代码维护和可读性方面好很多. Promise的状态: 既然是用来传 ...
- Promise对象深入理解
目录 基本用法 返回另一个 Promise 实例 Promise.prototypeof.then Promise.prototype.catch Promise.prototype.finally ...
- ES6的promise对象应该这样用
ES6修补了一位Js修真者诸多的遗憾. 曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的 ...
- 大白话讲解Promise(一)
去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范.作为ES6中最重要的特性之一,我们有必要掌握并理解透彻.本文将由浅到深,讲解Promise的基本 ...
- JavaScript异步编程(1)- ECMAScript 6的Promise对象
JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...
- Promise对象
1.Promise思想:每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程.这个Promises对象有一个then方法,允许指定回调函数,在异步任务完成后调用. ...
随机推荐
- 【解题报告】洛谷 P1231 教辅的组成
[解题报告]洛谷 P1231 教辅的组成 题目链接 CSDN链接 这道题就只是一道普通的最大流问题,但是关键所在就是如何构图.要不是我看了题解,真的想不到这个构图方法呢 题目大意我就不写了,自己看好了 ...
- PHP基础库及扩展库安装
一.安装PHP所需的lib库(基础库): 1.yum install zlib-devel libxml2-devel libjpey-devel libjpeg-turbo-devel libico ...
- 【5】Django项目配置settings.py详解
夫唯不争,故天下莫能与之争 --老子<道德经> 本节内容 1.项目配置文件settings.py介绍 2.数据库配置[MySQL] 3.创建模型对象并和数据库同步 4.python官方提供 ...
- Codeforces Round #411(Div. 2)——ABCDEF
30min水掉前面4T,30min尝试读懂EF题,60min划水 顺便D忘记取膜丢50分,距比赛结束10s时hack失败丢50分... 从2620掉分到2520,从rank227掉到rank354.. ...
- TestNG的安装和使用
一.TestNG安装 打开这个网址:https://marketplace.eclipse.org/content/testng-eclipse#group-external-install-butt ...
- 对于HBase的MapReduce性能提升方案之BulkLoad
我们知道,在第一次海量数据批量入库时,我们会选择使用BulkLoad的方式. 简单介绍一下BulkLoad原理方式:(1)通过MapReduce的方式,在Map或者Reduce端将输出格式化为HBas ...
- 在win10 64 bit上安装theano
在windows10上安装theano,过程例如以下: 1.准备工作.先安装Anaconda 64位.然后执行 conda install mingw libpython 2.先安装pycuda,能够 ...
- 基于ArcGIS Flex API实现动态标绘(1.1)
动态标绘API 1.1版本号.相较前一版本号1.0(点击进入).该版本号提供标绘符号的编辑功能. 编辑功能包含两种编辑状态:编辑控制点.对标绘符号进行旋转.八方向拉伸.平移. 编辑控制点例如以下图所看 ...
- 2本Hadoop技术内幕电子书百度网盘下载:深入理解MapReduce架构设计与实现原理、深入解析Hadoop Common和HDFS架构设计与实现原理
这是我收集的两本关于Hadoop的书,高清PDF版,在此和大家分享: 1.<Hadoop技术内幕:深入理解MapReduce架构设计与实现原理>董西成 著 机械工业出版社2013年5月出 ...
- luogu2157 [SDOI2009]学校食堂 局部状压
题目大意 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴.当然,不同的人口味也不一定相同,但每个人的口味都可以用一个非负整数 ...