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

劉明發(fā)布于2019-08-22 13:53 / 3566人閱讀

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

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

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

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

在10多年中javascript 異步流程控制經(jīng)過了

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

Callback

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

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異步操作,異步調(diào)用的本體和callback屬于不同的事件循環(huán).而try/catch 只能捕獲當前事件的異常.因此將無法捕獲

Event (發(fā)布/訂閱模式)

采用事件驅(qū)動模式.任務(wù)的執(zhí)行不取決于代碼的順序,由某個事件來決定

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

var eve = new EventEmitter()

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

Promise

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

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("執(zhí)行結(jié)束")
})

yield && co

通過Generator函數(shù)封裝異步任務(wù).在需要暫停的地方使用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應(yīng)該是目前最簡單的異步方案了

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

await 表示在這里等待promise返回結(jié)果了，再繼續(xù)執(zhí)行。

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

捕獲錯誤

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 函數(shù)的含義與用法