ES6中的異步解決方案有哪些?相信很多沒有經(jīng)驗(yàn)的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
柯城ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景,ssl證書未來市場廣闊!成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道,可以享受市場價格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:028-86922220(備注:SSL證書合作)期待與您的合作!
前置知識準(zhǔn)備
Generator 函數(shù) 執(zhí)行會返回一個迭代器(Iterator), 在迭代器上可以調(diào)用 next() 方法, 執(zhí)行下一個 yield 或 return
調(diào)用 next() 方法,會返回一個對象 {value: res, done: false} , value 的值 為 yield 之后表達(dá)式的值,done 的值 表示迭代器,是否已經(jīng)執(zhí)行完畢(最后一個yield 或 return )
next() 方法,可以傳入一個值,做為前一個yield 表達(dá)式的返回值
有了這些知識,可以把Promise 對象 做一個的 yield 的值,配合一個執(zhí)行器,來處理異步操作
方式一: Generator + Promise + 執(zhí)行器
const fs = require('fs') // Promise 版的readFile const readFile = function (fileName) { return new Promise(function(resolve, reject) { fs.readFile(fileName, function(err, data){ if (err) return reject(error); resolve(data); }) }) } const gen = function * () { let f1 = yield readFile('a.txt'); let f2 = yield readFile('b.txt'); console.log('F1--->', f1.toString()); console.log('F2--->', f2.toString()); } // 基于 Generator 和 Promise 的自動執(zhí)行器 function run(gen) { let g = gen(); function next(data) { let result = g.next(data); if (result.done) return result.value; result.value.then(function(data) { next(data); }); } next(); } run(gen);
執(zhí)行器 中的 result.value 現(xiàn)在是一個Promise, 通過 then 方法拿到需要的結(jié)果,傳下一次 next 方法,這樣 let f1 = yield readFile('a.txt'); 就可以拿到值!
方式二:Generator + Thunk函數(shù) + 執(zhí)行器
const fs = require('fs') // 把一個單一執(zhí)行的函數(shù) ,變成需要再次調(diào)用的函數(shù),固定一部分參數(shù) function thunkify(fn, obj = {}) { return function () { let args = Array.from(arguments); return function (m) { args.push(m) return fn.apply(obj, args) } } } const readFile = thunkify(fs.readFile, fs); const gen = function* () { let f1 = yield readFile('a.txt'); let f2 = yield readFile('b.txt'); console.log('F1-->', f1.toString()); console.log('F2-->', f2.toString()); } // 基于 Generator 和 Thunk函數(shù)的自動執(zhí)行器 function run(fn) { let gen = fn(); function next(err, data) { let result = gen.next(data); if (result.done) return 1; result.value(next); } next(); } run(gen);
這里的 Thunk 轉(zhuǎn)換器,把原來的 fs.readFile 函數(shù) 轉(zhuǎn)換成需要兩次調(diào)用的函數(shù) ,readFile 的執(zhí)行結(jié)果,可以通過回調(diào)函數(shù)能參數(shù)傳遞出來,再傳給 next 方法
方式三:基于 async 函數(shù) 和 await 的異步處理方式
const fs = require('fs') // Promise 版的readFile const readFile = function (fileName) { return new Promise(function(resolve, reject) { fs.readFile(fileName, function(err, data){ if (err) return reject(err); resolve(data); }) }) } const asyncReadFile = async function () { const f1 = await readFile('a.txt'); const f2 = await readFile('b.txt'); console.log(f1.toString()); console.log(f2.toString()); }; asyncReadFile();
readFile 函數(shù) 對比方式一沒有大的變化 ,Generator 函數(shù)變成 了 async 函數(shù),可見 這處方式 只是 方式一的一個語法糖,async 函數(shù)自帶了執(zhí)行器!
看完上述內(nèi)容,你們掌握ES6中的異步解決方案有哪些的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!