【javascript】Promise/A+ 规范简单实现 异步流程控制思想

简介: ——基于es6:Promise/A+ 规范简单实现 异步流程控制思想  前言:   nodejs强大的异步处理能力使得它在服务器端大放异彩,基于它的应用不断的增加,但是异步随之带来的嵌套、难以理解的代码让nodejs看起来并没有那么优雅,显得臃肿。

——基于es6:Promise/A+ 规范简单实现 异步流程控制思想 

前言:

  nodejs强大的异步处理能力使得它在服务器端大放异彩,基于它的应用不断的增加,但是异步随之带来的嵌套、难以理解的代码让nodejs看起来并没有那么优雅,显得臃肿。类似于这样的代码:

function println(name,callback){
    var value = {
        "ztf":"abc",
        "abc":"def",
        "def":1
    }
    setTimeout(function(){
        callback(value[name]);
    },500);
}

println("ztf",function(name){ 
    println(name,function(res){
        console.log(res);//def
        println(res,function(res1){
            console.log(res1);//1
        })
    });
});

上面的代码 println中定义了value对象,延迟五百秒调用callback传入相关的值,

首先调用println传入"ztf",假设下一个执行函数依赖与本次传回的值,那么调用就变成了上面的代码 传入ztf返回abc ,使用abc返回def,使用def返回1;

因为nodejs是作为服务端使用,必不可少的就是各种数据库查询,数据库查询拥有更多的依赖,比如我需要查询某个用户的权限,那么需要三步

    ① 通过id查找用户

    ② 通过返回的用户角色id查找对应的角色

    ③ 通过角色找到对应的权限

 此处便需要三层嵌套关系,代码也就和上面的差不多了 。

 

promise/A+规范

  Promise表示一个异步操作的最终结果。它有三个状态,分别是 未完成态、完成态(resolve)、失败态(reject) 状态不可逆,完成态不能返回未完成,失败态不能变成完成态

   

   与promise主要的交互方式是在它的then方法中传入回调函数,形成链式调用,

 

  

实现

首先 我们来看Promise/A+规范在具体的应用中的调用方式:

我们可以根据promise规范,将上面的例子改为:

var  printText = function(name){
    var deferred = new Deferred(); //new一个托管函数
        println(name,deferred.callback());//把回调函数托管到Deferred中实现
    return deferred.promise; //返回promise对象实现链式调用
}

printText("ztf")
.then(function(name){
    console.log(name);
    return printText(name); //第二次调用依赖第一次调用 返回promise对象  在成功态中判断
})
.then(function(res){
    console.log(res);//def
    return printText(res);
})
.then(function(res1){
    console.log(res1);//1
});

 

这样的代码从某种程度上,改变了异步代码不断嵌套的现状,通过then()方法的链式调用,达到异步代码的流程控制。

 

//处理回调
var Promise = function(){
    this.queue = []; //存储的是回调函数的队列
    this.isPromise = true; 
}
//延迟对象
var Deferred = function(){
    this.promise = new Promise();
}
Deferred.prototype = {
    //托管了callback回调函数
    callback:function(){
        
    },
    //完成态
    resolve:function(){
        
    },
    //失败态
    reject:function(){
        
    }
}

这里定义了两个对象 Promise与Deferred, Promise负责处理函数的分发,Deferred顾名思义,处理了延迟对象。

//处理内部操作
var Promise = function(){
    this.queue = []; //存储的是回调函数的队列
    this.isPromise = true; 
}
Promise.prototype = {
    //then方法 fulfilledHandler是完成态时执行的回调函数 errorHandler则是失败态
    then:function(fulfilledHandler,errorHandler){
        var handler = {};
        if(typeof(fulfilledHandler) == "function"){
            handler.fulfilled = fulfilledHandler;
        }
        if(typeof(errorHandler) == "function"){
            handler.errored = errorHandler;
        }
     this.queue.push(handler); //插入队列
return this; } } //处理外部操作 var Deferred = function(){ this.promise = new Promise(); } Deferred.prototype = { //托管了callback回调函数 callback:function(){ }, //完成态 resolve:function(){ }, //失败态 reject:function(){ } }

可以看到Promise.then方法只是将回调插入队列,一个完成态执行,一个失败态执行。

为了完成整个流程,还需要在Deferred中定义完成态和失败态的处理方法:

//处理内部操作
var Promise = function(){
    this.queue = []; //存储的是回调函数的队列
    this.isPromise = true; 
}
Promise.prototype = {
    //then方法 fulfilledHandler是完成态时执行的回调函数 errorHandler则是失败态
  then:function(fulfilledHandler,errorHandler){
        var handler = {};
        if(typeof(fulfilledHandler) == "function"){
            handler.fulfilled = fulfilledHandler;
        }
        if(typeof(errorHandler) == "function"){
            handler.errored = errorHandler; }
     this.queue.push(handler); return this; }
 } 
//处理外部操作
var Deferred = function(){
  this.promise = new Promise();
}
Deferred.prototype
= {
//托管了callback回调函数
callback:function(){
},
//完成态
resolve:function(){
    var self = this;
    
var promise = self.promise;
     var args = arguments;
var handler; while((handler = promise.queue.shift())){ //取出待执行队列中的第一个函数 直到全部执行完毕 if(handler && handler.fulfilled){ var res = handler.fulfilled.apply(self,args); //调用完成态回调函数 if(res && res.isPromise){ //如果有二次嵌套 则再次执行promise res.queue = promise.queue; self.promise = res; return; } } } }, //失败态 reject:function(){ } }

加入了完成态操作,这段代码获取了.then传入的回调函数集合 promise.queue  while依次调用,传入当前的arguments

然后 我们需要将完成态在托管回调函数(Deferred.callback())中,按照逻辑执行:

 

//处理内部操作
var Promise = function(){
    this.queue = []; //存储的是回调函数的队列
    this.isPromise = true; 
}
Promise.prototype = {
    //then方法 fulfilledHandler是完成态时执行的回调函数 errorHandler则是失败态
    then:function(fulfilledHandler,errorHandler){
        var handler = {};
        if(typeof(fulfilledHandler) == "function"){
            handler.fulfilled = fulfilledHandler;
        }
        if(typeof(errorHandler) == "function"){
            handler.errored = errorHandler;
        }
     this.queue.push(handler);
return this; } } //处理外部操作 var Deferred = function(){ this.promise = new Promise(); } Deferred.prototype = { //托管了callback回调函数 callback:function(){ var self = this; var args = Array.prototype.slice.call(arguments); //将arguments转为数组 return function(err){ if(err){ //这里是失败态 return; } args = args.concat(Array.prototype.slice.call(arguments,1)); //合并外部arguments 与内部arguments 去掉err //这里是完成态 self.resolve.apply(self,args); } }, //完成态 resolve:function(){ var self = this; var promise = self.promise; var args = arguments; var handler; while((handler = promise.queue.shift())){ //取出待执行队列中的第一个函数 直到全部执行完毕 if(handler && handler.fulfilled){ var res = handler.fulfilled.apply(self,args); //调用完成态回调函数 if(res && res.isPromise){ //如果有二次嵌套 则再次执行promise res.queue = promise.queue; self.promise = res; return; } } } }, //失败态 reject:function(){ } }

代码到这里,主要功能已经完成,只是失败态还没有添加,它的实现方式与成功态类似 只是少了二次嵌套:

//处理内部操作
var Promise = function(){
    this.queue = []; //存储的是回调函数的队列
    this.isPromise = true; 
}
Promise.prototype = {
    //then方法 fulfilledHandler是完成态时执行的回调函数 errorHandler则是失败态
    then:function(fulfilledHandler,errorHandler){
        var handler = {};
        if(typeof(fulfilledHandler) == "function"){
            handler.fulfilled = fulfilledHandler;
        }
        if(typeof(errorHandler) == "function"){
            handler.errored = errorHandler;
        }
        this.queue.push(handler);
        return this;
    }
}
//处理外部操作
var Deferred = function(){
    this.promise = new Promise();
}
Deferred.prototype = {
    //托管了callback回调函数
    callback:function(){
        var self = this;
        var args = Array.prototype.slice.call(arguments); //将arguments转为数组
        return function(err){
            if(err){
                //这里是失败态  传入了error对象
                self.reject.call(self,err);
                return;
            }
            args = args.concat(Array.prototype.slice.call(arguments,1)); //合并外部arguments 与内部arguments 去掉err
            //这里是完成态
            console.log(args);
            self.resolve.apply(self,args);
            
        }
    },
    //完成态
    resolve:function(){
        var self = this;
        var promise = self.promise;
        var args = arguments;
        var handler;
        
        while((handler = promise.queue.shift())){ //取出待执行队列中的第一个函数 直到全部执行完毕
            
            if(handler && handler.fulfilled){
                var res = handler.fulfilled.apply(self,args); //调用失败态回调函数
                if(res && res.isPromise){ //如果有二次嵌套 则再次执行promise
                    res.queue = promise.queue;
                    self.promise = res;
                    return;
                }
            }
        }
    },
    //失败态
    reject:function(err){
        var self = this;
        var promise = self.promise;
        var args = arguments;
        var handler;
        while((handler = promise.queue.shift())){ //取出待执行队列中的第一个函数 直到全部执行完毕
            if(handler && handler.errored){
                
                var res = handler.fulfilled.call(self,err); //调用完成态回调函数
                
                
            }
        }
    }
}

 

总结

  要点:
    ①  每个操作都返回一样的promise对象,保证链式操作

    ②  函数callback第一个参数总是error对象 无报错则null

    ③ 每个链式都通过then方法连接 返回promise对象再次执行

  实现promise的方法也有很多,这里只是简单的介绍了其中一个,例如

q  https://github.com/kriskowal/q 、

async https://github.com/caolan/async

 

参考资料:

https://cnodejs.org/topic/560dbc826a1ed28204a1e7de

http://blog.csdn.net/jaytalent/article/details/51057724

https://segmentfault.com/a/1190000002452115

  

======================================================== 转载请注明出处。
目录
相关文章
|
5天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
21 7
|
7天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
22 3
|
3天前
|
分布式计算 前端开发 JavaScript
【JavaScript】Promise与Async/Await:异步编程的艺术
【JavaScript】Promise与Async/Await:异步编程的艺术
11 0
|
4天前
|
前端开发 JavaScript 开发者
JavaScript中的异步编程:Promise与Async/Await
在现代前端开发中,JavaScript的异步编程变得越来越重要。本文将深入探讨JavaScript中的两种常见异步编程方式:Promise和Async/Await,并比较它们之间的优劣势,帮助读者更好地理解和运用这些技术。
|
8天前
|
JSON 前端开发 JavaScript
ES6引入Promise和async/await解决异步问题
【6月更文挑战第12天】ES6引入Promise和async/await解决异步问题。Promise处理异步操作,有pending、fulfilled、rejected三种状态,支持链式调用和并行处理。async/await是基于Promise的语法糖,使异步代码更同步化,提高可读性。两者都是处理回调地狱的有效工具,开发者应根据需求选择合适的方式。
33 3
|
8天前
|
前端开发 JavaScript 开发者
JavaScript中的异步操作与回调地狱解决方法
JavaScript中的异步操作与回调地狱解决方法 在现代的Web开发中,JavaScript扮演着极为重要的角色,尤其是在处理网络请求、文件操作或者任何可能耗费时间的操作时。为了不阻塞程序的执行,JavaScript 提供了异步编程模型。本文将介绍JavaScript中的异步操作是什么,什么是回调地狱,以及如何解决回调地狱问题。 什么是异步操作? 异步操作指的是那些不会立即完成的操作,程序可以在等待异步操作完成的同时,继续执行其他代码。JavaScript通常使用事件循环机制处理异步操作,这使得它可以在不阻塞主线程的情况下执行任务。 常见的异步操作包括: 网络请求(如使用 XMLHt
8 2
|
14天前
|
监控 前端开发 JavaScript
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API,尤其适用于在页面即将卸载时发送数据,如日志记录、用户行为分析等。 与传统的 AJAX 请求不同,sendBeacon 方法的设计目标是确保数据在页面卸载(例如用户关闭标签页或导航到新页面)时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。 它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。
21 1
|
17天前
|
前端开发 JavaScript 开发者
JavaScript异步编程艺术:深入浅出回调函数与异步挑战【含代码示例】
本文深入解析JavaScript异步编程,重点探讨回调函数和异步挑战。在单线程的JavaScript中,异步编程至关重要,回调函数是其基础。然而,回调地狱问题催生了Promise和async/await的出现。文章提供代码示例展示Promise和async/await的使用,并分享异步编程最佳实践,包括错误处理、资源管理和性能优化。遇到问题时,建议通过明确异步流程、逐步调试和异常捕获来解决。最后,文章强调异步编程的未来发展,鼓励开发者掌握最新工具并探讨更高效的异步解决方案。
20 2
|
22天前
|
JavaScript Java 测试技术
基于springboot+vue.js的工作流程管理系统附带文章和源代码设计说明文档ppt
基于springboot+vue.js的工作流程管理系统附带文章和源代码设计说明文档ppt
14 0
|
1月前
|
缓存 JavaScript 前端开发
前端 JS 经典:CommonJs 规范
前端 JS 经典:CommonJs 规范
27 0