promise使用详解

原文链接以及promise练习题

先说结论:
promise是解决异步函数的一种方案 将异步操作以同步方式展现出来 避免了回调地狱
1.三种状态:padding–等待 resolved–成功–then rejected–失败–catch
2.promise上有then和catch方法 then接受一个参数是函数 这个函数的值就是我们resolve的结果 catch接受一个参数是函数 这个函数的值就是我们rejected的结果
3.一个promise只能返回一个第一个resolve 且执行顺序是先执行函数内的同步代码 在执行resolve结果

4.Promise.all() 参数是一个数组 数组每个元素返回一个promise对象
5.这样多个异步函数就并行执行了 等到都执行完 会触发Promise自己的then (相当于执行慢 以谁为标准执行回调)
6.多个异步promise执行的结果 返回的then的参数内 也是一个数组形式 (执行的结果就是数组的顺序)
7.适应场景 在首页加载多个异步函数 在一个函数内返回所有的参数数组 在使用

8.Promise.race() 和all类似 参数是数组
9.但是返回的结果 只会是其中执行最快的那个异步函数的resolve结果 (也就是说其他异步是执行了 但是只是返回最快的那个异步的resolve结果)

event loop:先执行同步 遇到异步后执行 异步里的微任务先执行 异步里的宏任务后执行 await下面所有的代码都是异步
微任务:Promise,nextTick,callback,Object.observe,MutationObserver
宏任务:script代码块,setTimeout,setInterval,I/O

注意点:
var p = new Promise((resolve, reject) => {
console.log(‘1’);
}) 这是正常的同步直接执行
.
function fn() {
var p = new Promise((resolve, reject) => {
console.log(‘1’);
})
return p
}
fn() 这是正常的同步直接执行
.
async function fn() {
console.log(1); // 同步1
await async2(); // 先执行async2(),再await
console.log(2); // 异步(await下面所有的代码都是异步)
}
async function async2() {
console.log(3); // 同步2
}
fn() 这是正常的同步直接执行

Promise是异步编程的一种解决方案,将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。

它有三种状态,分别是 pending-进行中,resolved-已完成,rejected-已失败

Promise构造函数接收一个参数,这个参数是函数,并且这个函数传入两个参数,分别是 resolve 和 reject,分别是异步操作执行成功后的回调函数,和异步操作执行失败后的回调函数。(按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。)
所以我们用Promise的时候一般是包在一个函数中,在需要的时候去运行这个函数,如:

function runAsync(){var p = new Promise((resolve,reject)=>{setTimeout(function(){console.log('执行完成');resolve('随便什么数据')
}2000)
})  
return p;  
}runAsync();

在我们包装好的函数最后,会return出Promise对象,也就是说,执行这个函数我们得到了一个Promise对象。
Promise对象上有then 和 catch方法。

runAsync().then(function(data){console.log(data)    //'随便什么数据'//后面可以用传过来的数据做些其他操作//......
})

在runAsync()的返回上直接调用then方法,then接收一个参数,是函数,并且会拿到我们在runAsync中调用resolve时传的的参数。

这时候你应该有所领悟了,原来then里面的函数就跟我们平时的回调函数一个意思,能够在runAsync这个异步任务执行完成之后被执行。这就是Promise的作用了,简单来讲,就是能把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数。

而Promise的优势在于,可以在then方法中继续写Promise对象并返回,然后继续调用then来进行回调操作。

链式操作的用法
从表面上看,Promise只是能够简化层层回调的写法,而实质上,Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的:


