JavaScript異步編程的終極演變

whjin 發(fā)布于2019-08-20 10:17 / 3517人閱讀

摘要：在誕生以前，異步編程的方式大概有下面四種回調(diào)函數(shù)事件監(jiān)聽發(fā)布訂閱對(duì)象將異步編程帶入了一個(gè)全新的階段，中的函數(shù)更是給出了異步編程的終極解決方案。這意味著，出錯(cuò)的代碼與處理錯(cuò)誤的代碼，實(shí)現(xiàn)了時(shí)間和空間上的分離，這對(duì)于異步編程無疑是很重要的。

寫在前面

有一個(gè)有趣的問題：

為什么Node.js約定回調(diào)函數(shù)的第一個(gè)參數(shù)必須是錯(cuò)誤對(duì)象err(如果沒有錯(cuò)誤，該參數(shù)就是null)?

原因是執(zhí)行回調(diào)函數(shù)對(duì)應(yīng)的異步操作，它的執(zhí)行分成兩段，這兩段之間拋出的錯(cuò)誤程序無法捕獲，所以只能作為參數(shù)傳入第二段。大家知道，JavaScript只有一個(gè)線程，如果沒有異步編輯，復(fù)雜的程序基本沒法使用。在ES6誕生以前，異步編程的方式大概有下面四種：

回調(diào)函數(shù)

事件監(jiān)聽

發(fā)布/訂閱

Promise對(duì)象

ES6將JavaScript異步編程帶入了一個(gè)全新的階段，ES7中的async函數(shù)更是給出了異步編程的終極解決方案。下面將具體講解異步編程的原理和值得注意的地方，待我細(xì)細(xì)道來～

異步編程的演變 基本理解

所謂異步，簡單地說就是一個(gè)任務(wù)分成兩段，先執(zhí)行第一段，然后轉(zhuǎn)而執(zhí)行其他任務(wù)，等做好準(zhǔn)備再回過頭執(zhí)行第二段。

舉個(gè)例子
讀取一個(gè)文件進(jìn)行處理，任務(wù)的第一段是向操作系統(tǒng)發(fā)出請(qǐng)求，要求讀取文件。然后，程序執(zhí)行其他任務(wù)，等到操作系統(tǒng)返回文件，再接著執(zhí)行任務(wù)的第二段（處理文件）。這種不連續(xù)的執(zhí)行，就叫做異步。

相應(yīng)地，連續(xù)的執(zhí)行就叫作同步。由于是連續(xù)執(zhí)行，不能插入其他任務(wù)，所以操作系統(tǒng)從硬盤讀取文件的這段時(shí)間，程序只能干等著。

回調(diào)函數(shù)

所謂回調(diào)函數(shù)，就是把任務(wù)的第二段多帶帶寫在一個(gè)函數(shù)中，等到重新執(zhí)行該任務(wù)時(shí)直接調(diào)用這個(gè)函數(shù)。其英文名字 callback 直譯過來就是 "重新調(diào)用"的意思。

拿上面的例子講，讀取文件操作是這樣的：

fs.readFile(fileA, (err, data) => {
    if (err) throw err;
    console.log(data)
})

fs.readFile(fileB, (err, data) => {
    if (err) throw err;
    console.log(data)
})

注意：上面兩段代碼彼此是異步的，雖然開始執(zhí)行的順序是從上到下，但是第二段并不會(huì)等到第一段結(jié)束才執(zhí)行，而是并發(fā)執(zhí)行。

那么問題來了，如果想fileB等到fileA讀取成功后再開始執(zhí)行應(yīng)該怎么處理呢？最簡單的辦法是通過 回調(diào)嵌套：

fs.readFile(fileA, (err, data) => {
    if (err) throw err;
    console.log(data)
    
    fs.readFile(fileB, (_err, _data) => { 
        if (_err) throw err;
        console.log(_data)
    })
})

這種方式我只能容忍個(gè)位數(shù)字的嵌套，而且它使得代碼橫向發(fā)展，實(shí)在是丑的一筆，次數(shù)多了根本是沒法看。試想萬一要同步執(zhí)行100個(gè)異步操作呢？瘋掉算了吧！有沒有更好的辦法呢？

使用Promise

要澄清一點(diǎn)，Promise的概念并不是ES6新出的，而是ES6整合了一套新的寫法。同樣繼續(xù)上面的例子，使用Promise代碼就變成這樣了：

