前端非同步那些年
阿新 • • 發佈:2018-12-11
js 自己最大的賣點就是非同步回撥,但是又總是在一路上撒潑一樣在脫掉這一塊外衣。
1: 最原始的回撥實現
const fs = require('fs') function readFileOne(path,callback){ fs.readFile(path,function(err,res){ if(!err) { callback.call(null,null, res.toString() ) }else{ callback.call(null,err) } }) } readFileOne('./test.json',function(err,res){ console.log(res) })
沒毛病,上面的程式碼很容易就實現了讀取檔案的操作,回撥函式很方便,可惜半路殺出一個promise
2: promise 實現非同步寫法
const fs = require('fs') function readText(){ return new Promise((resolve,reject)=>{ fs.readFile('./test.json',(err,res)=>{ if(err){ reject(err) }else{ resolve(res) } }) }) } readText().then((res)=>{ console.log(res.toString()) }).catch((e)=>{ console.log(e) })
也完全沒有毛病,實現手段上更加流化,實現了非同步程式碼同步化寫,然毛線,又出來一個 Generate],這個是個什麼東西?可以看我的另一篇文章 javascript
中 迭代器是個什麼東西?
3: generate 迭代器 實現非同步
const fs = require('fs') // 8.x版本node內建將函式轉化為`pronmise`的方法 const { promisify } = require('util') const proFiles = promisify(fs.readFile) function* readFile(path){ yield proFiles(path) } var g = readFile('./test.json') g.next().value.then((r)=>{ console.log(r.toString() ) })
4: generate 還沒有用熟練,es7最終出了終極解決方法 Async
async
更加語義化比generator
,也不單單是相對於非同步請求,
const proFiles = promisify(fs.readFile)
const readFile = async function (path){
let res = await proFiles(path)
return res
}
readFile('./test.json').then((res)=>{
console.log(res.toString())
})
這個是最簡單的 async同步使用方式,更加複雜的可以i檢視;這裡值是拋磚引玉