異步編程
javascript異步編程, web2.0時(shí)代比較熱門的編程方式，我們平時(shí)碼的時(shí)候也或多或少用到，最典型的就是異步ajax，發(fā)送異步請(qǐng)求，綁定回調(diào)函數(shù)，請(qǐng)求響應(yīng)之后調(diào)用指定的回調(diào)函數(shù)，沒有阻塞其他代碼的執(zhí)行。還有像setTimeout方法同樣也是異步執(zhí)行回調(diào)的方法。

如果對(duì)異步編程還不太熟悉的話，直接戳 阮一峰大牛的教程 ，這篇文章介紹了四種異步編程的方式：

1. 回調(diào)函數(shù)
   
2. 事件監(jiān)聽
   
3. 發(fā)布/訂閱
   
4. promise模式

這幾種方式的可維護(hù)性逐級(jí)遞增，理解難度也逐級(jí)遞增。這篇總結(jié)也是針對(duì)promise模式的。

promise模式
那么多中異步編程的方式，為什么選擇promise, 因?yàn)榍懊鎺追N方式不夠靈活，用起來不夠痛快，不優(yōu)雅。為了降低異步編程的復(fù)雜性，所以promise。

promise的核心是有一個(gè)promise對(duì)象，這個(gè)對(duì)象有一個(gè)重要的then()方法, 它用于指定回調(diào)函數(shù)，如：

f1().then(f2);

promise模式在任何時(shí)刻都有三種狀態(tài)：已完成（resolved），未完成（unfulfilled），那么then()方法就是為狀態(tài)變化指定不同的回調(diào)函數(shù)，并總是返回一個(gè)promise對(duì)象，方便鏈?zhǔn)秸{(diào)用。

那promise模式下，返回的數(shù)據(jù)如何在各個(gè)回調(diào)函數(shù)之間傳播呢，通過resolve方法，你可以將一個(gè)函數(shù)的返回值作為參數(shù)傳遞給另一個(gè)函數(shù)，并且將另一個(gè)函數(shù)的返回值作為參數(shù)再傳遞給下一個(gè)函數(shù)……像一條“鏈”一樣無限的這么做下去。

代碼實(shí)現(xiàn)
通過創(chuàng)建一個(gè)Promise構(gòu)造函數(shù)來實(shí)現(xiàn)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('數(shù)據(jù)1');
 }, 1000);
 return promise;
};
var callback1 = function(re) {
 re = re + '數(shù)據(jù)2';
 console.log(re);
};
delay1().then(callback1)

代碼分析
我們可看到一個(gè)簡單的promise對(duì)象的構(gòu)造函數(shù)的結(jié)構(gòu)：

• callbacks: 用于管理回調(diào)函數(shù)
• resolve: 請(qǐng)求成功時(shí)執(zhí)行的方法
• reject:請(qǐng)求失敗時(shí)執(zhí)行的方法
• complete: 執(zhí)行回調(diào)
• then：綁定回調(diào)函數(shù)

測(cè)試：

var promise = new Promise();
var delay1 = function() {
 setTimeout(function() {
  promise.resolve('數(shù)據(jù)1');
 }, 1000);
 return promise;
};
var callback1 = function(re) {
 re = re + '數(shù)據(jù)2';
 console.log(re);
 promise.resolve(re);
};
var callback2 = function(re) {
 console.log(re + '數(shù)據(jù)3');
};
delay1().then(callback1).then(callback2);

結(jié)果：

一秒之后輸出：

分析：

//第一步
var delay1 = function() {
 setTimeout(function() {
  promise.resolve('數(shù)據(jù)1');
 }, 1000);
 return promise;
};

這個(gè)函數(shù)通過setTimeout方法，異步傳遞一個(gè)數(shù)據(jù)1，并返回一個(gè)promise對(duì)象(必須)。

//第二步
var callback1 = function(re) {
 
 re = re + '數(shù)據(jù)2';
 console.log(re);
 promise.resolve(re);
};

callback1和callback2都是要通過then方法注冊(cè)的回調(diào)函數(shù)，其中callback1通過resolve方法把數(shù)據(jù)往下傳遞。

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

delay1()方法執(zhí)行完，因?yàn)榉祷亓艘粋€(gè)promise對(duì)象，所以可以再調(diào)用then()方法為delay1()的setTimeout異步執(zhí)行操作指定回調(diào)函數(shù), 又因?yàn)閠hen()方法也返回的是promise對(duì)象，所以還可以再調(diào)用then方法

//第四步
setTimeout(function() {
 promise.resolve('數(shù)據(jù)1');
}, 1000);

一秒之后，當(dāng)其他代碼執(zhí)行完成，開始執(zhí)行異步代碼promise.resolve('數(shù)據(jù)1');，這里調(diào)用promise的resolve()方法，指定了一個(gè)成功狀態(tài)，并把數(shù)據(jù)1作為參數(shù)。

//第五步
resolve: function(result) {
 this.complete("resolve", result);
},
//第六步：循環(huán)執(zhí)行回調(diào)，將上一個(gè)回調(diào)的結(jié)果傳遞給下一個(gè)回調(diào)
complete: function(type, result) {
 while (this.callbacks[0]) {
  this.callbacks.shift()[type](result);
 }
},

這其中比較難理解的就是第五，六步。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論