function runAsync1(){var p = new Promise(function(resolve, reject){//做一些异步操作setTimeout(function(){console.log('异步执行1完成');resolve('随便什么数据1');}, 2000);});return p;            
}
function runAsync2(){var p = new Promise(function(resolve, reject){//做一些异步操作setTimeout(function(){console.log('异步执行2完成');resolve('随便什么数据2');}, 2000);});return p;            
}
function runAsync3(){var p = new Promise(function(resolve, reject){//做一些异步操作setTimeout(function(){console.log('异步执行3完成');resolve('随便什么数据3');}, 2000);});return p;            
}runAsync1()
.then(function(data){console.log(data);return runAsync2()
})
.then(function(data){console.log(data);return runAsync3()
})
.then(function(data){console.log(data)
})//2秒后打印
"异步执行1完成"
"随便什么数据1"//又2秒后打印
"异步执行2完成"
"随便什么数据2"//又2秒后打印
"异步执行3完成"
"随便什么数据3"

在then方法中,可以直接return 数据,而不是Promise对象,在后边的then中就可以接受到数据了。

runAsync1()
.then(function(data){console.log(data);return runAsync2()
})
.then(function(data){console.log(data);return "直接返回数据"
})
.then(function(data){console.log(data)
})//2秒后打印
"异步执行1完成"
"随便什么数据1"//又2秒后打印
"异步执行2完成"
"随便什么数据2"
"直接返回数据"

reject的用法
我们前面的例子都是只有“执行成功”的回调,还没有“失败”的情况
reject就是把Promise的状态设置为 rejected,这样我们在then中就能捕捉到,然后执行失败情况的回调。

function getNumber(){return new Promise((resolve,reject)=>{setTimeout(function(){var num = Math.ceil(Math.random()*10) //生成0-10之间的整数if(num<=5){resolve(num)}else{reject('数字太大了')}},2000)})
}getNumber()
.then(function(data){console.log('resolved')console.log(data);},function(reason,data){console.log('rejected')console.log(reason)}
)

getNumber函数用来异步获取一个数字,2秒后执行完成,如果数字小于等于5,我们认为是“成功”了,调用resolve修改Promise的状态。否则我们认为是“失败”了,调用reject并传递一个参数,作为失败的原因。 运行getNumber并且在then中传了两个参数,then方法可以接受两个参数,第一个对应resolve的回调,第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据

catch 的用法
我们知道 Promise除了有一个then方法,还有一个catch方法,它是干什么的呢?
其实它跟then方法的第二个参数的作用是一样的。用来指定reject的回调。
它的用法:

getNumber()
.then(function(data){console.log('resolved')console.log(data);}
)
.catch(function(reason){console.log('rejected')console.log(reason)}
)

效果和写在then的第二个参数里面一样。不过它还有另外一个作用,在执行resolve的回调(也就是then方法的第一个参数)时,如果抛出异常(代码出错了),那么并不会报错卡死JS,而是会进入到catch方法中

getNumber()
.then(function(data){console.log('resolved');console.log(data);console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){console.log('rejected');console.log(reason);

在 resolve的会调用,我们console.log(somedata),而somedata是未定义的,如果不用Promise,代码运行到这里,就直接在控制台报错了,不往下运行了。但是在这里会得到这样的结果:

image.png

也就是说进到catch方法里面去了,而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了,这与我们的try/catch语句有相同的功能。

all方法
Promise.all()提供了并行执行异步操作的能力。并且在所有异步操作执行完成以后,才执行回调。

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){console.log(results);
});

Promise.all(),接收一个数组作为参数,数组里的元素最终都返回一个Promise对象。这样,三个异步的操作就并行执行了,等到他们都执行完以后,才会进入到then里边,那么三个异步操作执行以后返回的数据哪里去了呢? all会把所有异步操作的结果放进一个数组,并且把数组传递给then,就是上边的results.
所以上边代码输出的结果是:

image.png

有了all方法,你就可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据,有一个场景很适合用这个方法。
比如一些游戏类的素材比较多的应用,打开网页时预先加载,需要用到各种资源,比如图片,flash,以及各种静态文件。所有都加载完以后,再进行页面的初始化。

race的用法
Promise.all方法,实际上是谁跑的慢,以谁为准执行回调。那么相对的就有另外一个方法,以谁跑的块,以谁为准执行回调。
就是race方法,这个词本来就是赛跑的意思。race的用法与all一样。我们修改下上边的计时器的时间:

function runAsync1(){var p = new Promise(function(resolve, reject){//做一些异步操作setTimeout(function(){console.log('异步执行1完成');resolve('随便什么数据1');}, 1000);});return p;            
}
function runAsync2(){var p = new Promise(function(resolve, reject){//做一些异步操作setTimeout(function(){console.log('异步执行2完成');resolve('随便什么数据2');}, 3000);});return p;            
}
function runAsync3(){var p = new Promise(function(resolve, reject){//做一些异步操作setTimeout(function(){console.log('异步执行3完成');resolve('随便什么数据3');}, 2000);});return p;            
}
Promise
.race(runAsync1(),runAsync2(),runAsync3())
.then(function(results){console.log(results);
})//1秒后打印
"异步执行1完成"
//再过1秒后打印
"异步执行3完成"
//再过2秒后打印
"异步执行2完成"

这个race有什么用呢?使用场景还是很多的,比如我们可以用race给某个异步请求设置超时时间,并且在超时后执行相应的操作,代码如下:

//请求某个图片资源
function requestImg(){var p = new Promise(function(resolve, reject){var img = new Image();img.onload = function(){resolve(img);}img.src = 'xxxxxx';});return p;
}//延时函数,用于给请求计时
function timeout(){var p = new Promise(function(resolve, reject){setTimeout(function(){reject('图片请求超时');}, 5000);});return p;
}Promise
.race([requestImg(), timeout()])
.then(function(results){console.log(results);
})
.catch(function(reason){console.log(reason);
});

requestImg函数会异步请求一张图片,我把地址写为"xxxxxx",所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race,于是他俩就会赛跑,如果5秒之内图片请求成功了,那么遍进入then方法,执行正常的流程。如果5秒钟图片还未成功返回,那么timeout就跑赢了,则进入catch,报出“图片请求超时”的信息。运行结果如下:

image.png

作者:泡杯感冒灵
链接:https://www.jianshu.com/p/458db9587772

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403353.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 对话框(Dialog)大全 建立你自己的对话框

Activities提供了一种方便管理的创建、保存、回复的对话框机制&#xff0c;例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog(int), dismissDialog(int)等方法&#xff0c;如果使用这些方法的话&#xff0c;Activity将通过getOwnerActivity()方法返回该Act…

HDU 5795

题意&#xff1a; 两人轮流从 n 堆 糖果里取糖果&#xff0c;每次可以1&#xff09; 选择一堆取任意个&#xff08;不为 0&#xff09;2) 选择一堆糖果分成 3 堆&#xff08;每堆数量 > 1)拿到最后一颗糖果的人赢。 解题 &#xff1a; 打表算出一些 sg 值&#xff0c;就可以…

mac下beyond compare配置图

配置Tab键为4个空格&#xff1a; 显示行号&#xff1a;

Win7下安装linux虚拟机

关于如何在Win7下搭建linux学习环境&#xff0c;特在此分享下. 一、工具 1、VMware-workstation-full-9.0.0-812388.exe 下载地址:http://pan.baidu.com/s/1bpFT0ZX 2、32位的CenOS系统镜像文件CentOS-6.7-i386-bin-DVD1.iso. 下载地址:http://pan.baidu.com/s/1cHrxLG…

el-table处理某一行样式;el-table表格row-class-name无效原因;el-table格式化某行样式和数据

如果是设置点击el-table某行变色或者hover 点击看这篇 情景&#xff1a;:row-class-name“tableRowClassName” 无效果 原因是&#xff1a;el-table的属性里 多了个stripe&#xff0c;stripe属性可以创建带斑马纹的表格。会影响到row-class-name的渲染。去掉stripe即可。 &l…

国内ios分亨组件,

2019独角兽企业重金招聘Python工程师标准>>> 1. 新浪微博 (支持新浪微博官方 SSO OAuth 及 iOS 6 特性&#xff09; 2. 微信&#xff08;仅支持分享到朋友&#xff09; 3. 网易微博 4. 腾讯微博 5. 豆瓣 6. 人人网 https://github.com/icyl…

el-table文字超出隐藏;el-table表格文字一行展示,超出隐藏,多余的内容会在 hover时显示 ;

el-table文字默认情况下若内容过多会折行显示&#xff0c;若需要单行显示可以给el-table-column使用show-overflow-tooltip属性&#xff0c;它接受一个Boolean&#xff0c;为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 给el-table-column添加show-overflow-t…

ssh自动输入密码登录服务器/ssh免输入密码登录/非交互ssh 密码验证

From: http://www.linuxidc.com/Linux/2011-02/31921.htm 由于经常需要登录一些远程的服务器&#xff0c;每次都需要将密码重输一遍&#xff0c;如下&#xff1a; #ssh 用户名我的服务器的ip 用户名我的服务器的ips password: &#xff08;这里需要手动输入密码后回车&#x…

11g下如何查询trace文件名

eygle的书中有讲到查看数据库的内容&#xff0c;利用转储文件来查看 aler system dump datafile 3 block 9&#xff1b; roger提点说先oradebug setmypid&#xff0c;再dump&#xff0c;然后直接oradebug tracefile_name&#xff0c;就能够得到trace文件的完整路径了。 如图 转…

el-table表格格式化某一列数据;统一处理el-table表格某一列数据

以下代码可以直接复制使用 场景&#xff1a;table的原数据就是 姓名1234&#xff0c;但是现在想要改成统一的格式。可以使用formatter属性&#xff0c;它用于格式化指定列的值&#xff0c;接受一个Function&#xff0c;会传入两个参数&#xff1a;row和column&#xff0c;可以…

OpenWrt交换机手册(Switch Documentation)

如果你的设备含有不少于1个的LAN接口&#xff0c;那这个设备在不同的接口之间可能有一个被称为交换(switch)的特殊连接。大多数的内部构造如下图所示: 如果你想要更改这些端口如何互相连接的&#xff0c;你需要配置你的switch设备。 (see also network.interfaces) UCI config…

/deep/使用方式方式;/deep/无效; ::v-deep和>>>使用;

vue-loader官方文档的 /deep/ >>> ::v-deep 使用方法 场景&#xff1a;一般我们使用vue和element-ui&#xff0c;在修改第三方组件库的样式时候&#xff0c;会修改到页面不存在的html的标签样式&#xff0c;此时就需要使用深度作用选择器。 注意&#xff1a; 1.脚手…

ipsec NAT-T与穿透

拓扑&#xff1a; 一 NAT-T R1配置&#xff1a; R2配置&#xff1a; 默认开启NAT-T R3配置&#xff1a; 分析&#xff1a; 端口由UDP500变为UDP4500&#xff1b;隧道封装为&#xff1a;tunnel UDP-encaps。 二 穿透 R1配置&#xff1a; R2配置&#xff1a; R3配置&#xff1a; …

我的Mac os x中的nginx配置文件nginx.conf

环境: Mac os x 10.10.3 xcode6.3 在mac下用brew install nginx安装好了nginx&#xff0c;增加对php的支持&#xff0c;完整的nginx.conf文件内容如下: #user nobody; worker_processes 1;#error_log logs/error.log; #error_log logs/error.log notice; #error_log lo…

使用 Chrome Timeline 来优化页面性能

使用 Chrome Timeline 来优化页面性能有时候&#xff0c;我们就是会不由自主地写出一些低效的代码&#xff0c;严重影响页面运行的效率。或者我们接手的项目中&#xff0c;前人写出来的代码千奇百怪&#xff0c;比如为了一个 Canvas 特效需要同时绘制 600 个三角形&#xff0c;…

el-table点击某行高亮;el-table设置hover效果;监听el-table点击某行变色;去除el-table的hover效果;监听el-table的hover事件

以下代码可直接复制使用 无需任何修改 注意&#xff1a;如果最后的的css不生效&#xff0c;就单独的放在一个style标签内 重点解释&#xff1a; :row-class-name"tableRowClassName" //这个是设置返回某行的类名 :stripe"false" …

SQL Server replication requires the actual server name to make a connection to the server.错误解决...

今天&#xff0c;在作数据发库时&#xff0c;出现如下错误&#xff1a; "SQL Server replication requires the actual server name to make a connection to the server. Connections through a server alias, IP address, or any other alternate name are not supporte…

el-table使用fixed后,最后一行显示不全;el-table设置fixed后,最后一行被遮挡。

解决代码&#xff1a; .el-table {/deep/ .el-table__body-wrapper {overflow-x: scroll !important;//直接设置横轴内容滚动条 即可撑高高度 还不影响使用} }一、情景&#xff1a;给element的el-table设置fixed固定后&#xff0c;最后一行显示部分被遮挡。有的说是有时出现这…

修改el-table滚动条样式

.el-table {// 滚动条的宽度/deep/ .el-table__body-wrapper::-webkit-scrollbar {width: 10px; // 横向滚动条height: 10px; // 纵向滚动条 必写}// 滚动条的滑块/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {background-color: #1fff;//颜色border-radius: 5px…

Mac OS 如何更改文件的默认打开方式

From: http://www.ipc.me/os-x-xiao-ji-qiao.html 和使用 Windows PC 一样&#xff0c;人们在 Mac 电脑中往往也需要用多种应用开启同一种文件。并且&#xff0c;由于环境、习惯以及个人喜好不同&#xff0c;用户常常会希望更改某种文件的默认打开方式…… 在 OS X 系统下&a…