var readFile = require("fs-readfile-promise");

readFile(fileA)
.then((data)=>{console.log(data)})
.then(()=>{return readFile(fileB)})
.then((data)=>{console.log(data)})
// ... 讀取n次
.catch((err)=>{console.log(err)})

注意：上面代碼使用了Node封裝好的Promise版本的readFile函數(shù)，它的原理其實(shí)就是返回一個(gè)Promise對(duì)象，咱也簡單地寫一個(gè)：

var fs = require("fs");

var readFile = function(path) {
    return new Promise((resolve, reject) => {
        fs.readFile(path, (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

module.export = readFile

但是，Promise的寫法只是回調(diào)函數(shù)的改進(jìn)，使用then()之后，異步任務(wù)的兩段執(zhí)行看得更清楚，除此之外并無新意。撇開優(yōu)點(diǎn)，Promise的最大問題就是代碼冗余，原來的任務(wù)被Promise包裝一下，不管什么操作，一眼看上去都是一堆then()，原本的語意變得很不清楚。

把酒問蒼天，MD還有更好的辦法嗎？

使用Generator

在引入generator之前，先介紹一下什么叫 協(xié)程

"攜程在手，說走就走"。哈哈，別混淆了， "協(xié)程" 非 "攜程"

協(xié)程

所謂 "協(xié)程" ，就是多個(gè)線程相互協(xié)作，完成異步任務(wù)。協(xié)程有點(diǎn)像函數(shù)，又有點(diǎn)像線程。其運(yùn)行流程大致如下：

第一步：協(xié)程A開始執(zhí)行

第二步：協(xié)程A執(zhí)行到一半，暫停，執(zhí)行權(quán)轉(zhuǎn)移到協(xié)程B

第三步：一段時(shí)間后，協(xié)程B交還執(zhí)行權(quán)

第四步：協(xié)程A恢復(fù)執(zhí)行

function asyncJob() {
    // ... 其他代碼
    var f = yield readFile(fileA);
    // ... 其他代碼 
}

上面的asyncJob()就是一個(gè)協(xié)程，它的奧妙就在于其中的yield命令。它表示執(zhí)行到此處執(zhí)行權(quán)交給其他協(xié)程，換而言之，yield就是異步兩個(gè)階段的分界線。

協(xié)程遇到yield命令就暫停，等到執(zhí)行權(quán)返回，再從暫停的地方繼續(xù)往后執(zhí)行。它的最大優(yōu)點(diǎn)就是代碼的寫法非常像同步操作，如果除去 yield命令，簡直一模一樣。

Generator函數(shù)

Generator函數(shù)是協(xié)程在ES6中的實(shí)現(xiàn)，最大的特點(diǎn)就是可以交出函數(shù)的執(zhí)行權(quán)（即暫停執(zhí)行）。整個(gè)Generator函數(shù)就是一個(gè)封裝的異步任務(wù)，或者說就是異步任務(wù)的容器。

function* gen(x) {
    var y = yield x + 2;
    return y;
} 

var g = gen(1);
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }

上面的代碼中，調(diào)用Generator函數(shù)，會(huì)返回一個(gè)內(nèi)部指針（即遍歷器）g，這是Generator函數(shù)不同于普通函數(shù)的另一個(gè)地方，即執(zhí)行它不會(huì)返回結(jié)果，返回的是指針對(duì)象。調(diào)用指針g的next()方法，會(huì)移動(dòng)內(nèi)部指針（即執(zhí)行異步任務(wù)的第一段），指向第一個(gè)遇到的yield語句。

換而言之，next()方法的作用是分階段執(zhí)行Generator函數(shù)。每次調(diào)用next()方法，會(huì)返回一個(gè)對(duì)象，表示當(dāng)前階段的信息（value屬性和done屬性）。value屬性是yield語句后面表達(dá)式的值，表示當(dāng)前階段的值；done屬性是一個(gè)布爾值，表示Generator函數(shù)是否執(zhí)行完畢，即是否還有一個(gè)階段。

Generator函數(shù)的數(shù)據(jù)交換和錯(cuò)誤處理

Generator函數(shù)可以暫停執(zhí)行和恢復(fù)執(zhí)行，這是它封裝異步任務(wù)的根本原因。除此之外，它還有兩個(gè)特性，使它可以作為異步編程的解決方案：函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯(cuò)誤處理機(jī)制。

next()方法返回值的value屬性，是Generator函數(shù)向外輸出的數(shù)據(jù)；next()方法還可以接受參數(shù)，向Generator函數(shù)體內(nèi)輸入數(shù)據(jù)。

function* gen(x) {
    var y = yield x + 2;
    return y;
} 

var g = gen(1);
g.next()      // { value: 3, done: false }
g.next(2)     // { value: 2, done: true }

上面的代碼中，第一個(gè)next()方法的value屬性，返回表達(dá)式x+2的值（3）。第二個(gè)next()方法帶有參數(shù)2，這個(gè)參數(shù)可以傳入Generator函數(shù)，作為上個(gè)階段異步任務(wù)的返回結(jié)果，被函數(shù)體內(nèi)的變量y接收，因此這一步的value屬性返回的就是2（變量y的值）。

Generator函數(shù)內(nèi)部還可以部署錯(cuò)誤處理代碼，捕獲函數(shù)體外拋出的錯(cuò)誤。

function* gen(x) {
    try {
        var y = yield x + 2
    } catch(e) {
        console.log(e)
    }
    return y
}

var g = gen(1);
g.next();
g.throw("出錯(cuò)了");

上面代碼的最后一行，Generator函數(shù)體外，使用指針對(duì)象的throw方法拋出的錯(cuò)誤，可以被函數(shù)體內(nèi)的try...catch 代碼塊捕獲。這意味著，出錯(cuò)的代碼與處理錯(cuò)誤的代碼，實(shí)現(xiàn)了時(shí)間和空間上的分離，這對(duì)于異步編程無疑是很重要的。

異步任務(wù)的封裝

下面看看如何使用Generator函數(shù)，執(zhí)行一個(gè)真實(shí)的異步任務(wù)。

var fetch = require("node-fetch")

function* gen() {
    var url = "https://api.github.com/usrs/github";
    var result = yield fetch(url);
    console.log(result.bio);
}

上面代碼中，Generator函數(shù)封裝了一個(gè)異步操作，該操作先讀取一個(gè)遠(yuǎn)程接口，然后從JSON格式的數(shù)據(jù)解析信息。就像前面說過的，這段代碼非常像同步操作。除了加上yield命令。

執(zhí)行這段代碼的方法如下：

var g = gen();
var result = g.next();

result.value.then(function(data) {
    return data.json()
}).then(function(data) {
    g.next(data)
});

上面代碼中，首先執(zhí)行Generator函數(shù)，獲取遍歷器對(duì)象。然后使用next()方法，執(zhí)行異步任務(wù)的第一階段。由于Fetch模塊返回的是一個(gè)Promise對(duì)象，因此需要用then()方法調(diào)用下一個(gè)next()方法。

可以看到，雖然Generator函數(shù)將異步操作表示得很簡潔，但是流程管理卻不方便（即合適執(zhí)行第一階段，何時(shí)執(zhí)行第二階段）

大Boss登場之 async函數(shù)

所謂async函數(shù)，其實(shí)是Generator函數(shù)的語法糖。

繼續(xù)我們異步讀取文件的例子，使用Generator實(shí)現(xiàn)

var fs = require("fs");

var readFile = (path) => {
    return new Promise((resolve, reject) => {
        fs.readFile(path, (err, data) => {
            if (err) reject(err)
            resolve(data)
        })
    })
}

var gen = function* () {
    var f1 = yield readFile(fileA);
    var f2 = yield readFile(fileB);
    console.log(f1.toString());
    console.log(f2.toString());
}

寫成async函數(shù)，就是下面這樣：

var asyncReadFile = async function() {
    var f1 = await readFile(fileA);
    var f2 = await readFile(fileB);
    console.log(f1.toString())
    console.log(f2.toString())
}

發(fā)現(xiàn)了吧，async函數(shù)就是將Generator函數(shù)的*替換成了async，將yield替換成await，除此之外，還對(duì) Generator做了以下四點(diǎn)改進(jìn)：

（1）內(nèi)置執(zhí)行器。Generator函數(shù)的執(zhí)行比如靠執(zhí)行器，所以才有了co模塊等異步執(zhí)行器，而async函數(shù)是自帶執(zhí)行器的。也就是說：async函數(shù)的執(zhí)行，與普通函數(shù)一模一樣，只要一行：

var result = asyncReadFile();

（2）上面的代碼調(diào)用了asyncReadFile()，就會(huì)自動(dòng)執(zhí)行，輸出最后結(jié)果。這完全不像Generator函數(shù)，需要調(diào)用next()方法，或者使用co模塊，才能得到真正執(zhí)行，從而得到最終結(jié)果。

（3）更好的語義。async和await比起星號(hào)和yield，語義更清楚。async表示函數(shù)里有異步操作，await表示緊跟在后面的表達(dá)式需要等待結(jié)果。

（4）更廣的適用性。async函數(shù)的await命令后面可以是Promise對(duì)象和原始類型的值（數(shù)值、字符串和布爾值，而這是等同于同步操作）。

（5）返回值是Promise，這比Generator函數(shù)返回的是Iterator對(duì)象方便多了。你可以用then()指定下一步操作。

進(jìn)一步說，async函數(shù)完全可以看作由多個(gè)異步操作包裝成的一個(gè)Promise對(duì)象，而await命令就是內(nèi)部then()命令的語法糖。

實(shí)現(xiàn)原理

async函數(shù)的實(shí)現(xiàn)就是將Generator函數(shù)和自動(dòng)執(zhí)行器包裝在一個(gè)函數(shù)中。如下代碼：

async function fn(args) {
    // ...
}

// 等同于 
function fn(args) {
  return spawn(function*() {
    // ...
  })
}
// 自動(dòng)執(zhí)行器
function spawn(genF) {
  return new Promise(function(resolve, reject) {
    var gen = genF();
    function step(nextF) {
      try {
        var next = nextF()
      } catch(e) {
        return reject(e)
      }
      if (next.done) {
        return resolve(next.value)
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v) })
      },function(e) {
        step(function() { return gen.throw(e) })
      })
    }
    step(function() { return gen.next(undefined) })
  })
}

