JavaScript?異步函數(shù)?Promisification?處理詳情
前言:
Promisification
是一個(gè)很長(zhǎng)的詞,表示一個(gè)編程范式的轉(zhuǎn)變,即將接受回調(diào)的函數(shù)轉(zhuǎn)換為一個(gè)返回類型為 Promise 的函數(shù)。
我們現(xiàn)實(shí)的開發(fā)項(xiàng)目中經(jīng)常需要這種轉(zhuǎn)換,因?yàn)樵S多函數(shù)和庫(kù)都是基于回調(diào)的,但是 Promise 更方便,所以對(duì)它們進(jìn)行 Promisification 處理是有意義的。
下面是一個(gè)簡(jiǎn)單的例子:
function loadScript(src, callback) { let script = document.createElement('script'); script.src = src; script.onload = () => callback(null, script); script.onerror = () => callback(new Error(`Script load error for ${src}`)); document.head.append(script); }
這段代碼,動(dòng)態(tài)創(chuàng)建一個(gè) script 元素,待其加載完畢后,會(huì)觸發(fā) onload 事件指定的回調(diào)函數(shù)。
運(yùn)行時(shí),loadScript 的調(diào)用者,負(fù)責(zé)指定回調(diào)函數(shù):
loadScript('path/script.js', (err, script) => {...})
下面我們將會(huì)對(duì)這個(gè)函數(shù)進(jìn)行 Promisification 改造。
我們將創(chuàng)建一個(gè)新函數(shù) loadScriptPromise(src),它執(zhí)行相同的操作(加載腳本),但返回一個(gè) Promise 而不是使用回調(diào)。
換句話說,我們只傳遞 src (沒有回調(diào))并得到一個(gè) Promise 作為返回參數(shù),當(dāng)加載成功時(shí)使用創(chuàng)建并加載好的 script 進(jìn)行 resolve,否則通過 reject 拋出錯(cuò)誤。
改造后的函數(shù):
let loadScriptPromise = function(src) { return new Promise((resolve, reject) => { loadScript(src, (err, script) => { if (err) reject(err); else resolve(script); }); }); };
消費(fèi)代碼:
loadScriptPromise('path/script.js').then(...)
正如我們所見,新函數(shù)是原始 loadScript 函數(shù)的包裝器。
在實(shí)踐中,我們可能需要 Promisify 多個(gè)函數(shù),所以構(gòu)造一個(gè) helper 函數(shù)顯得更有意義。
我們稱這個(gè)函數(shù)為 promisify(f):它接受一個(gè)準(zhǔn)備被改造成 Promise 的函數(shù) f, 并返回一個(gè) wrapper 函數(shù)。
完整實(shí)現(xiàn)如下:
function promisify(f) { return function (...args) { // return a wrapper-function (*) return new Promise((resolve, reject) => { function callback(err, result) { // our custom callback for f (**) if (err) { reject(err); } else { resolve(result); } } args.push(callback); // append our custom callback to the end of f arguments f.call(this, ...args); // call the original function }); }; }
消費(fèi)代碼:
let loadScriptPromise = promisify(loadScript); loadScriptPromise(...).then(...);
到此這篇關(guān)于JavaScript 異步函數(shù) Promisification 處理詳情的文章就介紹到這了,更多相關(guān)JavaScript Promisification 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序獲取位置展示地圖并標(biāo)注信息的實(shí)例代碼
這篇文章主要介紹了微信小程序獲取位置展示地圖并標(biāo)注信息的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09js實(shí)現(xiàn)鍵盤控制DIV移動(dòng)的方法
這篇文章主要介紹了js實(shí)現(xiàn)鍵盤控制DIV移動(dòng)的方法,以實(shí)例形式完整的講述了js控制div移動(dòng)所涉及的css、js與html使用技巧,需要的朋友可以參考下2015-01-01微信小程序?qū)崿F(xiàn)手勢(shì)滑動(dòng)卡片效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手勢(shì)滑動(dòng)卡片效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08JS實(shí)現(xiàn)網(wǎng)頁(yè)搶購(gòu)功能(觸發(fā),終止腳本)
小編通過一個(gè)網(wǎng)頁(yè)式的搶購(gòu)功能的實(shí)現(xiàn)給大家講解一下JS如何觸發(fā)和終止腳本來完成這個(gè)任務(wù)。2017-11-11