摘要:模塊的意義和原理在上已經(jīng)有詳細(xì)的介紹了,具體參見用法異常處理輸出結(jié)果應(yīng)該為源碼各種模塊加載方式的處理下面這倆函數(shù)是有用的主該函數(shù)會在異步過程執(zhí)行完畢后被調(diào)用會喚醒主函數(shù)繼續(xù)執(zhí)行到下一個或為止。
其實就是照著網(wǎng)上的介紹和co的源碼實現(xiàn)了一個自己用的前端async模塊。支持RequireJS和SeaJS,支持$.ajax。
有喜歡co但是不知道怎么用的前端朋友可以拿去用。
co模塊的意義和原理在sf上已經(jīng)有詳細(xì)的介紹了,具體參見:
http://segmentfault.com/a/1190000002732081
用法:
async(function* () { var a = yield Promise.resolve(1); console.log(a); var b = yield [Promise.resolve(2), Promise.resolve(3)]; console.log(b); return 4; }).then(function (value) { console.log(value); }).catch(function (e) { // 異常處理 }); // 輸出結(jié)果應(yīng)該為 1 [2,3] 4
源碼:
/*global exports*/ "use strict"; (function (factory) { // 各種模塊加載方式的處理 if (typeof define === "function" && define.amd) { define([], factory); } else if (typeof define === "function" && define.cmd) { define(function (require, exports, module) { module.exports = factory(jQuery); }); } else if (typeof exports === "object") { exports.async = factory(); } else { // window.async=factory(); } }(function () { // 下面這倆函數(shù)是有用的 function async(generator) { // 主Promise return new Promise(function (resolve, reject) { var g = generator(); /** * 該函數(shù)會在異步過程執(zhí)行完畢后被調(diào)用,會喚醒主函數(shù)繼續(xù)執(zhí)行到下一個yield或return為止。 * 參數(shù)val為異步過程的結(jié)果,即promise.result。 * 返回值為主函數(shù)內(nèi)yield或return的結(jié)果, * 如果是yield則必須為promise或可被autoPack包裝的對象,或者包含前兩者的數(shù)組 */ function next(val) { // 將上次運行結(jié)果返回給主函數(shù),令主函數(shù)繼續(xù)執(zhí)行到下一處中斷,并將結(jié)果存入result var result = g.next(val); // 暫存主函數(shù)運行結(jié)果 var promise = result.value; // 判斷主函數(shù)是否執(zhí)行完畢,執(zhí)行完畢則調(diào)用resolve完成主Promise,否則繼續(xù)執(zhí)行 if (!result.done) { // 判斷主函數(shù)提供的參數(shù)是否為數(shù)組, // 如果不是數(shù)組則用autoPack封裝后通過then(next)綁定下一步流程。并通過catch(reject)拋出異常 // 如果是數(shù)組則對每個成員進(jìn)行封裝后用Promise.All打包,然后繼續(xù)執(zhí)行。 if (promise instanceof Array) { Promise.all(promise.map(autoPack)).then(next).catch(reject); } else { autoPack(promise).then(next).catch(reject); } } else { resolve(promise); } } // 捕獲并通過reject拋出異常 try { next(); } catch (e) { reject(e); } }) } // 自動打包,可以將第三方實現(xiàn)的Promise工具打包為ES6標(biāo)準(zhǔn)的Promise // 目前僅支持jQuery.Promise function autoPack(target) { // 包裝$.ajax if (target.error) { return new Promise(function (resolve, reject) { target.done(resolve).error(reject); }) } else { return target; } } return async; }));
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/86172.html
摘要:前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。對該漏洞的綜合評級為高危。目前,相關(guān)利用方式已經(jīng)在互聯(lián)網(wǎng)上公開,近期出現(xiàn)攻擊嘗試爆發(fā)的可能。 前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡...
摘要:前端每周清單第期支付寶前端構(gòu)建工具發(fā)展用加快網(wǎng)頁響應(yīng)速度餓了么升級實踐前端前端每周清單前端每周清單專注前端領(lǐng)域內(nèi)容,分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單第 12 期:支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁響應(yīng)速度、餓了么PWA 升級實踐 為InfoQ中文站特供稿件,首發(fā)地址為這里;如需轉(zhuǎn)載,請與InfoQ中文站聯(lián)系。從屬于筆...
摘要:而在中是迭代器生成器,被創(chuàng)造性的拿來做異步流程控制了。當(dāng)執(zhí)行的時候,并不執(zhí)行函數(shù)體,而是返回一個迭代器。行代碼再看看文章開頭的行代碼首先生成一個迭代器,然后執(zhí)行一遍,得到的是一個對象,里面再執(zhí)行。 廣告招人:阿里巴巴招前端,在這里你可以享受大公司的福利和技術(shù)體系,也有小團(tuán)隊的挑戰(zhàn)和成長空間。聯(lián)系: qingguang.meiqg at alibaba-inc.com 首先請原諒我的標(biāo)題...
摘要:延伸閱讀學(xué)習(xí)與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇 前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(ID:frontshow),及時獲取前端每周清單;本文則是對于半年來發(fā)布的前端每周清單...
摘要:前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。背后的故事本文是對于年之間世界發(fā)生的大事件的詳細(xì)介紹,闡述了從提出到角力到流產(chǎn)的前世今生。 前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎...
閱讀 3568·2023-04-26 02:31
閱讀 3703·2021-11-23 09:51
閱讀 1347·2021-11-17 09:33
閱讀 2509·2021-11-16 11:45
閱讀 2627·2021-10-11 11:12
閱讀 2499·2021-09-22 15:22
閱讀 2795·2021-09-04 16:40
閱讀 2649·2021-07-30 15:30