摘要:今天自己寫小程序的時(shí)候,近乎被異步搞到崩潰,不停地嵌套回調(diào)我知道和,但是我嫌寫起來跟裹腳布似的,而我怕有兼容性問題也從來沒有試過言歸正傳,將小程序的異步調(diào)用變?yōu)橥揭韵陆坛踢m用于所有異步,只是給小程序做了一下封裝。
今天自己寫小程序的時(shí)候,近乎被異步搞到崩潰,不停地嵌套回調(diào)(我知道 await 和 promise,但是我嫌promise寫起來跟裹腳布似的,而await我怕有兼容性問題也從來沒有試過)
言歸正傳,將小程序的異步調(diào)用變?yōu)橥?以下教程適用于所有異步,只是給小程序做了一下封裝)。
原理:增加事件隊(duì)列,采用事件回調(diào)來完成同步化
以下代碼復(fù)制粘貼到控制臺(tái)即可測(cè)試效果;
這里直接寫es6代碼了,先寫個(gè)定時(shí)器版本的方便測(cè)試與理解
先寫個(gè)無注釋版本的,方便直接看代碼
class Async{ constructor() { this.list = []; this.sock = false; } request(obj) { setTimeout(() => { console.log(obj); this.sock = false; if(this.list[0]) this.do(this.list.shift()); }, 1000) } do(requestObj, sync) { if(!sync) { return this.request(requestObj); } if(this.sock) { this.list.push(requestObj); }else { this.sock = true; this.request(requestObj); } } }
-----------以下為注釋版本-----------
class Async{ constructor() { this.list = []; // 定義 執(zhí)行隊(duì)列 this.sock = false; // 判斷是否有任務(wù)正在執(zhí)行 } request(obj) { setTimeout(() => { console.log(obj); this.sock = false; // 重置為沒有任務(wù)正在執(zhí)行 if(this.list[0]) // 如果隊(duì)列中還有任務(wù),執(zhí)行下一個(gè)任務(wù) this.do(this.list.shift()); }, 1000) // 模擬一個(gè)異步,一秒后執(zhí)行任務(wù),執(zhí)行完成后執(zhí)行下一個(gè)異步任務(wù) } do(requestObj) { if(this.sock) // 如果有任務(wù)在執(zhí)行 this.list.push(requestObj); // 將當(dāng)前任務(wù)其增加到任務(wù)隊(duì)列 else { this.sock = true; // 否則開始執(zhí)行當(dāng)前任務(wù)并設(shè)定"有任務(wù)在執(zhí)行" this.request(requestObj); } } } var x = new Async(); x.do({url: 1}); // 一秒后打印 url: 1 x.do({url: 2}); // 兩秒后打印 url: 2
但是同步只是異步無可奈何的選擇,所以不能全部否決掉異步
class Async{ constructor() { this.list = []; // 定義 執(zhí)行隊(duì)列 this.sock = false; // 判斷是否有任務(wù)正在執(zhí)行 } request(obj) { setTimeout(() => { console.log(obj); this.sock = false; // 重置為沒有任務(wù)正在執(zhí)行 if(this.list[0]) // 如果隊(duì)列中還有任務(wù),執(zhí)行下一個(gè)任務(wù) this.do(this.list.shift()); }, 1000) // 模擬一個(gè)異步,一秒后執(zhí)行任務(wù),執(zhí)行完成后執(zhí)行下一個(gè)異步任務(wù) } do(requestObj, sync) { if(!sync) // 判斷是否需要同步,如果需要再加入到隊(duì)列,不然直接執(zhí)行 return this.request(requestObj); if(this.sock) // 如果有任務(wù)在執(zhí)行 this.list.push(requestObj); // 將當(dāng)前任務(wù)其增加到任務(wù)隊(duì)列 else { this.sock = true; // 否則開始執(zhí)行當(dāng)前任務(wù)并設(shè)定"有任務(wù)在執(zhí)行" this.request(requestObj); } } } var x = new Async(); x.do({url: 1}, true); // 一秒后打印 url: 1 x.do({url: 2}, true); // 兩秒后打印 url: 2 x.do({url: 3}); // 一秒后打印 url: 3
然后加入小程序的接口調(diào)用方法
class AsyncRequest{ constructor() { this.list = []; // 定義 執(zhí)行隊(duì)列 this.sock = false; // 判斷是否有任務(wù)正在執(zhí)行 } request(obj) { wx.request({ url: obj.url, data: obj.data, header: { "content-type": "application/json" }, success: res => { obj.cb(res); if(this.list[0]) this.do(this.list.shift()); } }) } do(requestObj, sync) { if(!sync) // 判斷是否需要同步,如果需要再加入到隊(duì)列,不然直接執(zhí)行 return this.request(requestObj); if(this.sock) // 如果有任務(wù)在執(zhí)行 this.list.push(requestObj); // 將當(dāng)前任務(wù)其增加到任務(wù)隊(duì)列 else { this.sock = true; // 否則開始執(zhí)行當(dāng)前任務(wù)并設(shè)定"有任務(wù)在執(zhí)行" this.request(requestObj); } } } var x = new AsyncRequest(); x.do({url: 1, data: {test: 1}, cb: ()=> {}}, true); // 先請(qǐng)求接口1 x.do({url: 2}, true); // 1 請(qǐng)求完成后請(qǐng)求接口2 x.do({url: 3}); // 和 1 同時(shí) 發(fā)起請(qǐng)求
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/105637.html
摘要:并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優(yōu)化項(xiàng)目,在瀏覽器端的層面上提升速度,幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題,由基礎(chǔ)到困難循序漸進(jìn),適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優(yōu)化項(xiàng)目,在瀏覽器端的層面上提升速度,幫助初中級(jí)前端工程師快...
摘要:并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優(yōu)化項(xiàng)目,在瀏覽器端的層面上提升速度,幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題,由基礎(chǔ)到困難循序漸進(jìn),適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優(yōu)化項(xiàng)目,在瀏覽器端的層面上提升速度,幫助初中級(jí)前端工程師快...
摘要:并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優(yōu)化項(xiàng)目,在瀏覽器端的層面上提升速度,幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題,由基礎(chǔ)到困難循序漸進(jìn),適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優(yōu)化項(xiàng)目,在瀏覽器端的層面上提升速度,幫助初中級(jí)前端工程師快...
摘要:并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優(yōu)化項(xiàng)目,在瀏覽器端的層面上提升速度,幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題,由基礎(chǔ)到困難循序漸進(jìn),適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優(yōu)化項(xiàng)目,在瀏覽器端的層面上提升速度,幫助初中級(jí)前端工程師快...
閱讀 1122·2021-11-16 11:42
閱讀 2903·2021-10-12 10:18
閱讀 2861·2021-09-24 09:48
閱讀 3464·2019-08-30 15:56
閱讀 1526·2019-08-30 14:17
閱讀 3046·2019-08-29 12:14
閱讀 909·2019-08-27 10:51
閱讀 2027·2019-08-26 13:28