快捷導(dǎo)航

基于javascript的異步編程實例詳解

更新時間：2017年04月10日 09:01:25 作者：布瑞澤的童話

這篇文章主要介紹了基于javascript的異步編程,結(jié)合實例形式分析了javascript異步編程的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下

本文實例講述了基于javascript的異步編程。分享給大家供大家參考，具體如下：

異步函數(shù)這個術(shù)語有點名不副實，調(diào)用一個函數(shù)后，程序只在該函數(shù)返回后才能繼續(xù)。JavaScript程序員如果稱一個函數(shù)為異步的，其意思就是這個函數(shù)會導(dǎo)致將來再運行另一個函數(shù)，后者取自于事件隊列。如果后面這個函數(shù)是作為參數(shù)傳遞給前者的，則稱其為回調(diào)函數(shù)。

callback

回調(diào)函數(shù)是異步編程最基本的方式。

采用這種方式，我們把同步操作變成了異步操作，主函數(shù)不會堵塞程序運行，相當(dāng)于先執(zhí)行程序的主要邏輯，將耗時的操作推遲執(zhí)行。

回調(diào)函數(shù)的優(yōu)點是簡單、容易理解和部署，缺點是不利于代碼的閱讀和維護。

我們定義一個delay函數(shù)，它是異步的，也就是說它會拖延指定函數(shù)的執(zhí)行，從而使現(xiàn)在正在執(zhí)行的程序繼續(xù)執(zhí)行。delay函數(shù)如下：

function delay(time, callback) {
 setTimeout(function () {
 callback("Slept for "+time);
 }, time);
}

那么如果我要delay兩次呢？

