<strike id="qesoi"></strike>

<ul id="qesoi"></ul>

JavaScript異步流程控制的前世今生

劉明發布于2019-08-22 13:53 / 3575人閱讀

摘要：后面跟著的應該是一個對象其他返回值也可以，只是會立即執行捕獲錯誤參考文章函數的含義與用法

JavaScript異步流程控制的前世今生

javascript在設計之初.為了避免資源管理復雜問題(多個線程同時操作dom,以哪個為準),因此被設計成為了單線程語言.

說起異步就不得不提回調, 為了解決多重回調嵌套導致代碼難以維護問題.javascript一直都在完善這個解決方案.

在10多年中javascript 異步流程控制經過了

callback -> event -> promise -> yield & co -> async await

Callback

ES6之前異步編程最常用的方法,如果回調函數嵌套層數較深,代碼將變得難以維護.并且在回調函數之外無法捕獲回調函數中的異常.

var fs = require("fs")

try {
  fs.readFile("file", "utf8", function(err, data){
    // if (err) {
    //   console.log(err)
    // } else {
      console.log(data)
    // }
  })
} catch(e) {
  console.log(e)
}

嘗試讀取一個不存在的文件時.外層的try/catch 無法捕獲這一異常.將輸出 undefine.
callback異步操作,異步調用的本體和callback屬于不同的事件循環.而try/catch 只能捕獲當前事件的異常.因此將無法捕獲

Event (發布/訂閱模式)

采用事件驅動模式.任務的執行不取決于代碼的順序,由某個事件來決定

var EventEmitter = require("events") 
var fs = require("fs")

var eve = new EventEmitter()

// 監聽read事件
eve.on("read", function(value){
  console.log(value)
})
// 執行一個異步讀取
fs.readFile("./template.txt", "utf8", function (err, data) {
  if (err) {
    console.log(err)
  } else {
    // 拿到數據后 發送一個read事件.并傳遞數據 
    eve.emit("read", data)
  }
})

Promise

在ES6中提供了promise對象.給外界提供了統一的API.可用同步操作的流程來表達異步操作.避免了callback 中的嵌套層數過深,不便維護的弊端.

var fs = require("fs")

function read (path) {
  return new Promise(function(resolve, reject){
    fs.readFile(path, "utf8", function(err, data){
      if (err) {
        reject(err)
      } else {
        console.log(data)
        resolve()
      }
    })
  })
}

read("./1.txt").then(function(){
  return read("./2.txt")
}).then(function(){
  return read("./3.txt")
}).then(function(){
  console.log("執行結束")
})

yield && co

通過Generator函數封裝異步任務.在需要暫停的地方使用yield

var fs = require("fs")

function *getData () {
 var a = yield readFile("./1.txt")
 console.log(a)
 var b =  yield readFile("./2.txt")
 console.log(b)
 var c =  yield readFile("./3.txt")
 console.log(c)
}

function readFile(path) {
  return new Promise(function(resolve, reject){
    fs.readFile(path, "utf8", function (err, data) {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

function co(gen) {
  var fn = gen()
  var lastVal
  return new Promise(function(resolve, reject){
    !function next(lastVal) {
      var {value, done}  = fn.next(lastVal)
      if (done) {
        resolve()
      } else {
        value.then(next, reject)
      }
    }()
  })
}

co(getData)

async/await

Async/Await應該是目前最簡單的異步方案了

async 表示這是一個async函數，await只能用在這個函數里面

await 表示在這里等待promise返回結果了，再繼續執行。

await 后面跟著的應該是一個promise對象（其他返回值也可以，只是會立即執行）

捕獲錯誤

var fs = require("fs")

async function getData () {
  try {
    var a = await readFile("file")
  } catch(e) {
    console.log(e)
  }  
  var b =  await readFile("./2.txt")
  console.log(b)
  var c =  await readFile("./3.txt")
  console.log(c)
}

function readFile(path) {
  return new Promise(function(resolve, reject){
    fs.readFile(path, "utf8", function (err, data) {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

getData()

參考文章
Generator 函數的含義與用法

GPU云服務器云服務器 webrtc 前世今生 javascript異步函數 JavaScript異步機制 javascript異步編程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92574.html

python協程的前世今生

摘要：協程的歷史說來話長，要從生成器開始講起。我們可以使用把數據發送給協程函數。可以看到，在第次接收完數據之后，會產生結束的異常，因為程序流程結束了，這是正常現象。在這個階段，協程本質上還是由生成器構成的。所以，協程的介紹到這里就結束啦。在上一篇對python并發編程的理解中，我簡單提到了協程的概念，有一個錯誤需要指出的是，asyncio不全是對協程的實現，只是用到了協程。協程的歷史說...

stackfing 2019-07-30 15:27 評論0 收藏0
TWaver可視化編輯器的前世今生（三）Doodle

摘要：隨著越來越多的商業項目采用了和，可視化的概念也越來越深入人心。深知一款優秀的編輯器工具，將大幅減少工程師和項目實施人員的工作量，就像編輯器在內部使用時一樣。的發布，標志著已經形成了內部使用，客戶定制，標準化產品三位一體的編輯器解決方案。插播一則廣告（長期有效） MONO哥需要在武漢招JavaScript工程師若干要求：對前端技術(JavasScript、HTML、CSS)，對可視化技...

DevWiki 2019-08-02 15:57 評論0 收藏0
Web技術的前世今生（三）

摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一，以及技術的前世今生二前面我提過，我的大哥有一個叫的死黨，這家伙有事沒事經常上我們家串門。時間來到了年，在那前后發生了兩件事讓我印象深刻。傳送門技術的前世今生一技術的前世今生二前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》，以及《Web技術的前世今生（二）》前面我提過，我的大哥HTML...

Wuv1Up 2019-07-01 11:06 評論0 收藏0
Web技術的前世今生（二）

摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一平靜的生活已經有一段日子了。傳送門技術的前世今生一技術的前世今生三前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》平靜的生活已經有一段日子了。這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。哼，...

Stardustsky 2019-08-30 15:55 評論0 收藏0
Web技術的前世今生（二）

摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一平靜的生活已經有一段日子了。傳送門技術的前世今生一技術的前世今生三前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》平靜的生活已經有一段日子了。這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。哼，...

hyuan 2019-08-02 13:59 評論0 收藏0