async函數(shù)用法

（1）async函數(shù)返回一個(gè)Promise對(duì)象，可以是then()方法添加回調(diào)函數(shù)。
（2）當(dāng)函數(shù)執(zhí)行時(shí)，一旦遇到await()就會(huì)先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。

下面是一個(gè)延遲輸出結(jié)果的例子：

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms)
  })
}

async function asyncPrint(value, ms) {
  await timeout(ms)
  console.log(value)
}

// 延遲500ms后輸出 "Hello World!"
asyncPrint("Hello World!", 500)

注意事項(xiàng)

（1）await命令后面的Promise對(duì)象，運(yùn)行結(jié)果可能是reject，所以最好把await命令放在try...catch代碼塊中。

（2）await命令只能用在async函數(shù)中，用在普通函數(shù)中會(huì)報(bào)錯(cuò)。

（3）ES6將await增加為保留字。如果使用這個(gè)詞作為標(biāo)識(shí)符，在ES5中是合法的，但是ES6會(huì)拋出 SyntaxError（語法錯(cuò)誤）。

終極一戰(zhàn)

"倚天不出誰與爭鋒"，上面介紹了一大堆，最后還是讓我們通過一個(gè)例子來看看 async 函數(shù)和Promise、Generator到底誰才是真正的老大吧！

