資訊專(zhuān)欄INFORMATION COLUMN
摘要：題外今天嘗試了一下從文件經(jīng)過(guò)再到文件的整個(gè)過(guò)程，這也是這種靜態(tài)博客生成過(guò)程中的一環(huán)。這過(guò)程中，用到的中的系統(tǒng)，寫(xiě)的過(guò)程中恰好也經(jīng)歷了從到再到的轉(zhuǎn)變?？梢钥吹缴厦娴暮瘮?shù)已經(jīng)非常順序化了，當(dāng)有個(gè)異步函數(shù)回調(diào)時(shí)，只需要順序?qū)懢涂梢岳病?/p>
題外：今天嘗試了一下從Markdown文件經(jīng)過(guò)ejs再到html文件的整個(gè)過(guò)程，這也是Hexo這種靜態(tài)博客生成過(guò)程中的一環(huán)。這過(guò)程中，用到的Node中的fs系統(tǒng)，寫(xiě)的過(guò)程中恰好也經(jīng)歷了從Callback到Promise再到Async的轉(zhuǎn)變。文末有福利哦！
在Node開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)遇到異步的情況，異步簡(jiǎn)單的說(shuō)就是一個(gè)函數(shù)在返回時(shí)，調(diào)用者不能得到最終結(jié)果，而是需要等待一段時(shí)間才能得到，那么這個(gè)函數(shù)可以算作異步函數(shù)。那在Node開(kāi)發(fā)中具體可以體現(xiàn)為資源的請(qǐng)求，例如訪問(wèn)數(shù)據(jù)庫(kù)、讀寫(xiě)文件等等。下面舉個(gè)小例子來(lái)代碼演示一下。
Callback先上代碼：
const fs = require("fs"),
ejs = require("ejs"),
matter = require("gray-matter"),
showdown = require("showdown"),
converter = new showdown.Converter()
fs.readFile("./source/hello.md", "utf8", (error, data) => {
if (error) {
console.log(error)
return
} else {
const mdData = matter(data)
const html = converter.makeHtml(mdData.content)
fs.readFile("./views/index.ejs", "utf8", (error, data) => {
if (error) {
console.log(error)
return
} else {
// ejs to html
const template = ejs.compile(data)
const htmlStr = template({content: html})
fs.writeFile("./public/index.html", htmlStr, (error) => {
if (error) {
console.log(error)
return
} else {
console.log("success")
}
})
}
})
}
})
可以看到，這只是寫(xiě)了三個(gè)讀寫(xiě)文件，嵌套就顯得非常臃腫，可以預(yù)見(jiàn)到當(dāng)有更多的callback將是怎樣一個(gè)情景，代碼做了什么東西就不解釋了，主要看一下callback的場(chǎng)景，在讀或?qū)懳募罂梢愿粋€(gè)回調(diào)函數(shù)，當(dāng)前一個(gè)讀文件操作完成之后，才能在回調(diào)中利用結(jié)果來(lái)執(zhí)行下一個(gè)讀文件和寫(xiě)文件，通過(guò)回調(diào)來(lái)保證函數(shù)的執(zhí)行順序。具體fs的使用，可見(jiàn)Node-fs文檔
Promise來(lái)看看引入Promise之后的寫(xiě)法：
const readFileAsync = function (path) {
return new Promise((resolve, reject) => {
fs.readFile(path, "utf8", (error, data) => {
if (error) {
reject(error)
} else {
resolve(data)
}
})
})
}
const writeFileAsync = function (path, data) {
return new Promise((resolve, reject) => {
fs.writeFile(path, data, (error, data) => {
if (error) {
reject(error)
} else {
resolve(data)
}
})
})
}
let html = ""
readFileAsync("./source/hello.md")
.then((data1) => {
const mdData = matter(data1)
html = converter.makeHtml(mdData.content)
return readFileAsync("./views/index.ejs")
})
.then((data2) => {
const template = ejs.compile(data2)
const htmlStr = template({content: html})
return writeFileAsync("./public/index2.html", htmlStr)
})
.then(() => console.log("success"))
.catch(error => console.log(error))
這里只是簡(jiǎn)單的用Promise封裝了一下fs的兩個(gè)函數(shù)，拿其中一個(gè)函數(shù)來(lái)說(shuō)，readFileAsync返回了一個(gè)Promise對(duì)象，這樣就可以通過(guò)這個(gè)對(duì)象來(lái)使用then進(jìn)行結(jié)果回調(diào)，雖然在封裝的時(shí)候需要寫(xiě)一些代碼，但是當(dāng)有多處使用的時(shí)候，代碼可以明顯的簡(jiǎn)潔許多，不同再一層一層地向右縮進(jìn)。另外有一些工具庫(kù)如bluebird提供了API，可以很方便地處理異步。
在下面的代碼中使用bluebird
Async await還是先上代碼：
const fs = require("fs"),
ejs = require("ejs"),
matter = require("gray-matter"),
showdown = require("showdown"),
converter = new showdown.Converter(),
Promise = require("bluebird")
Promise.promisifyAll(fs)
async function renderHtml() {
const data1 = await fs.readFileAsync("./source/hello.md", "utf8")
const mdData = matter(data1)
const html = converter.makeHtml(mdData.content)
const data2 = await fs.readFileAsync("./views/index.ejs", "utf8")
const template = ejs.compile(data2)
const htmlStr = template({content: html})
fs.writeFile("./public/index4.html", htmlStr)
console.log("success")
}
renderHtml()
在Node7.6以上就已經(jīng)支持async function了，定義時(shí)只需要在function之前添加async關(guān)鍵字，而await也只能在async function中使用，一般會(huì)跟一個(gè)Promise對(duì)象，表示等待Promise返回結(jié)果后，再繼續(xù)執(zhí)行。
可以看到上面的函數(shù)已經(jīng)非常順序化了，當(dāng)有n個(gè)異步函數(shù)回調(diào)時(shí)，只需要順序?qū)懢涂梢岳?。可以看出，其?shí)async await也離不開(kāi)Promise，只不過(guò)寫(xiě)法上消除了then中帶有callback的那一絲絲影子，讓代碼更加優(yōu)雅~，因?yàn)闆](méi)有了then,可以用try catch進(jìn)行錯(cuò)誤處理
VSCode插件推薦小彩蛋來(lái)啦，正好結(jié)合這個(gè)例子，為方便實(shí)時(shí)看到每一步的執(zhí)行結(jié)果，推薦一個(gè)VSCode
插件：Quokka.ja
可以實(shí)時(shí)地進(jìn)行代碼的執(zhí)行結(jié)果，再也不用console.log之后去看終端了。當(dāng)然，在實(shí)際開(kāi)發(fā)中可能應(yīng)用性不是特別強(qiáng)，尤其是對(duì)于上下文強(qiáng)依賴(lài)型、后端請(qǐng)求依賴(lài)型的場(chǎng)景。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84971.html
摘要：簽訂協(xié)議的兩方分別是異步接口和。在異步函數(shù)中，使用異常捕獲的方案，代替了的異常捕獲的方案。需要注意的是，在異步函數(shù)中使異步函數(shù)用時(shí)要使用，不然異步函會(huì)被同步執(zhí)行。 同步與異步 通常，代碼是由上往下依次執(zhí)行的。如果有多個(gè)任務(wù)，就必需排隊(duì)，前一個(gè)任務(wù)完成，后一個(gè)任務(wù)才會(huì)執(zhí)行。這種執(zhí)行模式稱(chēng)之為： 同步（synchronous） 。新手容易把計(jì)算機(jī)用語(yǔ)中的同步，和日常用語(yǔ)中的同步弄混淆。如，...
摘要：作者珂珂滬江前端開(kāi)發(fā)工程師本文為原創(chuàng)文章，有不當(dāng)之處歡迎指出。只對(duì)未來(lái)發(fā)生的事情做出兩種基本情況的應(yīng)對(duì)成功和失敗。在異步轉(zhuǎn)同步這條道路上，只是一個(gè)出彩的點(diǎn)，他還尚有一些缺陷和不足，并不是我們最終的解決方案。 作者：珂珂 （滬江前端開(kāi)發(fā)工程師）本文為原創(chuàng)文章，有不當(dāng)之處歡迎指出。轉(zhuǎn)載請(qǐng)標(biāo)明出處。 一個(gè)新事物的產(chǎn)生必然是有其歷史原因的。為了更好的以同步的方式寫(xiě)異步的代碼，人們?cè)贘S上操碎了...
摘要：是測(cè)試用例，表示一個(gè)單獨(dú)的測(cè)試，是測(cè)試的最小單位。第一個(gè)參數(shù)是測(cè)試用例的名稱(chēng)加應(yīng)該等于，第二個(gè)參數(shù)是一個(gè)實(shí)際執(zhí)行的函數(shù)。這里對(duì)異步代碼進(jìn)行測(cè)試時(shí)需要注意一點(diǎn)，默認(rèn)一個(gè)單元測(cè)試最多執(zhí)行超時(shí)會(huì)報(bào)錯(cuò)。 Mocha簡(jiǎn)介： 一個(gè)具有豐富特性的javascript 測(cè)試框架，支持多種斷言庫(kù)，異步代碼測(cè)試等，不僅可運(yùn)行在node.js 環(huán)境中還可以運(yùn)行在瀏覽器中。 一、安裝 // 全局安裝 npm ...
摘要：但是的的出現(xiàn)碉堡的新朋友，我們可以輕松寫(xiě)出同步風(fēng)格的代碼同時(shí)又擁有異步機(jī)制，可以說(shuō)是目前最簡(jiǎn)單，最優(yōu)雅，最佳的解決方案了。不敢說(shuō)這一定是終極的解決方案，但確實(shí)是目前最優(yōu)雅的解決方案 一、異步解決方案的進(jìn)化史 JavaScript的異步操作一直是個(gè)麻煩事，所以不斷有人提出它的各種解決方案。可以追溯到最早的回調(diào)函數(shù)(ajax老朋友)，到Promise(不算新的朋友)，再到ES6的Gener...
閱讀 3866·2023-04-26 00:36
閱讀 2674·2021-11-16 11:44
閱讀 1099·2021-11-15 17:58
閱讀 1668·2021-09-30 09:47
閱讀 1214·2019-08-30 13:05
閱讀 1547·2019-08-30 12:55
閱讀 2413·2019-08-30 11:02
閱讀 2734·2019-08-29 17:01
