小程序 js 異步方法 callback 使用

????最近接手了一個小程序項目,其中最大的Js文件在兩千行左右,我根據(jù)業(yè)務(wù)邏輯瀏覽了一遍該js文件,發(fā)現(xiàn)很多代碼寫的都有問題,可優(yōu)化的內(nèi)容很多。

????下面通過該js文件,總結(jié)出了幾點,今天先更新一下關(guān)于 **callback** 的使用吧。

????callback 都是基于異步方法使用的,優(yōu)勢:

????????1,它保證了異步調(diào)用流程的正確性,不會出現(xiàn)下一步?jīng)]有獲取到上一步的參數(shù)內(nèi)容,導(dǎo)致下一步執(zhí)行失敗;

????????2,簡化代碼,讓每一步異步操作都不用考慮后續(xù)操作內(nèi)容,只需要調(diào)用對應(yīng)的callback就可以。

? ? 涉及到的都是偽代碼,如下:

????????如B任務(wù)要在A任務(wù)執(zhí)行成功之后執(zhí)行,簡單流程會是:

```

main:function(){

????A();

????B();

}

```

????如果 A 和 B 都是同步方法,沒有問題。如果 A 是異步方法(比如wx.request),可能會這樣寫:

main: function(){

????A();

}

A:function(){

????wx.request({

????????url:URL,

????????success:function(){

????????????B();

????????}

????});

}

????如果此時 C 任務(wù)同樣也要在 A 任務(wù)執(zhí)行成功后執(zhí)行,此時就要使用 callback了:

main: function(){

????A(B);

????A(C);

}

A:function(successCallback){

????wx.request({

????????url:URL,

????????success:function(){

????????????if(successCallback){

????????????????successCallback();

????????????}

????????}

????});

}

????這樣寫的好處,A方法不需要考慮回調(diào)方法的具體內(nèi)容,只需要專注自己的任務(wù),約定好入?yún)⒑头祷刂祪?nèi)容就可以。

????上面舉例是一個方法可能有兩種后續(xù)操作,其實一個方法只有一個后續(xù)操作,也建議使用callback。

????比如稍微復(fù)雜一點兒的情況:

????????A 方法需要有參數(shù) name,成功和失敗兩個回調(diào)函數(shù),把結(jié)果 res 給到回調(diào)函數(shù)。代碼如下:

A:function(name, successCallback, failCallback){

????wx.request({

????????url: URL,

????????success:function(res){

????????????if(successCallback){

????????????????successCallback(res);

????????????}

????????},

????????fail:function(res){

????????????if(failCallback){

????????????????failCallback(res);

????????????}

????????}

????});

}

B:function(res){

????console.log('成功' + res);

}

C:function(res){

????console.log('失敗' + res);

}

????此時main方法如下寫:

main:function(){

????var name = '';

????A(name, B, C);

}

這樣寫 B 和C 方法是否會收到 res 參數(shù),不確定,所以我一般會如下寫:

main: function(){

????var name = '';

????var successCallback = function(res){

????????B(res);

????}

????var failCallback = function(res){

????????C(res);

????}

????A(name, successCallback, failCallback);

}

如果覺得把 B 和 C 的邏輯直接寫到 A 方法內(nèi)部,也無所謂反正,代碼也不多,那么如果 B和 C 也是異步方法,且也需要有各自的 successCallback和 failCallback呢?是不就復(fù)雜了,所以乖乖使用callback吧,會對以后業(yè)務(wù)邏輯擴展、bug定位、代碼閱讀都有好處。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容