前端通信：ajax设计方案（五）--- 集成promise规范，更优雅的书写代码

仲强
1,673 阅读12分钟
原文链接： www.cnblogs.com
前端通信：ajax设计方案（五）--- 集成promise规范，更优雅的书写代码 - 仲强 - 博客园

半个诗人

前端通信：ajax设计方案（五）--- 集成promise规范，更优雅的书写代码

 　　距离上一篇博客书写，又过去了大概几个月了，这段时间暂时离开了这个行业，让大脑休息一下。一个人旅行，一个人休息，正好也去完成一个目标 --- 拥有自己的驾照。当然，也把自己晒的黑漆马虎的。不过这一段时间虽然在技术上没有学太多东西，但是在心态上给了自己一个沉淀的机会，感觉自己变得更加沉稳和成熟，感觉这就是自己需要找到的自己，回归自我。好了，废话不多说了，虽然技术上没有学一些新的东西，但是欠的东西还是要补回来的。正如这篇博客，前端Promise规范的实现与ajax技术的集成，当时github上一个用户提的，既然写了ajax，那么Promise的规范，更优雅的操作异步也应该有的，当时记下了，现在补回来。回归正题，下面介绍一些概念。

  • Promise 　　ES6中最重要的特性之一，就是代表了未来某个将要发生的事件（通常是一个异步操作）。它的好处在于，有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
  • js对象的继承和传递　　在js中是没有所谓的继承概念的，继承通常是指后台面向对象编程中对象之间的复用。因为js被叫做脚本语言，所以没有这个概念，但是在js中都可以模拟实现的（apply,call,prototype）。其实说通俗点所谓的继承就是作用域的传递。
  • ajax和promise的缘分　　因为ajax是一个异步的请求（虽然也可以使用同步），而promise这个状态机也正好可以处理异步操作。两者的相结合的产物，将是一个优雅而又快捷的产物，这个将在后面的介绍中展现。

 

工具准备：

　　　　1. 前端代码，自己实现的promise规范代码，以及集成现有es6规范的代码。

　　　　2. nginx服务器，做分离，反向代理后台代码

　　　　3. IIS服务器，部署后台请求（模拟一般请求和高延迟请求）

　　　　4. 各大兼容和不兼容promise的浏览器（做测试）

 

前端Promise代码实现：

/**
 * Created by gerry.zhong on 2017/6/21.
 */
var Promise = function(fn){
    var promise = this;
    //状态机的状态
    var PROMISESTATE = {
        PENDING : 0 ,
        FULFILLED : 1 ,
        REJECTED : 2
    };
    //存储当前变量的回调函数和标记对象为promise
    promise._fullCalll =[],promise._rejCall = [];promise._name = "promise";
    //执行过程中的状态变化(初始化状态为默认状态)
    var _state =  PROMISESTATE.PENDING;
    //回调函数的参数
    var _value = undefined;

    //状态变更
    function setState(stateT,valueT){
        var promise = this;
        _state = stateT;
        _value = valueT;
        handleFun.call(promise);  //传递作用域，并且执行回调函数
    };

    //根据状态处理回调
    function handleFun(){
        var promise = this,isThen;

        if (_state === PROMISESTATE.FULFILLED &&
            typeof promise._fullCalll[0] === 'function') {
            isThen = promise._fullCalll[0](_value);
        };
        if (_state === PROMISESTATE.REJECTED &&
            typeof promise._rejCall[0] === 'function') {
            isThen = promise._rejCall[0](_value);
        };
        //对于是否可以继续进行then做判断
        //  1. 不可then的，直接return结束（条件：无返回值、返回值不是promise对象的）
        //  2. 对于可以then的，将then的回调进行处理，然后对象之间传递。
        if (isThen === undefined || !(typeof isThen === 'object' && isThen._name === 'promise')) return;

        promise._fullCalll.shift(); promise._rejCall.shift();      //清除当前对象使用过的对调
        isThen._fullCalll =promise._fullCalll;isThen._rejCall = promise._rejCall;  //将剩下的回调传递到下一个对象
    };

    //promimse入口
    function doResolve(fn){
        var promise = this;
        fn(function(param) {
            setState.call(promise,PROMISESTATE.FULFILLED,param);
        }, function(reason) {
            setState.call(promise,PROMISESTATE.REJECTED,reason);
        });
    };

    //函数then，处理回调，返回对象保证链式调用
    this.then = function(onFulfilled,onRejected) {
        this._fullCalll.push(onFulfilled);
        this._rejCall.push(onRejected);
        return this;
    }

    doResolve.call(promise,fn);
}

具体思路如下：

 

解决浏览器的差异性和兼容性代码