需求：假定某個(gè)DOM元素上部署了一系列的動(dòng)畫，前一個(gè)動(dòng)畫結(jié)束才能開始后一個(gè)。如果當(dāng)中又一個(gè)動(dòng)畫出錯(cuò)就不再往下執(zhí)行，返回上一個(gè)成功執(zhí)行動(dòng)畫的返回值。

用Promise實(shí)現(xiàn)

function chainAnimationsPromise(ele, animations) {

  // 變量ret用來保存上一個(gè)動(dòng)畫的返回值 
  var ret = null;
  
  // 新建一個(gè)空的Promise 
  var p = Promise.resolve();

  // 使用then方法添加所有動(dòng)畫 
  for (var anim in animations) {
    p = p.then(function(val) {
      ret = val;
      return anim(ele);
    })
  }
  
  // 返回一個(gè)部署了錯(cuò)誤捕獲機(jī)制的Promise 
  return p.catch(function(e) {
    /* 忽略錯(cuò)誤，繼續(xù)執(zhí)行 */
  }).then(function() {
    return ret;
  })
}

雖然Promise的寫法比起回調(diào)函數(shù)的寫法有很大的改進(jìn)，但是操作本身的語義卻變得不太明朗。

用Generator實(shí)現(xiàn)

function chainAnimationsGenerator(ele, animations) {
  return spawn(function*() {
    var ret = null;
    try {
      for(var anim of animations) {
        ret = yield anim(ele)
      }
    } catch(e) {
      /* 忽略錯(cuò)誤，繼續(xù)執(zhí)行 */
    }
    return ret;
  })
}