delay(1000, function(msg) {
 console.log(msg);
 delay(1200, function (msg) {
 console.log(msg);
 }
})
//...waits 1000ms
// > "Slept for 1000"
//...waits another 1200ms
// > "Slept for 1200"

只有這樣我們才能夠確保兩個delay一個接一個的執(zhí)行。如果層次多了呢？就會形成回調(diào)地獄。當(dāng)異步任務(wù)很多時，維護大量的callback將是一場災(zāi)難。

Promise

Promise是一個被納入ES6中的規(guī)范，各大框架也早已實現(xiàn)相關(guān)方法。

Promise可以理解為一個承諾，如果A調(diào)用B，B返回一個承諾給A，然后A就可以在寫計劃的時候這么寫，當(dāng)B返回結(jié)果的時候，A就執(zhí)行方案1，如果B沒有返回A要的結(jié)果，A就執(zhí)行方案2。這樣一來，所有的潛在風(fēng)險就都在A的可控范圍之內(nèi)了。

我們看看ES6中promise的用法示例：

'use strict';
var promiseCount = 0; 
function testPromise() {
 var thisPromiseCount = ++promiseCount;
 var log = document.getElementById('log');
 log.insertAdjacentHTML('beforeend', thisPromiseCount +') Started (<small>Sync code started</small>)<br/>');
 // 我們創(chuàng)建一個新的Promise，期望3秒后得到結(jié)果
 var p1 = new Promise(
 //當(dāng)Promise解決或拒絕時該函數(shù)被調(diào)用
 function(resolve, reject) {
  log.insertAdjacentHTML('beforeend', thisPromiseCount +') Promise started (<small>Async code started</small>)<br/>');
  // 創(chuàng)建異步操作
  window.setTimeout(
  function() {
   // 滿足Promise
   resolve(thisPromiseCount);
  }, Math.random() * 2000 + 1000);
  });
  // 當(dāng)Promise被滿足時執(zhí)行
  p1.then(
  // 輸出信息和值
  function(val) {
   log.insertAdjacentHTML('beforeend', val +') Promise fulfilled (<small>Async code terminated</small>)<br/>');
  })
  .catch(
  // 當(dāng)Promise被拒絕時執(zhí)行
   function(reason) {
   console.log('Handle rejected promise ('+reason+') here.');
   });
  log.insertAdjacentHTML('beforeend', thisPromiseCount +') Promise made (<small>Sync code terminated</small>)<br/>');
}

快速連續(xù)執(zhí)行函數(shù)，得到結(jié)果：

說明1,2異步操作后正常順序執(zhí)行完畢。更多Promise的詳細用法請參考：MDN

很多框架也提供了Promise相關(guān)方法，這里我們以jQuery為例。

$("button").bind( "click", function() {
 $("p").append( "Started...");
 $("div").each(function( i ) {
 $( this ).fadeIn().fadeOut( 1000 * (i+1) );
 });
 $( "div" ).promise().done(function() {
 $( "p" ).append( " Finished! " );
 });
});

可以看到，當(dāng)$("div")的所有任務(wù)執(zhí)行完畢后，就會調(diào)用最后的done操作。

Jquery中的Promise也可以代表多種結(jié)果，出現(xiàn)不同結(jié)果時會分別調(diào)用相應(yīng)的回調(diào)。我們以ajax調(diào)用為例。1.5之前版本中，代碼必須寫成這樣：

$.get('/getdata',{
 success:onSuccess,
 failure:onFailure,
 always:onAlways
});

而1.5+版本引入了Promise對象后。可以寫成如下形式：

var promise = $.get('/getdata');
promise.done(onSuccess);
promise.fail(onFailure);
promise.always(onAlways);

那么這種變化有什么好處呢？為什么非要在觸發(fā)ajax調(diào)用之后再附加回調(diào)呢？如果ajax要實現(xiàn)很多效果，比如觸發(fā)動畫、插入html、鎖定輸入等，那么僅僅由負責(zé)發(fā)出請求那部分應(yīng)用代碼來處理所有這些效果，顯然很蠢。只傳遞Promise就顯得很優(yōu)雅。

更多詳細請參考：jquery

Promise雖然是很優(yōu)雅，但是也只是解決了回調(diào)地獄的問題，真正簡化javascript異步編程的還是Generator。

Generator

生成器是ES6中的語法。

何為生成器？讓我們先看看以下代碼：

function* quips(name) {
 yield "hello " + name + "!";
 yield "i hope you are enjoying the blog posts";
 if (name.startsWith("X")) {
 yield "it's cool how your name starts with X, " + name;
 }
 yield "see you later!";
}

你沒有看錯，這就是javascript代碼。是不是和你曾經(jīng)認識的javascript不太一樣。這個函數(shù)就叫做生成器函數(shù)。生成器函數(shù)看起來和普通的函數(shù)是不是有點相像呢？

它們的區(qū)別如下：

一般的函數(shù)以function開頭，而生成器函數(shù)以function* 開頭。

生成器函數(shù)中有一個特殊關(guān)鍵字就是yield，作用就是暫停函數(shù)。配合next方法來調(diào)用可以達到一步一步的執(zhí)行函數(shù)的目的。

我們看看next方法的使用：

> var iter = quips("jorendorff");
 [object Generator]
> iter.next()
 { value: "hello jorendorff!", done: false }
> iter.next()
 { value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
 { value: "see you later!", done: false }
> iter.next()
 { value: undefined, done: true }

可以看到，每一次next方法后，生成器函數(shù)就執(zhí)行到下一個yield位置處。

下面我們講解如何通過生成器函數(shù)來取代回調(diào)函數(shù)。我們還是以一開始的多次延遲delay為例。

首先，我們需要定義一個生成器：

function* myDelayedMessages() {
 /* delay 1000 ms and print the result */
 /* delay 1200 ms and print the result */
}

然后我們需要設(shè)置delay時間來執(zhí)行指定操作，我們現(xiàn)在暫定為空函數(shù)。

function* myDelayedMessages() {
 console.log(delay(1000, function(){}));
 console.log(delay(1200, function(){}));
}

然后我們使用yield關(guān)鍵字：

function* myDelayedMessages() {
 console.log(yield delay(1000, function(){}));
 console.log(yield delay(1200, function(){}));
}

然后我們就需要指定一個函數(shù)run來調(diào)用生成器函數(shù)的next方法，并且將空函數(shù)改為參數(shù)resume：

function run(generatorFunction) {
 var generatorItr = generatorFunction(resume);
 function resume(callbackValue) {
 generatorItr.next(callbackValue);
 }
 generatorItr.next()
}

最后執(zhí)行代碼如下：

run(function* myDelayedMessages(resume) {
 console.log(yield delay(1000, resume));
 console.log(yield delay(1200, resume));
})
//...waits 1000ms
// > "Slept for 1000"
//...waits 1200ms
// > "Slept for 1200"

這樣就完美的避免了回調(diào)地獄噢！

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: