专业的编程技术博客社区

网站首页 > 博客文章 正文

搞懂ES6语法之promise-那些常用姿势

baijin 2024-09-27 06:42:51 博客文章 6 ℃ 0 评论

点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

讲一下promise常用的使用习惯,不会太深入理解细节,但日常业务中知道这么用就足够了。

接触过promise的都知道,promise可以用来避免异步操作函数里的多层嵌套回调问题。

先来看一段比较"头疼"代码

这段代码里,每隔1秒钟输出递增的数字,如(1,2,3)。想象一下,如果将上面console换成业务逻辑且嵌套增多的话,定会让你感觉到头疼。没办法,因为解决多层异步场景最直接的方法是回调函数嵌套,将后一个操作放在前一个操作异步回调里,但如果操作层数多了,就会很难管理。

认识一下Promise

Promise的出现正好解决了这一个问题,来看一下它是怎么解决。

从它的结构上看,关于promise需要知道几点:

1、Promise函数有一些静态(类)方法(all,race,reject,resolve等),函数本身可以调用

2、它的原型对象上有catch,then等,也就是说这两个方法需要在它实例上调用。

关于调用有不理解可以参考上一篇关于JS属性和方法的剖析。

3、Promise的构造函数接收一个参数,这个参数是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

以下讲的都是基于这三个基础知识点来展示的。

用Promise来改装一下上面这段代码

这样,获取数据的操作就可以放在Promise函数里面,业务逻辑就可以在then方法中处理。上面这段代码中,return也可以直接返回一个值。把一个值也直接往下传递。这些可以根据具体情况来定。

接下来,说一下Promise的使用

【一、reject&then&catch关系】

reject返回异常,与resolve对应,resolve返回正常。如下代码:

上面这段代码,如果num大于5则用reject参数返回异常。那么这个异常信息怎么接收了?

接收异常信息有两种方式:

1、用then的第二个参数接收

2、用catch方法来接收

这些不难理解哇。

【二、all&race方法】

上面这段代码,应该都看的懂,当调用next函数时,隔两秒返回一条信息。下面用静态方法来调用。

1、all方法:

输出结果:

很显然,三个next()异步操作执行完毕之后,才会一起把他们的resolve结果打印出来。

2、race方法

输出结果:

race从字面也可以理解出来作用,只要最快的异步执行完毕之后,就执行then。

最后总结一下:

关于Promise讲了一些常用用法规则,应该是日常业务经常用到的几个点,Promise处理的是一个异步问题,那么关于整个JS处理异步问题的话题,往后在来讨论,这里只说了Promise的用法。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表