使用Generator雖然語義比Promise寫法清晰不少，但是用戶定義的操作全部出現(xiàn)在spawn函數(shù)的內(nèi)部。這個(gè)寫法的問題在于，必須有一個(gè)任務(wù)運(yùn)行器自動(dòng)執(zhí)行Generator函數(shù)，它返回一個(gè)Promise對(duì)象，而且保證yield語句后的表達(dá)式返回的是一個(gè)Promise。上面的spawn就扮演了這一角色。它的實(shí)現(xiàn)如下：

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    var gen = genF();
    function step(nextF) {
      try {
        var next = nextF()
      } catch(e) {
        return reject(e)
      }
      if (next.done) {
        return resolve(next.value)
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v) })
      },function(e) {
        step(function() { return gen.throw(e) })
      })
    }
    step(function() { return gen.next(undefined) })
  })
}

使用async實(shí)現(xiàn)

async function chainAnimationAsync(ele, animations) {
  var ret = null;
  try {
    for(var anim of animations) {
      ret = await anim(ele)
    } 
  } catch(e) {
    /* 忽略錯(cuò)誤，繼續(xù)執(zhí)行 */
  }
  return ret;
}

好了，光從代碼量上就看出優(yōu)勢(shì)了吧！簡潔又符合語義，幾乎沒有不相關(guān)代碼。完勝！

注意一點(diǎn)：async屬于ES7的提案，使用時(shí)請(qǐng)通過babel或者regenerator進(jìn)行轉(zhuǎn)碼。

參考

阮一峰《ES6標(biāo)準(zhǔn)入門》

@歡迎關(guān)注我的 github 和個(gè)人博客－Jafeney

云服務(wù)器 GPU云服務(wù)器編程語言的發(fā)展演變 javascript異步編程 javascript的dom編程異步編程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80070.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

whjin

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

浪點(diǎn)云主機(jī)怎么用-云主機(jī)怎么使用？

閱讀 1844·2021-09-22 15:55
DediPath九月4折：洛杉磯VPS月付1.4美元起,獨(dú)立服務(wù)器月付39美元起

閱讀 3534·2021-09-07 10:26
wepy 項(xiàng)目的初始化應(yīng)用

閱讀 641·2019-08-30 15:54
前端每日實(shí)戰(zhàn)：123# 視頻演示如何用純 CSS 創(chuàng)作一架雙冀飛機(jī)

閱讀 696·2019-08-29 16:34
分享兩道大廠前端面試題

閱讀 849·2019-08-26 14:04
js實(shí)現(xiàn)微信禁止h5網(wǎng)頁下拉，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁，附：demo

閱讀 3272·2019-08-26 11:47
你不知道的Javascript：有趣的setTimeout

閱讀 2144·2019-08-26 11:33
JavaScript高級(jí)程序設(shè)計(jì)（3）

閱讀 2303·2019-08-23 15:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JavaScript異步編程的終極演變

相關(guān)文章

一篇文章了解前端異步編程方案演變

ES6-7

異步發(fā)展流程 —— 異步編程的終極大招 async/await

[前端工坊]淺談Web編程中的異步調(diào)用的發(fā)展演變

發(fā)表評(píng)論

0條評(píng)論

whjin

男|高級(jí)講師

TA的文章

浪點(diǎn)云主機(jī)怎么用-云主機(jī)怎么使用？

DediPath九月4折：洛杉磯VPS月付1.4美元起,獨(dú)立服務(wù)器月付39美元起

wepy 項(xiàng)目的初始化應(yīng)用

前端每日實(shí)戰(zhàn)：123# 視頻演示如何用純 CSS 創(chuàng)作一架雙冀飛機(jī)

分享兩道大廠前端面試題

js實(shí)現(xiàn)微信禁止h5網(wǎng)頁下拉，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁，附：demo

你不知道的Javascript：有趣的setTimeout

JavaScript高級(jí)程序設(shè)計(jì)（3）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

JavaScript異步編程的終極演變

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！