if (!window.Promise) tool.createPromise();  //保证浏览器的兼容性

 

tool.createPromise代码

//如果浏览器不支持Promise特性，将用简易的promise代替(IE11-都不支持ES6 Promise)
        createPromise:function(){
            var newPromise = function(fn){
                var promise = this;
                //状态机的状态
                var PROMISESTATE = {
                    PENDING : 0 ,
                    FULFILLED : 1 ,
                    REJECTED : 2
                };
                //存储当前变量的回调函数和标记对象为promise
                promise._fullCalll =[],promise._rejCall = [];promise._name = "promise";
                //执行过程中的状态变化(初始化状态为默认状态)
                var _state =  PROMISESTATE.PENDING;
                //回调函数的参数
                var _value = undefined;

                //状态变更
                function setState(stateT,valueT){
                    var promise = this;
                    _state = stateT;
                    _value = valueT;
                    handleFun.call(promise);  //传递作用域，并且执行回调函数
                };

                //根据状态处理回调
                function handleFun(){
                    var promise = this,isThen;

                    if (_state === PROMISESTATE.FULFILLED &&
                        typeof promise._fullCalll[0] === 'function') {
                        isThen = promise._fullCalll[0](_value);
                    };
                    if (_state === PROMISESTATE.REJECTED &&
                        typeof promise._rejCall[0] === 'function') {
                        isThen = promise._rejCall[0](_value);
                    };
                    //对于是否可以继续进行then做判断
                    //  1. 不可then的，直接return结束（条件：无返回值、返回值不是promise对象的）
                    //  2. 对于可以then的，将then的回调进行处理，然后对象之间传递。
                    if (isThen === undefined || !(typeof isThen === 'object' && isThen._name === 'promise')) return;

                    promise._fullCalll.shift(); promise._rejCall.shift();      //清除当前对象使用过的对调
                    isThen._fullCalll =promise._fullCalll;isThen._rejCall = promise._rejCall;  //将剩下的回调传递到下一个对象
                };

                //promimse入口
                function doResolve(fn){
                    var promise = this;
                    fn(function(param) {
                        setState.call(promise,PROMISESTATE.FULFILLED,param);
                    }, function(reason) {
                        setState.call(promise,PROMISESTATE.REJECTED,reason);
                    });
                };

                //函数then，处理回调，返回对象保证链式调用
                this.then = function(onFulfilled,onRejected) {
                    this._fullCalll.push(onFulfilled);
                    this._rejCall.push(onRejected);
                    return this;
                }

                doResolve.call(promise,fn);
            };
            window.Promise = newPromise;
        },

这样就保证了，不管在兼容和不兼容Promise的浏览器中，都可以使用Promise，优雅的来操作异步了。

 

ajax集成proise代码（默认只开放了post和get方法，其他可自己拓展）

　　　　 //集成promise的ajax请求(默认设置post和get请求，如有其他需求，可自己拓展)
        promiseAjax:function (url,data,type){
            if (!window.Promise) tool.createPromise();  //保证浏览器的兼容性
            return new Promise(function(resolve, reject){
                if (type === undefined) ajax.post(url,data,resolve,reject);
                else ajax.get(url,data,resolve,reject);
            });
        },

 

测试环节

　　对于网上很多人写的Promise代码仔细观摩和研究，发现很多问题。

　　　　a. 对于并发Promise，会出现异步错乱，发起者和接受者错乱

　　　　b. 对于多then的情况，异步响应的不确定（高低延迟），错乱。

　　　　c. Promise代码实现的复杂性，多繁琐，难理解，思路不明确。

 　　针对以上问题，进行重要测试。

 

测试前端代码

    ajax.promiseAjax("api/ajax/postReq/",{"name":"q","age": 2})
            .then(function(value){
                console.log("一般请求q"+value);
                return ajax.promiseAjax("api/ajax/postReqSleep/",{"name":"w","age": 2});
            })
            .then(function(value){
                console.log("高延迟请求w："+value);
                return ajax.promiseAjax("api/ajax/postReq/",{"name":"r","age": 2});
            })
            .then(function(value){
                console.log("一般请求r："+value);
            });


    ajax.promiseAjax("api/ajax/postReqSleep/",{"name":"q1","age": 2})
            .then(function(value){
                console.log("高延迟请求q1"+value);
                return ajax.promiseAjax("api/ajax/postReqSleep/",{"name":"w2","age": 2});
            })
            .then(function(value){
                console.log("高延迟请求w2："+value);
                return ajax.promiseAjax("api/ajax/postReq/",{"name":"r3","age": 2});
            })
            .then(function(value){
                console.log("一般请求r3："+value);
            });

