深入探析koa之非同步回調處理篇

来源:http://www.cnblogs.com/malingyang/archive/2016/11/19/6080074.html
-Advertisement-
Play Games

在上一篇中我們梳理了koa當中中間件的洋蔥模型執行原理，並實現了一個可以讓洋蔥模型自動跑起來的流程管理函數。這一篇，我們再來研究一下koa當中非同步回調同步化寫法的原理，同樣的，我們也會實現一個管理函數，是的我們能夠通過同步化的寫法來寫非同步回調函數。 1. 回調金字塔及理想中的解決方案 我們都知道ja ...


在上一篇中我們梳理了koa當中中間件的洋蔥模型執行原理，並實現了一個可以讓洋蔥模型自動跑起來的流程管理函數。這一篇，我們再來研究一下koa當中非同步回調同步化寫法的原理，同樣的，我們也會實現一個管理函數，是的我們能夠通過同步化的寫法來寫非同步回調函數。

1. 回調金字塔及理想中的解決方案

我們都知道javascript是一門單線程非同步非阻塞語言。非同步非阻塞當然是它的一個優點，但大量的非同步操作必然涉及大量的回調函數，特別是當非同步嵌套的時候，就會出現回調金字塔的問題，使得代碼的可讀性非常差。比如下麵一個例子：

var fs = require('fs');

fs.readFile('./file1', function(err, data) {
  console.log(data.toString());
  fs.readFile('./file2', function(err, data) {
    console.log(data.toString());
  })
})

這個例子是先後讀取兩個文件內容並列印，其中file2的讀取必須在file1讀取結束之後再進行，因此其操作必須要在file1讀取的回調函數中執行。這是一個典型的回調嵌套，並且只有兩層而已，在實際編程中，我們可能會遇到更多層的嵌套，這樣的代碼寫法無疑是不夠優雅的。

在我們想象中，比較優雅的一種寫法應該是看似同步實則非同步的寫法，類似下麵這樣：

var data;
data = readFile('./file1');
//下麵的代碼是第一個readFile執行完畢之後的回調部分
console.log(data.toString());
//下麵的代碼是第二個readFile的回調
data = readFile('./file2');
console.log(data.toString());

這樣的寫法，就完全避免回調地獄。事實上，koa就讓我們可以使用這樣的寫法來寫非同步回調函數:

var koa = require('koa');
var app = koa();
var request=require('some module');

app.use(function*() {
  var data = yield request('http://www.baidu.com');
  //以下是非同步回調部分
  this.body = data.toString();
})

app.listen(3000);

那麼，究竟是什麼讓koa有這麼神奇的魔力呢？

2. generator配合promise實現非同步回調同步寫法

關鍵的一點，其實前一篇也提到了，就是generator具有類似"打斷點"這樣的效果。當遇到yield的時候，就會暫停，將控制權交給yield後面的函數，當下次返回的時候，再繼續執行。

而在上面的那個koa例子中，yield後面的可不是任何對象都可以哦！必須是特定類型。在co函數中，可以支持promise, thunk函數等。

今天的文章中，我們就以promise為例來進行分析，看看如何使用generator和promise配合，實現非同步同步化。

依舊以第一個讀取文件例子來分析。首先，我們需要將讀文件的函數進行改造，將其封裝成為一個promise對象：

var fs = require('fs');

var readFile = function(fileName) {
  return new Promise(function(resolve, reject) {
    fs.readFile(fileName, function(err, data) {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    })
  })
}

//下麵是readFile使用的示例
var tmp = readFile('./file1');
tmp.then(function(data) {
  console.log(data.toString());
})

關於promise的使用，如果不熟悉的可以去看看es6中的語法。(近期我也會寫一篇文章來教大家如何用es5的語法來自己實現一個具備基本功能的promise對象，敬請期待呦\^_\^)

簡單來講，promise可以實現將回調函數通過 promise.then(callback)的形式來寫。但是我們的目標是配合generator，真正實現如絲般順滑的同步化寫法，如何配合呢，看這段代碼：

var fs = require('fs');

var readFile = function(fileName) {
  return new Promise(function(resolve, reject) {
    fs.readFile(fileName, function(err, data) {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    })
  })
}

//將讀文件的過程放在generator中
var gen = function*() {
  var data = yield readFile('./file1');
  console.log(data.toString());
  data = yield readFile('./file2');
  console.log(data.toString());
}

//手動執行generator
var g = gen();
var another = g.next();
//another.value就是返回的promise對象
another.value.then(function(data) {
  //再次調用g.next從斷點處執行generator,並將data作為參數傳回
  var another2 = g.next(data);
  another2.value.then(function(data) {
    g.next(data);
  })
})

上述代碼中，我們在generator中yield了readFile，回調語句代碼寫在yield之後的代碼中，完全是同步的寫法，實現了文章一開頭的設想。

