简单实现异步编程promise模式

本篇文章主要介绍了异步编程promise模式的简单实现,并对每一步进行了分析,需要的朋友可以参考下

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

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

  1. 回调函数
  2. 事件监听
  3. 发布/订阅
  4. 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);
 }
},

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

转自(http://www.jb51.net/article/70447.htm)

时间: 2024-10-25 19:41:09

简单实现异步编程promise模式的相关文章

异步编程promise

promise不是angular首创的,作为一种编程模式,它出现在--1976年,比js还要古老得多.promise全称是 Futures and promises.具体的可以参见 http://en.wikipedia.org/wiki/Futures_and_promises . 而在javascript世界中,一个广泛流行的库叫做Q 地址是https://github.com/kriskowal/q 而angular中的$q就是从它引入的.promise解决的是异步编程的问题,对于生活在同

异步编程的模式

一.回调函数 function f1(callback){ setTimeout(function () { // f1的任务代码 callback(); }, 1000); } f1(f2); 优点是简单.容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),使得程序结构混乱.流程难以追踪(尤其是回调函数嵌套的情况),而且每个任务只能指定一个回调函数. 简单,难维护,高耦合 二.事件监听 事件驱动模式.任务的执行不取决于代码的顺序,而取决于某个事件是否发生 f

es6异步编程 Promise 讲解 --------各个优点缺点总结

//引入模块 let fs=require('fs'); //异步读文件方法,但是同步执行 function read(url) { //new Promise 需要传入一个executor 执行器 //executor需要传入两个函数 resolve reject return new Promise((resolve,reject)=>{ fs.readFile(url,'utf8',function (err,data) { if(err){ reject(err) }else{ reso

异步编程解决方案之事件发布/订阅模式

时间监听模式是广泛用于异步编程的模式,是回调函数的事件化,又称不发订阅模式. nodejs的events模块就是发布订阅模式的一个简单实现,不存在preventDefault,stopPropagation,stopImmediatePropagation,等控制事件传递的方法. 它具有addListner/on(),once(),removeListner(),removeAllLisetner()和emit等基础监听事件方法. 事件发布/订阅十分简单,如下: //订阅 emitter.on(

JavaScript异步编程 ( 一 )

1. 异步编程 Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推.这种模式的好处是实现起来比较简单,执行环境相对单纯:坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他

nodejs学习笔记 —— 异步编程解决方案

在js或者node编程中,由于异步的频繁和广度使用,使得回调和嵌套的深度导致编程的体验遇到一些挑战,如果写出优雅和好看的代码,本文主要针对异步编程的主流方案做一些总结 1.事件发布/订阅模式 事件监听器模式是一种广泛用于异步编程的模式, 是回调函数的事件化,又称发布/订阅模式, node自身提供events模块,是该模式的一个简单实现. EventPorxy 2.promise/deferrd模式 在2009年被Kris Zyp抽象为一个提议草案,发布在CommonJS规范中, 目前,Commo

C#的多线程——使用async和await来完成异步编程(Asynchronous Programming with async and await)

https://msdn.microsoft.com/zh-cn/library/mt674882.aspx 侵删 更新于:2015年6月20日 欲获得最新的Visual Studio 2017 RC文档,参考Visual Studio 2017 RC Documentation. 使用异步编程,你可以避免性能瓶颈和提升总体相应效率.然而,传统的异步方法代码的编写方式比较复杂,导致它很难编写,调试和维护. Visual Studio 2012引入了一个简单的异步编程的方法,依赖.NET Fram

深入解析js异步编程利器Generator

我们在编写Nodejs程序时,经常会用到回调函数,在一个操作执行完成之后对返回的数据进行处理,我简单的理解它为异步编程. 如果操作很多,那么回调的嵌套就会必不可少,那么如果操作非常多,那么回调的嵌套就会变得让人无法忍受了. 我们知道的Promises就是问了解决这个问题而提出来的.然而,promises并不是一种新的功能,它只是一种新的写法,原来横向发展的回调函数,被排成了队竖向发展. 然而,Generator不同,它是一种新的解决方案. 文章中提到的所有代码都可以在这里找到源码:[查看源码].

不得不说的异步编程

1.什么是异步编程? 异步编程就是把耗时的操作放进一个单独的线程中进行处理(该线程需要将执行进度反映到界面上).由于耗时操作是在另外一个线程中被执行的,所以它不会堵塞主线程.主线程开启这些单独的线程后,还可以继续执行其他操作(例如窗体绘制等). 异步编程可以提高用户体验,避免在进行耗时操作时让用户看到程序“卡死”的现象. 2.异步编程模型(APM) APM是Asynchronous Programming Mode的缩写,即异步编程模型的意思,它允许程序用更少的线程去执行更多的操作.在.NET