后端模拟延迟请求代码(C#)

        [Route("postReqSleep")]
        public string postRequestTSleep([FromBody]Param param)
        {
            Thread.Sleep(5000);   //挂起5s 做延迟
            String result = "post请求成功:" + param.name + "-" + param.age;
            return result;
        }

 

 

测试结果：

　　chrome

　　ie8-11

　　edge

　　firefox

　　360浏览器

　　safair

 

  代码已集成github：github.com/GerryIsWarr…     点颗星星是我最大的鼓励，有什么问题可以博客、邮箱、github上留言

 还有最重要的一点，如果有问题欢迎指出来，我在github上维护这个库，这段时间专注于前端的通信技术的研究，ajax基本完成，马上进入SSE推送技术研究状态

 

研究Promise这个内容，研究和参考了很多别人的代码，从高别人的代码中看到了各种问题，然后在自己代码中测试发现和改正。所以没有什么是绝对正确的，我写的可能也有问题，希望大家在研究和发展的基础上一起改进。毕竟对于前端来说，技术更新太快，ES5 ES6等等一层接一层。还是那句老话，革命尚未成功，同志仍需努力，我和你们同在。

 

马上又要回去重新找工作了，希望可以找到如意的工作，毕竟为了错开金三银四，希望一切都会好起来。一起加油吧。

posted on 2017-06-30 20:08 仲强 阅读(376) 评论(4) 编辑 收藏

评论

#1楼 2017-06-30 20:20 TCG2008  

并不优雅，then完再then，then里包着then，跟callback一样恶心裹脚布，还是等es7吧 支持(0)反对(0)   

#2楼[楼主] 2017-06-30 20:46 仲强  

@ TCG2008
这个就看你从哪个角度去对比了。比起以前回调中继续一个请求，然后继续回调，这就是所谓的横向发展。处理这样的代码起来，永远是个头疼的问题。难理解，难阅读，难更改。promise，将横向发展变为纵向发展，相对于代码的阅读和理解，比以前更加优雅好多了。如果往未来看，肯定还会有更优雅的模式出现。但是没办法，现在这个方法已经相对来说很好了。then完再then还好，then里包着then？ 这个不可能吧。promise的解决的就是将内部回调都以外围方式处理的。 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png   

#3楼 2017-06-30 20:46 我叫So  

ajax().then 看着挺喜欢，赞！！ 支持(0)反对(0) http://pic.cnblogs.com/face/505868/20160708230929.png   

#4楼[楼主]37263112017/6/30 20:48:15 2017-06-30 20:48 仲强  

@ 我叫So
嗯嗯 对于这样的代码来说 更精简更明了 方便开发和维护。自己写不累，别人维护也不累，多好的事。 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png    刷新评论刷新页面返回顶部 注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。 【推荐】超50万VC++源码: 大型工控、组态\仿真、建模CAD源码2018！
【腾讯云】小程序普惠节精美模板1元起
h3bpm 活动 最新IT新闻:
· 乐视网复牌第二日再跌停 逾800万手卖单排队出逃
· 知名80后创业者茅侃侃离世 家中开煤气自杀
· 支付宝今年香港上市？马云终于发话了！
· 马云达沃斯论坛谈全球贸易：贸易不是武器，而是解决方案
· 两家机构数据显示：小米超三星 成印度手机老大
» 更多新闻... 阿里云C2-1208 最新知识库文章:
· 领域驱动设计在互联网业务开发中的实践
· 步入云计算
· 以操作系统的角度述说线程与进程
· 软件测试转型之路
· 门内门外看招聘
» 更多知识库文章...

导航

公告

昵称：仲强
园龄：2年5个月
粉丝：73
关注： 0 +加关注
< 2018年1月 >
日 一 二 三 四 五 六
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 1 2 3
4 5 6 7 8 9 10

统计

  • 随笔 - 58
  • 文章 - 0
  • 评论 - 209
  • 引用 - 0

搜索

 

常用链接

我的标签

随笔分类

随笔档案

积分与排名

  • 积分 - 32332
  • 排名 - 11378

最新评论

阅读排行榜

评论排行榜

推荐排行榜

Powered by:
博客园
Copyright © 仲强
avatar
文章
阅读
粉丝
相关推荐
前端通信：ajax设计方案（十）--- 完善Promise A+规范，增加mock数据功能
626阅读
 · 
13点赞
某条前端面试题--实现一个封装的ajax器（Promise版）
2.4k阅读
 · 
4点赞
前端小白不迷路 - 今天来利用promise简单封装axios函数发送Ajax请求
457阅读
 · 
1点赞

友情链接：