世界快消息!js基础知识:Promise链式调用
文章目录
(资料图片仅供参考)
1. 简单运用Promise2. Promise三个状态3. Promise链式调用4. Promise.all5. Promise.race6. Axios——Promise封装的Ajax7. async/await
1. 简单运用Promise
function sleep(time) {return new Promise(function(resolve, reject) {if(time < 1000) {setTimeout(resolve("You are success"), time); } else {reject("fail"); } })}sleep(500).then(msg => {console.log(msg);}).catch(err => {console.log(err);});
控制台查看结果:
一般在使用Promise的时候,会在定义的函数中返回一个Promise构造函数,该构造函数包含两个参数,分别是resolve和reject。在上面的代码中,我们调用sleep方法,传入500。而我们使用了Promise的内置方法then,并且向then中传两个参数,一个是成功回调函数,一个是失败回调函数(本例中省略第二个参数)。当承诺成功兑现,第一个回调就会被调用,而当出现错误的时候,就会调用第二个参数reject(此处省略)。由于500小于1000,因此会执行setTimeout(resolve(“You are success”), time),输出了You are success。 在上面的例子中,我们还使用了Promise中的catch方法,当传入的参数大于500,则会执行catch方法,catch方法中传递一个参数,也就是reject,因此在失败的时候会执行它。如下:
2. Promise三个状态
promise对象用于作为异步任务结果的占位符,代表着一个我们暂时还没获得但未来有希望获得的值。正是因为这个原因,js的工程师们为Promise设置了三种状态,分别是等待态(pending),接受态(fullfilled),失败态(rejected)。当resolve函数被调用,promise的状态就会变成接受态;反之,如果reject方法被调用,或者在promise调用过程中发生了一个未处理的异常,则会进入失败态。一旦状态改变一次,promise将不会再次改变状态。
3. Promise链式调用
在本文开头,我们提到了回调地狱,最为常见的就是使用Ajax时,由于多个相互关联的请求多层嵌套,造成语法臃肿,对于后续的维护产生了不好的影响。而promise的链式调用,一定程度上解决了这个问题。我们再回到代码:
sleep(500).then(msg => {console.log(msg);}).catch(err => {console.log(err);});
此处使用了then方法,当promise成功兑现,则触发回调函数。我们还会发现,除了打印出You are success之外,还返回了一个Promise对象。
这就是说,每次then()都会返回一个新的promise,而这一个promise则可以交给下一个then方法使用。如下所示,每次then方法之后都返回了sleep(),而我们给出的sleep方法就是返回一个promise实例化对象,这样不断交给下一个then方法执行,就是我们的链式调用。
sleep(500).then(msg => {console.log(msg);return sleep(500);}).then(msg => {console.log(msg);return sleep(500);}).then(msg => {console.log(msg);return sleep(500);}).then(msg => {console.log(msg);return sleep(1500);}).catch(err => {console.log(err);});
控制台输出:
4. Promise.all
Promise除了链式调用实现多个步骤相互依赖之外,还提供了同时等待多个异步任务的方法,这里使用Promise中的all。
Promise.all([ sleep(500), sleep(600), sleep(1500)]).then(result => {console.log(result);}).catch(err => {console.log(err);})
控制台输出如下:
在这个方法的使用中,我们不关系任务执行的顺序。使用的时候,我们传入一个数组,元素则是promise对象。当调用all的时候,会等待所有的promise对象被兑现之后,返回一个成功值数组。 但是,当其中一个promise失败,则会影响整个结果,如下所示:
5. Promise.race
当我们只关心第一个返回结果的promise时,Promise.race能帮你达成这个愿望。如同Promise.all一样,我们在使用race的时候会传入一个promise对象数组,,一旦该数组中的一个promise被兑现,则返回结果。为了印证这一点,我们改造一下sleep方法,如下:
function sleep(time) {return new Promise(function(resolve, reject) {if(time < 1000) {setTimeout(resolve(`${time}s later...`), time); } else {reject("fail"); } })}Promise.race([ sleep(500), sleep(600), sleep(700)]).then(result => {console.log(result);})
控制台输出如下:
6. Axios——Promise封装的Ajax
在前端开发中,异步向后端发起请求有很多中方法,jQuery的Ajax,fetch,以及axios。axios的官网(http://www.axios-js.com/zh-cn/docs/)上是这样介绍的。 和jQuery的Ajax功能相似,都是对XMLHttpRequest的封装,让我们能够更好地进行异步请求。在Axios官网中还提到:“使用Promise管理异步,告别传统callback方式”,这里说的就是Promise的链式调用。正是这种语法的使用,让回调地狱问题得到了很好的解决。axios本质上也是对原生XHR的封装,只不过它是Promise的实现版本。 Axios简单使用代码如下:
axios.get(url) .then(function (response) {console.log(response); }) .catch(function (error) {console.log(error); });
本质上Axios的实例化对象就是一个promise,因此当我们熟悉了promise之后再来使用axios会比较容易上手。 为了加深理解,这里使用Promise封装一个XMLHttpRequest,模拟axios。代码如下:
function getJSON (url) {return new Promise( (resolve, reject) => {var xhr = new XMLHttpRequest() xhr.open("GET", url, true) xhr.onreadystatechange = () => {if (this.readyState === 4) {if (this.status === 200) {resolve(this.responseText) } else {var resJson = {code: this.status, response: this.response } reject(resJson, this) } } } xhr.send() })}getJSON ("https://blog.csdn.net/").then(res => {console.log(res); }).catch(error => {console.error(error);});
非常遗憾,出现了跨域问题,但是没关系,主要是通过一个实际的例子让帮助大家更进一步理解promise。
7. async/await
不知道大家发现没有,Promise虽然一定程度上解决了回调地狱问题,但是链式调用的语法仍然不够优雅,我们如果能用完全同步的语法来解决异步问题,那该有多好。在ES6中,我们可以使用生成器和promise相结合的方式实现这个愿望。而JS伟大的工程师们为我们提出了更好的方案,async/await,这号称是JavaScript解决异步问题的终极解决方案,其实是对Promise的再一次封装,也可以说是语法糖。那么它到底如何,就请听下回分解吧!
标签:
相关推荐:
精彩放送:
- []视焦点讯!Linux系统如何架设石器私服?Linux系统架设石器私服教程
- []世界快消息!js基础知识:Promise链式调用
- []世界热消息:工银瑞信添益快线货币有风险吗
- []【焦点热闻】ipad怎么分屏方法?profile之springboot-maven解决方案
- []世界实时:机械设计制造类是什么专业?机械设计制造类主要课程有哪些?
- []快讯:松下KX-MB778CN多功能一体机驱动程序安装教程
- []全球速读:广东清远:国内首条磁浮旅游专线首车正式上线
- []maven(三)最详细的profile的使用
- []世界简讯:股市交易时间和规则111
- []天天热讯:市盈率高好还是低好
- []每日时讯!摄像头码率是什么意思?摄像头码率性能怎样?
- []地球水体的比例是多少?水域占地球表面积约多少比率?
- []【世界报资讯】收到这类快递,赶紧扔!多地警方预警
- []【环球报资讯】华懋瑜一第1C期首张价单推80伙
- []【世界新要闻】晋控电力:公司有储能项目的前期工作,公司新能源方面在运风电项目11个,光伏项目28个
- []环球热推荐:陕西顺驰建工施工不规范被处罚 涉及项目为北京山水汇豪苑
- []焦点信息:香港机场2月客运量飙升24倍
- []今日报丨成飞集成:公司已预约4月28日发布一季度报告
- []中复神鹰:2022年归母净利同比上涨117% 碳纤维龙头持续受益国产替代
- []视焦点讯!常青科技:发行价估值偏低 高分子新材料特种单体领先企业或受追捧
- []天津津南城投完成发行8.8亿元超短期融资券 利率7.45%
- []当前速读:新疆交建:该项目不属于公司主营业务范围
- []快讯:首旅集团20亿元中期票据将付息 利率4.30%
- []全球时讯:撤退性出血是什么颜色
- []【天天报资讯】股票20日均线怎么看
- []今日观点!新航季开启,国际机票不再“又贵又难买”了吧?
- []环球最新:五星级酒店高薪抢人:入职5天可预支工资,万豪希尔顿服务员月薪可过万
- []环球速递!蓝筹股是啥意思
- []全球今日讯!牛市熊市什么意思
- []全球球精选!海航航空集团夏航季计划恢复、新开66条国际及地区航线
- []天天基金的钱取不出来怎么办
- []三盛控股:由于2021年报及2022中报仍未刊发 将延迟刊发2022年报
- []主动式负载平衡器说明书的封面_主动式负载平衡器
- []当前关注:正海磁材:公司的发展战略及经营计划敬请关注公司将于3月28日披露的《2022年年度报告》相关内容
- []热点在线丨成都兴城人居15亿元公司债将付息 利率4.27%
- []瑞丰银行50亿元可转债收问询函 要求说明不良贷款划分是否真实谨慎
- []当前观点:航天动力:公司产业技术源于航天液体火箭发动机的技术应用产业,产品主要涉及民用领域,军品业务占比较低
- []央行全面降准0.25个百分点 预计释放5500亿元中长期资金
- []环球最资讯丨宝丰能源:2022年公司出口定制LLDPE9047H、PPHP500L两个产品,填补了国内空白
- []天天新动态:深圳龙岗:平湖跨境电商产业园正式开工 计划2025年建成交付
- []世界热讯:东北证券:复盘美国的七次衰退 带给了我们哪些启示?
- []人工智能频现牛股 基金经理欲罢不能
- []焦点资讯:筹码集中度高好还是低好
- []观速讯丨今年来平均回报超44% 游戏主题ETF“霸榜”
- []年报解读 | 城投控股2022年营收下降7.88%至84.68亿元,扣非归母净利上市以来首亏
- []全球最资讯丨恒源煤电:根据上市公司信息披露相关准则,公司会在定期报告中披露报告期末股东人数等信息
- []环球观天下!碳酸锂价格腰斩逼近成本线 产业链期盼需求回暖
- []环球今头条!巴比食品:截止3月10日,公司股东总人数(户)约为1万
- []广东:前2月社会消费品零售总额0.79万亿元 同比增长1.8%
- []【世界时快讯】龙洲股份:您的提问请查阅我们之前的
- []世界视讯!年报解读| 绿城服务:2022年收入同比增长18.2% 权益股东应占溢利同比下降35.3%
- []世界今日报丨年报解读 | SOHO中国2022年由亏转盈,违约事件得到解决,将继续出售若干商业物业
- []博旧改?佛山多个老旧农村自建房遭哄抢,溢价率达到惊人的434%!
- []环球微头条丨社会工作者考试成绩查询时间(社会工作者考试成绩查询)
- []天天微速讯:邯郸市望源房地产开发85%股权挂牌转让 底价1.1亿元
- []全球热门:明勤挂牌转让泉州振贸房产50%股权 底价6.5亿元
- []焦点速递!TD早报 | Expedia等平台成为ChatGPT插件功能第一批启用者;万豪迎来亚太地区第1000家酒店开业里程碑
- []当前动态:润滑剂是否会对身体造成伤害?能否长期用!使用前须知
- []焦点短讯!学平险猫抓狗咬能报销多少钱,根据实际的产品而定
- []新华保险的康健华尊和康健华贵B的区别
- []全球即时看!珍酒李渡集团通过港交所聆讯 2022年收入585.59亿元
- []当前头条:车辆必买的4个险,车险购买方法
- []今日视点:香格里拉2022年收入14.62亿美元 归母综合亏损1.59亿美元
- []全球速看:保险公司一年存2万存10年,一般是没有问题的
- []世界热点评!保险可以提前多久续保
- []今日最新!石器世界
- []瑞安建业2022年营收63.07亿港元 归母净亏损2.32亿港元
- []沃森生物:股份回购需要结合公司发展和市场情况,严格履行上市公司规范运作程序进行决策
- []全球最新:丽新发展中期收入24.67亿港元 归母净亏损扩大至13.6亿港元
- []短讯!丹寨县党建引领“五抓五不误”抓实农业生产
- []复星旅文2022年收入137.78亿元 归母亏损缩窄至5.45亿元
- []天天热点!115元保险怎么买
- []今日热闻!互惠保险怎么买
- []全球观热点:过渡性养老金是什么意思
- []养老一年交7000能领多少,交养老金的好处
- []每日时讯!行人被车撞死了应该赔偿多少钱
- []讯息:个人交养老保险价格表,有以下2种
- []财信地产控股股东转让1.57亿股上市公司股份 套现约9.2亿元
- []焦点报道:个人保险买什么最好,分以下两种情况
- []个人养老保险缴费明细,查询方式有以下4种
- []公积金错缴能退回吗
- []全球百事通!人社部取消女干部和女工人,是真是假
- []阿特斯在科创板注册生效:计划募资40亿元,比亚迪等为股东
- []实时:2022年补缴社保的最新政策,暂未发布
- []保险返点是什么意思怎么返点
- []保险一年交多少钱,视车型而定
- []环球热资讯!商业险和三者险有啥区别
- []【世界热闻】社保最多可以停几个月,没有具体的规定
- []世界消息!外高桥35亿元定增申请获上交所受理
- []全球看点:福星股份13.4亿元定增事项收到深交所审核问询函
- []世界播报:黄冈人力资源与社会保障局(黄冈人力资源与社会保障局)
- []复星集团宣布将在青岛投资建设亚特兰蒂斯文旅项目
- []当前资讯!高送转一般在几月
- []环球精选!四上企业什么意思
- []美联储加息对a股的影响
- []视焦点讯!家乡是我前进的动力,从非洲难民到NBA球员的加布里埃尔!
- []环球热点评!MACD指标的优缺点
- []消息!沪股通增持股票意味着什么
- []世界热头条丨量比多少是最佳买入点
- []世界聚焦:神首集团是正规公司吗
- B站注册资本增幅400%至5亿 目前由陈睿全资持股
- 光源资本出任独家财务顾问 沐曦集成电路10亿元A轮融资宣告完成
- 巨轮智能2021年上半年营收11.24亿元 期内研发费用投入增长19.05%
- 红枣期货尾盘拉升大涨近6% 目前红枣市场总库存约30万吨
- 嘉银金科发布2021年Q2财报 期内净利润达1.27亿元同比增长208%
- 成都银行2021上半年净利33.89亿元 期内实现营收同比增长17.27亿元
- 汽车之家发布2021年第二季度业绩 期内新能源汽车品牌收入增长238%
- 中信银行上半年实现净利润290.31亿元 期末不良贷款余额706.82亿元
- 光伏概念掀起涨停潮交易价格创新高 全天成交额达1.29亿元
- 上半年生物药大增45% 关键财务指标好转营收账款持续下降
- 世界视点!10送10股是什么意思
- 头条焦点:郑州公积金新政:全面开展提取住房公积金按期付房租业务
- 双方父母初次见面忌讳
- 中泰策略:如何把握创业板反弹的驱动与主线?
- 热门看点:股票期权是什么意思
- 每日热闻!两大趋势深刻影响MICE行业;在途商旅接入飞猪 | 一周商旅动态
- 今日看点:股票压力位什么意思
- 同程旅行发布2022年财报 ;开始回血的航司为什么还要“随心飞”? | 一周速览
- 股票不能卖出怎么回事
- 退市的股票股民有赔偿吗
- 当前视点!【光与夜之恋同人】(陆沉)千年之恋⑥
- 全球即时:股东减持是什么意思
- 高净值人群什么意思
- 微资讯!美股为何大跌
- 天天快消息!新股会破发吗
- 股票一手是多少股
- 300开头的是什么股票
- e招贷上征信吗
- 【独家】股本属于什么科目
- 世界短讯!看股票哪个软件好
- 每日热闻!pdf通俗讲是什么意思
- 微速讯:如何学会做生意赚钱_如何学会做生意
- 观速讯丨私募大佬最新持仓!邓晓峰大手笔押注资源行业 加仓这两股!冯柳加仓恒顺醋业
- 热推荐:今日外国电影从小到大恶作剧(有一部外国电影讲一对恶作剧情侣互相恶作剧想知道片名)
- 观点:莫名我就喜欢你歌词
- 【热闻】必须有你的mp3
- 【世界速看料】外汇投资要树立正确的短线操盘理念
- 焦点信息:深圳学区房市场时隔两年又“热”了:过户量创近个5月新高,价格明显回调
- 当前速递!代替英语单词怎么写_代替英语
- 年报解读④| 绿城服务:实现148.6亿元营收,显现高质量韧性发展
- 当前动态:募资60亿!老牌组件龙头加码TOPCon电池等项目
- 光伏5.65GW!广东发布今年重点项目清单
- 全球观察:210组件累计出货量超120GW,大尺寸产能全面破9成,210+N迎来强劲增长
- 拓斯达:1.如后续有明确的股权激励实施计划,公司将及时披露相关公告,请您关注公司相关动态
- realme 真我 11 Pro 5G / 11 Pro+ 5G 两款手机通过TKDN认证
- 摩斯密码怎么打汉字
- 【焦点热闻】重大项目“跑起来” 经济发展“热起来”
- 天天播报:建行田国立:中国城镇化仍有空间 房地产转型需要长期资本支持
- 赌对了就一夜暴富?农村老旧自建房遭哄抢,溢价率惊人!原因只有两个字…
- 焦点简讯:罕见财报出错!交易所出手:董事长等被通报批评
- 当前滚动:什么是现金股利
- 天天快播:创业板股票如何开通
- 股票怎么买入和卖出
- 今日精选:大额存单和理财哪个好
- 100万的房子要交多少税费
- 如何挑选好股票
- 万科海外:2022年股东应占盈利约港币2820万元
- 【全球播资讯】广东:1-2月房地产开发投资同比下降8.5% 商品房销售面积下降0.2%
- 环球今日讯!牧原股份:下一步公司将不断提高精细化管理水平,加强生产管理,进一步降低公司整体生产成本
- 首创城发:选举刘永政为董事长
- 每日快报!时代天使2022年案例数微增:产品革新获临床认可,隐形矫治终端降价将替代更多固定矫治市场
- 今日关注:中国新城市:2022年实现收入5.91亿元
- 环球热推荐:股票跳空低开意味什么
- 天天热文:股票创新低意味着什么
- 高安市属于哪个省哪个市
- 世界今日报丨小罗:梅西是世界最佳,若他能回巴萨结束生涯就太好了
- 【环球快播报】688开头的股票是什么板块的
- 要闻速递:乐事怎么了
- 深圳出台住房公积金新规 购房者最高可多贷40%
- 当前关注:濮阳惠成:公司市场推广稳步进行
- 【新要闻】恩格尔系数是什么意思
- 适合长期持有的股票推荐
- 天天资讯:农村户口可以交灵活就业保险吗
- 每日动态!xd的股票要不要卖
- 全球观察:微软市值是腾讯的几倍
- 观热点:st退市会血本无归吗
- 世界看点:血压什么时候测量比较准确
- 环球微资讯!借呗利息越来越高是怎么回事
- 【世界播资讯】生育津贴需要扣除工资吗
- 环球热议:刚需福音!广州主城悄悄冒出个性价比新盘?!
- 粮食股票龙头股有哪些
- 今日要闻!我想练歌有专门练歌软件吗
- 今头条!智立方:公司持续关注相关技术发展及应用情况,目前暂未与Rokid发生业务关系
- 新资讯:业绩领先或排名垫底 基金“押注式投资”加剧净值波动
- 今日快看!2022年全国共有专任教师1880.36万
- 焦点关注:国金证券:有望成核心主线 把握中小盘风格基金机遇
- 当前快讯:公募行业“新陈代谢”提速:又有基金发行失败 年内66只基金清盘
- 首批72只公募基金披露2022年年度报告 知名基金经理4000字长文阐述投资策略
- CFTC商品持仓解读:投机者增加黄金净多头头寸
- 世界球精选!滨江服务:2022年实现收入19.82亿元
- 全球观点:西测测试:尊敬的投资公司的民机业务,主要是为各主机单位或者设备厂家提供适航检测项目
- 股权争夺战有望落幕,中炬高新仍有亏损困局待解
- 德信服务2022年收入9.59亿元 利润同比增加13.6%
- 环球精选!德信服务:2022年总收入为人民币9.58亿元
- 全球今亮点!绿城服务:2022年实现收入148.56亿元
- 全球讯息:建业新生活:2022年归属股东净利润5.62亿元
- 赤芍功效作用_赤芍药汤
- 地震、水灾、化工厂爆炸……灾难来临怎么办?江苏灾难医学发展正稳步向前
- 天天信息:莱蒙国际预计2022年盈转亏 录得亏损约1.8亿港元
- 当前头条:众安集团:2022年归属股东净利润1.86亿元 同比增长约155.4%
- 【天天播资讯】明发集团预期2022年归母利润由18.8亿降至0.3亿-0.6亿元
- 世界观察:荣盛发展增发不超30亿元股票申请收问询函 称将逐项落实并回复
- 环球关注:凯众股份子公司拟参设合资公司 投资孵化汽车新材料相关项目
- 渝开发2022年营收8.96亿元 归母净利润1.63亿元
- 全球短讯!中国网络文学用户达4.9亿人,“出海”营收规模增长明显
- 全球看点:大生地产:2022年溢利3.85亿港元
- 天天看热讯:欢乐家:目前公司没有出口业务,所有产品均为内销
- 太龙股份:3月23日公司高管黄国荣减持公司股份合计5万股
- 当前要闻:佳兆业美好:2022年归属股东净利润9340万元
- 天天快讯:金溢科技:3月23日公司高管罗瑞发减持公司股份合计6.43万股