而yield之後，我們得到的是一個another.value是一個promise對象，我們可以使用then語句定義回調函數，函數的內容呢，則是將讀取到的data返回給generator並繼續讓generator從斷點處執行。

基本上這就是非同步回調同步化最核心的原理，事實上如果大家熟悉python，會知道python中有"協程"的概念，基本上也是使用generator來實現的(我想當懷疑es6的generator就是借鑒了python~)

不過呢，上述代碼我們依然是手動執行的。那麼同上一篇一樣，我們還需要實現一個run函數，用於管理generator的流程，讓它能夠自動跑起來！

3. 讓同步化回調函數自動跑起來：一個run函數的編寫

仔細觀察上一段代碼中手動執行generator的部分，也能發現一個規律，這個規律讓我們可以直接寫一個遞歸的函數來代替：

var run=function(gen){
  var g;
  if(typeof gen.next==='function'){
    g=gen;
  }else{
    g=gen();
  }

  function next(data){
    var tmp=g.next(data);
    if(tmp.done){
      return ;
    }else{
      tmp.value.then(next);
    }
  }

  next();
}

函數接收一個generator，並讓其中的非同步能夠自動執行。使用這個run函數，我們來讓上一個非同步代碼自動執行：

var fs = require('fs');

var run = function(gen) {
  var g;
  if (typeof gen.next === 'function') {
    g = gen;
  } else {
    g = gen();
  }

  function next(data) {
    var tmp = g.next(data);
    if (tmp.done) {
      return;
    } else {
      tmp.value.then(next);
    }
  }

  next();
}

var readFile = function(fileName) {
  return new Promise(function(resolve, reject) {
    fs.readFile(fileName, function(err, data) {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    })
  })
}

//將讀文件的過程放在generator中
var gen = function*() {
  var data = yield readFile('./file1');
  console.log(data.toString());
  data = yield readFile('./file2');
  console.log(data.toString());
}
//下麵只需要將gen放入run當中即可自動執行
run(gen);

執行上述代碼，即可看到終端依次列印出了file1和file2的內容。

需要指出的是，這裡的run函數為了簡單起見只支持promise，而實際的co函數還支持thunk等。

這樣一來，co函數的兩大功能基本就完整介紹了，一個是洋蔥模型的流程式控制制，另一個是非同步同步化代碼的自動執行。在下一篇文章中，我將帶大家對這兩個功能進行整合，寫出我們自己的一個co函數！

這篇文章的代碼同樣可以在github上面找到：https://github.com/mly-zju/async-js-demo，其中promise_generator.js就是本篇的示例源碼。

同樣歡迎大家多多關註我的github pages個人博客哦，會不定期更新我的技術文章~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • javascript元素綁定事件
    js元素綁定事件 想給一個元素綁定一個方法之後，在綁定一個方法而且不被覆蓋 window.onload = function () { alert('a'); ｝ window.onlaod=function(){ alert('b') } 我們發現它只彈出一個，有一個被覆蓋了 下麵就說一下js中的 ...
  • JavaScript---正則表達式
    在JavaScript中，RegExp對象表示正則表達式，用來對字元串進行匹配。 一、兩種定義方法： 1、直接量法： /pattern/attribute 2、對象法： new RegExp(pattern,attribute); 參數說明： pattern是一個字元串，指定了正則表達式的模式或其他 ...
  • NodeJs之child_process
    一:child_process child_process是NodeJs的重要模塊。幫助我們創建多進程任務，更好的利用了電腦的多核性能。 當然也支持線程間的通信。 二:child_process的幾個API 非同步： child_process.exec(command[, options][, c ...
  • JavaScript變數和作用域
    認識JavaScript中的變數 JavaScript中的變數有兩種類型，一種是基本類型、一種是引用類型。 + 基本數據類型：Defined，Null，Boolean，Number，String。註意String是屬於基本數據類型，這不同於其他高級語言。 + 引用類型即對象，包括內置對象和自定義對象 ...
  • 11月19號上午，css樣式表
    恢復內容開始 樣式表： 一。內聯：寫在body中 直接在內容的標簽中添加style屬性：例如<div style="...">1234</div> 二。內嵌：寫在head中 一般寫在標題標簽的後面，添加<style type="text/css"></style>標簽,p為需要改變的標簽 三。外部樣 ...
  • angularJS--ngSelect
    給select綁定ng-model時，經常會出現首選第一個option值是undefined。如圖， 源代碼 主要原因是：ng-model綁定的值“newSupplier.companytype”沒有初始值。瀏覽器自動解析為undefined。 瀏覽器解析代碼： 解決辦法： 只要在js文件中，初始化 ...
  • JS，數組小練習
    var arr = [4, 0, 7, 9, 0, 0, 2, 6, 0, 3, 1, 0];要求將數組中的0項去掉，將不為0的值存入一個新的數組，生成新的數組 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <tit ...
  • JS無縫滾動
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul, li { margin: 0; padding: 0; list-style-type: none; } ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類