异步编程Promise的简单实现

最新推荐文章于 2024-03-07 08:39:31 发布

JLinZen

最新推荐文章于 2024-03-07 08:39:31 发布

阅读量1.8k

点赞数

分类专栏： Javascript 文章标签：异步函数

本文链接：https://blog.csdn.net/jl244981288/article/details/47166183

版权

Javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

promise模式

-那么多中异步编程的方式，为什么选择promise, 因为前面几种方式不够灵活，用起来不够痛快，不优雅。为了降低异步编程的复杂性，所以promise。

promise的核心是有一个promise对象，这个对象有一个重要的then()方法, 它用于指定回调函数，如：

f1().then(f2);
promise模式在任何时刻都有三种状态：已完成（resolved），未完成（unfulfilled），那么then()方法就是为状态变化指定不同的回调函数，并总是返回一个promise对象，方便链式调用。

那promise模式下，返回的数据如何在各个回调函数之间传播呢，通过resolve方法，你可以将一个函数的返回值作为参数传递给另一个函数，并且将另一个函数的返回值作为参数再传递给下一个函数……像一条“链”一样无限的这么做下去。
-代码实现

var Promise = function() {
    this.callbacks = [];
};

Promise.prototype = {
    constructor: Promise,

    resolve: function(result) {
        this.complete('resolve', result);
    },

    reject: function(result) {
        this.complete('reject', result);
    },

    complete: function(type, reslut) {
        while(this.callbakc[0]) {
            this.callback.shift()[type](result);
        }
    },

    then: function(successHandler, failedHandler) {
        this.callback.push({
            resolve: successHandler, 
            reject: failedHandler
        });

        return this;
    }
};

-Promise测试

<!DOCTYPE html>
<html>
    <head lang="en">
        <title>Promise测试</title>
        <script type="text/javascript" src="Promise.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            var promise = new Promise();
            var delay1 = function() {
                setTimeout(function() {
                    promise.resolve('数据1');
                }, 1000);
                return promise;
            };
            var callback1 = function(re) {
                re = re + '数据2';
                console.log(re);
                promise.resolve(re);
            };
            var callback2 = function(re) {
                console.log(re + '数据3');
            };
            delay1().then(callback1).then(callback2);
        </script>
    </body>
</html>

分析：

//第一步
var delay1 = function() {
    setTimeout(function() {
        promise.resolve('数据1');
    }, 1000);
    return promise;
};

-这个函数通过setTimeout方法，异步传递一个数据1，并返回一个promise对象(必须)。

//第二步
var callback1 = function(re) {

    re = re + '数据2';
    console.log(re);
    promise.resolve(re);
};

-callback1和callback2都是要通过then方法注册的回调函数，其中callback1通过resolve方法把数据往下传递。

//第三步
delay1().then(callback1).then(callback2);

-delay1()方法执行完，因为返回了一个promise对象，所以可以再调用then()方法为delay1()的setTimeout异步执行操作指定回调函数, 又因为then()方法也返回的是promise对象，所以还可以再调用then方法。

//第四步
setTimeout(function() {
    promise.resolve('数据1');
}, 1000);

-一秒之后，当其他代码执行完成，开始执行异步代码promise.resolve(‘数据1’);，这里调用promise的resolve()方法，指定了一个成功状态，并把数据1作为参数。

 //第五步
 resolve: function(result) {
     this.complete("resolve", result);
 },


 //第六步：循环执行回调，将上一个回调的结果传递给下一个回调
 complete: function(type, result) {
     while (this.callbacks[0]) {
         this.callbacks.shift()[type](result);
     }
 },

JLinZen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步编程Promise的简单实现

promise模式-那么多中异步编程的方式，为什么选择promise, 因为前面几种方式不够灵活，用起来不够痛快，不优雅。为了降低异步编程的复杂性，所以promise。promise的核心是有一个promise对象，这个对象有一个重要的then()方法, 它用于指定回调函数，如：f1().then(f2); promise模式在任何时刻都有三种状态：已完成（resolved），未完成（unfulf
复制链接

扫一扫

专栏目录