es6中promise与其原理的封装

                                                            es6中promise与其原理的封装

  对于Promise,其本质就是一个状态机,他有三种状态分别为pendding resolve reject,但是最终表现出来的结果只是两种状态就是成功与失败,其常用于异步函数的操作then方法,可以接受两个回调函数作为参数,第一个参数为resolve函数调用,第二个为reject函数调用第二个函数是可选的,不一定要提供。这两个函数都接收Promise对象传出的值作为参数promise.then(function(data){console.log(data)},function(error){console.log(error)})。下面是一个使用Promise实现的一个简单的例子

 

在使用promise的实际过程中,因为promise对象只要一创建好就会马上去执行函数的结果,在这时通常我们采用的方法是设置一个setTimeout去延迟其执行的时间。具体的代码实例如下:

在下面的这段代码中让我们来了解下在Promise对象中其某些方法的执行先后程序是怎样的,具体的代码实例如下:

其执行结果是先输出Promise,然后再输出ms最后输出.resolve。根据这个结果需要明白的就是then指定的方法会在当前脚本所有的方法执行完之后才会去执行。

下面我们就使用Promise的实际例子实现图片异步加载的过程,如果图片异步加载成功就调用resolve方法,如果调用不成功就使用reject方法,具体的代码实例如下:

接着就是使用Promise来实现ajax方法的实例封装,具体的代码实现的过程如下所示:

下面就是对与Promise进行原理上的实现的过程,在实现的过程中主要从下面的几个方面来考虑:1.Promise对象调用then方法(resolve,reject) 2.then之后返回Promise对象可以实现链式调用的过程。首先就是对于Promise对象进行实现代码如下:

在上面的部分是实现myPromise对象的实现,首先是进行参数的判定。在Promise对象中传入的参数只能是一个函数,如果不是函数就会出现一个错误的提示,另外就是在Promise中状态的改变过程在进行方法的封装的过程中,封装了resolved以及rejected方法来对原理进行实现。接着就是对于then方法的实现过程。具体的代码实例如下:

首先在调用的过程中当状态为resolved于rejected时,这两种状态的处理方式。首先便是要去完成一个链式调用的过程,然后再是对于传入的参数进行处理。

在上面这部分的代码中,是对于状态为pending的处理方式,在这里需要注意的是就是使用数组的push方法去push了一个函数就可以轻松的完成内部的一个调用过程。

以上部分就是关于Promise的使用的两个异步加载的实例,以及其原理的实现过程。

猜你喜欢

转载自blog.csdn.net/care_yourself/article/details/100038156