快捷導(dǎo)航

基于javascript的異步編程實(shí)例詳解

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

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

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

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

callback

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

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

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

我們定義一個(gè)delay函數(shù)，它是異步的，也就是說(shuō)它會(huì)拖延指定函數(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"

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

Promise

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

Promise可以理解為一個(gè)承諾，如果A調(diào)用B，B返回一個(gè)承諾給A，然后A就可以在寫(xiě)計(jì)劃的時(shí)候這么寫(xiě)，當(dāng)B返回結(jié)果的時(shí)候，A就執(zhí)行方案1，如果B沒(méi)有返回A要的結(jié)果，A就執(zhí)行方案2。這樣一來(lái)，所有的潛在風(fēng)險(xiǎn)就都在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)建一個(gè)新的Promise，期望3秒后得到結(jié)果
 var p1 = new Promise(
 //當(dāng)Promise解決或拒絕時(shí)該函數(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被滿足時(shí)執(zhí)行
  p1.then(
  // 輸出信息和值
  function(val) {
   log.insertAdjacentHTML('beforeend', val +') Promise fulfilled (<small>Async code terminated</small>)<br/>');
  })
  .catch(
  // 當(dāng)Promise被拒絕時(shí)執(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é)果：

說(shuō)明1,2異步操作后正常順序執(zhí)行完畢。更多Promise的詳細(xì)用法請(qǐng)參考：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í)行完畢后，就會(huì)調(diào)用最后的done操作。

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

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

而1.5+版本引入了Promise對(duì)象后?？梢詫?xiě)成如下形式：

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

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

更多詳細(xì)請(qǐng)參考：jquery

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

Generator

生成器是ES6中的語(yǔ)法。

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

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!";
}

你沒(méi)有看錯(cuò)，這就是javascript代碼。是不是和你曾經(jīng)認(rèn)識(shí)的javascript不太一樣。這個(gè)函數(shù)就叫做生成器函數(shù)。生成器函數(shù)看起來(lái)和普通的函數(shù)是不是有點(diǎn)相像呢？

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

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

生成器函數(shù)中有一個(gè)特殊關(guān)鍵字就是yield，作用就是暫停函數(shù)。配合next方法來(lái)調(diào)用可以達(dá)到一步一步的執(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í)行到下一個(gè)yield位置處。

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

首先，我們需要定義一個(gè)生成器：

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

然后我們需要設(shè)置delay時(shí)間來(lái)執(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(){}));
}

然后我們就需要指定一個(gè)函數(shù)run來(lái)調(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)地獄噢！

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

您可能感興趣的文章: