es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)

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

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

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

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

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(1)

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

认识一下Promise

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

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(2)

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

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

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

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

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

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

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

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(3)

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

接下来,说一下Promise的使用

【一、reject&then&catch关系】

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

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(4)

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

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

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

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(5)

2、用catch方法来接收

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(6)

这些不难理解哇。

【二、all&race方法】

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(7)

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

1、all方法:

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(8)

输出结果:

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(9)

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

2、race方法

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(10)

输出结果:

es6中类和方法的区别(搞懂ES6语法之promise-那些常用姿势)(11)

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

最后总结一下:

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页