微信小程序利用co處理異步流程的方法教程
本文主要介紹的是關(guān)于微信小程序利用co處理異步流程的方法教程,分享出來(lái)供大家參考學(xué)習(xí),需要的朋友們下面來(lái)看看詳細(xì)的介紹:
co
co是一個(gè)基于ES6 Generator特性實(shí)現(xiàn)的【異步流程同步化】寫法的工具庫(kù)。
co需要使用Promise特性,所以,我們先來(lái)創(chuàng)建一個(gè)使用Promise來(lái)處理的異步方法:
function myAsyncFunc() { return new Promise(function (resolve, reject) { setTimeout(function () { console.log("myAsyncFunction done!"); resolve({ data: "Hello,World" }) }, 2000); }); }
然后,直接使用這個(gè)方法的話,就會(huì)如下,使用了then/catch的回調(diào)方式來(lái)處理調(diào)用結(jié)果和異常處理:
myAsyncFunc().then(function (result) { console.log(result.data); //Hello,World }).catch(function (err) { //... });
而如果是使用co的話,則會(huì)像這樣:
co(function *() { try { var result = yield myAsyncFunc(); console.log(result.data); //Hello,World } catch(e) { } });
這樣的寫法,是不是就是我們非常熟悉的,比較符合邏輯思維習(xí)慣的同步寫法了?
關(guān)于co的用法,在本文中我就不多展開了,有興趣的朋友可以自行搜索相關(guān)資料。我今天要講的是,如何在小程序環(huán)境下面成功的使用co。
1. 開啟語(yǔ)言轉(zhuǎn)譯選項(xiàng)
由于要使用到ES6的generator,而又要為了兼容性,我們必須對(duì)ES6的語(yǔ)法進(jìn)行降級(jí)轉(zhuǎn)譯,變成ES5。
開啟語(yǔ)言轉(zhuǎn)譯選項(xiàng)
2. 引入generator支撐庫(kù)
經(jīng)過(guò)轉(zhuǎn)譯后的代碼,需要依賴一個(gè)regeneratorRuntime,才能支持generator特性。Facebook開源的一個(gè)regenerator就是這樣一個(gè)庫(kù),Github地址:https://github.com/facebook/regenerator/
你可以通過(guò)npm來(lái)下載這個(gè)regenerator庫(kù):
npm install regenerator
然后將下載文件中名為regenerator-runtime.js的文件拿出來(lái),放到我們的小程序代碼中去。
3.下載co和Promise庫(kù)
接著,通過(guò)npm下載co庫(kù):
npm install co
將下載文件中名為co.js文件拿出來(lái),放到我們的小程序代碼中去。
因?yàn)樾枰蕾嘝romise,所以我們需要引入一個(gè)Promise實(shí)現(xiàn)庫(kù)。在此我們選用一個(gè)小而兼容性好的庫(kù)es6-promise。同樣可以通過(guò)npm下載:
npm install es6-promise
將es6-promise.js放到我們的小程序代碼中。
4.引入小程序代碼中
使用前,將這些庫(kù)正確的引入我們的代碼:
const Promise = global.Promise = require('../../libs/es6-promise') const regeneratorRuntime = global.regeneratorRuntime = require('../../libs/regenerator-runtime') const co = require('../../libs/co')
好了,接下來(lái)就可以開始愉快的使用co進(jìn)行編程了。
總結(jié)
好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- 微信小程序中使用Async-await方法異步請(qǐng)求變?yōu)橥秸?qǐng)求方法
- 詳解將微信小程序接口Promise化并使用async函數(shù)
- 微信小程序 緩存(本地緩存、異步緩存、同步緩存)詳解
- 詳解微信小程序 同步異步解決辦法
- 微信小程序異步處理詳解
- 微信小程序 wx.request方法的異步封裝實(shí)例詳解
- 微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?
- 微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法
- 微信小程序之支付后調(diào)用SDK的異步通知及驗(yàn)證處理訂單方法
- 微信小程序中使用Promise進(jìn)行異步流程處理的實(shí)例詳解
- 微信小程序 es6-promise.js封裝請(qǐng)求與處理異步進(jìn)程
- 微信小程序中使用 async/await的方法實(shí)例分析
相關(guān)文章
寫了一個(gè)layout,拖動(dòng)條連貫,內(nèi)容區(qū)可為iframe
寫了一個(gè)layout,拖動(dòng)條連貫,內(nèi)容區(qū)可為iframe...2007-08-08詳解如何在Canvas上實(shí)現(xiàn)坐標(biāo)定位
這篇文章我們將來(lái)詳細(xì)的給大家講解一下如何在 canvas 上實(shí)現(xiàn)坐標(biāo)的定位,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08快速解決js動(dòng)態(tài)改變dom元素屬性后頁(yè)面及時(shí)渲染的問(wèn)題
下面小編就為大家?guī)?lái)一篇快速解決js動(dòng)態(tài)改變dom元素屬性后頁(yè)面及時(shí)渲染的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能
最近做個(gè)項(xiàng)目,需要實(shí)現(xiàn)移動(dòng)端左滑刪除功能,當(dāng)時(shí)js代碼將網(wǎng)上找的進(jìn)行刪減優(yōu)化,下面通過(guò)本文給大家分享基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能,感興趣的朋友一起看看2017-07-07使用uni-app開發(fā)微信小程序的實(shí)現(xiàn)
這篇文章主要介紹了使用uni-app開發(fā)微信小程序的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12