[ JS 进阶 ] 异步编程 promise模式的简单实现

svtter 发布于2019-08-21 10:35 / 861人阅读

摘要：为了降低异步编程的复杂性，所以。难理解请参考的误区以及实践异步编程的模式异步编程的种方法

异步编程

javascript异步编程, web2.0时代比较热门的编程方式，我们平时码的时候也或多或少用到，最典型的就是异步ajax，发送异步请求，绑定回调函数，请求响应之后调用指定的回调函数，没有阻塞其他代码的执行。还有像setTimeout方法同样也是异步执行回调的方法。

如果对异步编程还不太熟悉的话，直接戳阮一峰大牛的教程，这篇文章介绍了四种异步编程的方式：

回调函数

事件监听

发布/订阅

promise模式

这几种方式的可维护性逐级递增，理解难度也逐级递增。这篇总结也是针对promise模式的。

promise模式

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

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

f1().then(f2);

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

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

代码实现

通过创建一个Promise构造函数来实现promise模式:

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

Promise.prototype = {
    construct: Promise,
    resolve: function(result) {
        this.complete("resolve", result);
    },

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

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

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

        return this;
    }
}

// test
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);
};

delay1().then(callback1)

代码分析

我们可看到一个简单的promise对象的构造函数的结构：

callbacks: 用于管理回调函数

resolve: 请求成功时执行的方法

reject:请求失败时执行的方法

complete: 执行回调

then：绑定回调函数

测试：

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);

结果：

一秒之后输出：

分析：

//第一步
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);
        }
    },

这其中比较难理解的就是第五，六步。

难理解请参考：

Promise/A的误区以及实践
JavaScript异步编程的Promise模式
Javascript异步编程的4种方法

服务器托管超融合服务器编程语言的实现模式 js实现的简单特效 promises异步 js异步编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85826.html

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0
2019前端面试题（持续更新）

摘要：是什么是异步编程的一种解决方案所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件通常是一个异步操作的结果。最近也在准备换工作了，然后收集了一些我觉得今年面试会遇到常见的问题。如果有机会，记得也帮忙分享我一下。2019的行情确实很糟糕。看到这么多人收藏点赞。我的内心也是哇凉哇凉的。我也给一些除了面试题之外的经验吧我相信不景气也是相对的，提升自我也是必要的。我说说我最近在准...

woshicixide 2019-08-30 15:56 评论0 收藏0
2019前端面试题（持续更新）

摘要：是什么是异步编程的一种解决方案所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件通常是一个异步操作的结果。最近也在准备换工作了，然后收集了一些我觉得今年面试会遇到常见的问题。如果有机会，记得也帮忙分享我一下。2019的行情确实很糟糕。看到这么多人收藏点赞。我的内心也是哇凉哇凉的。我也给一些除了面试题之外的经验吧我相信不景气也是相对的，提升自我也是必要的。我说说我最近在准...

worldligang 2019-08-02 14:26 评论0 收藏0
2019前端面试题（持续更新）

摘要：是什么是异步编程的一种解决方案所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件通常是一个异步操作的结果。最近也在准备换工作了，然后收集了一些我觉得今年面试会遇到常见的问题。如果有机会，记得也帮忙分享我一下。2019的行情确实很糟糕。看到这么多人收藏点赞。我的内心也是哇凉哇凉的。我也给一些除了面试题之外的经验吧我相信不景气也是相对的，提升自我也是必要的。我说说我最近在准...

K_B_Z 2019-08-26 13:32 评论0 收藏0