首頁 > web前端 > js教程 > 簡單實作非同步程式設計promise模式_基礎知識

簡單實作非同步程式設計promise模式_基礎知識

WBOY
發布: 2016-05-16 15:47:40
原創
1048 人瀏覽過

非同步程式設計
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);
 }
},
登入後複製

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

以上就是本文的全部內容,希望對大家的學習有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板