【移動應(yīng)用開發(fā)技術(shù)】小程序中改進(jìn)異步封裝的問題有哪些

【移動應(yīng)用開發(fā)技術(shù)】小程序中改進(jìn)異步封裝的問題有哪些

在下給大家分享一下小程序中改進(jìn)異步封裝的問題有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！1.問題在Proxy封裝微信小程序的異步調(diào)用中留下了一個問題：像wx.request()

這種原本就有返回值的情況，該如何封裝呢？如果需要在請求的過程中取消請求，就會用到wx.request()的返回值：const

requestTask

=

wx.request(...);

if

(...)

{

//

因?yàn)槟承┰蛐枰∠@次請求

requestTask.abort();

}封裝過后的awx.request()會返回一個Promise對象，跟wx.request()原來的返回值毫無關(guān)系。如果想要能夠取消請求，就必須將wx.request()原來的返回值帶出來，應(yīng)該怎么辦？function

wxPromisify(fn)

{

return

async

function

(args)

{

return

new

Promise((resolve,

reject)

=>

{

const

originalResult

=

fn({

//

^^^^^^^^^^^^^^^^^^^^^^^

//

怎么把

originalResult

帶出去？

...(args

||

{}),

success:

res

=>

resolve(res),

fail:

err

=>

reject(err)

});

});

};

}2.可選方案也不賣關(guān)子了，這里有幾個方案可選：返回對象或數(shù)組，解構(gòu)后使用。比如返回{promise,originalResult}或[promise,originalResult]；通過一個“容器”參數(shù)將返回值帶出來，比如awx.request(params,outBox={})，在處理時為outBox賦值：outBox.originalResult；JS是動態(tài)類型，可以直接修改Promise對象，為其附加屬性：promise.originalResult=...。從使用者的角度來考慮，多數(shù)時候是不需要原返回值的，這時候是肯定是希望awaitawx.request()，而不是先解構(gòu)再await（或then()），所以，第1種方法不可選。第2種方法可行，不需要原返回值的時候，直接使用即可。但是需要原返回值的時候，稍嫌麻煩，需要先產(chǎn)生一個容器對象傳入。第3種方法使用起來應(yīng)該是最“無感”的。無論如何，原值隨Promise對象帶出來了，用或是不用，請便！現(xiàn)在我們來實(shí)現(xiàn)第3種方法，改造wxPromisify()：3.失敗的嘗試一開始想得很簡單，原來直接returnnewPromise()，現(xiàn)在加個臨時變量應(yīng)該就可以吧：function

wxPromisify(fn)

{

return

async

function

(args)

{

const

promise

=

new

Promise((resolve,

reject)

=>

{

//

^^^^^^^^^^^^^^^^

promise.originalResult

=

fn({

//

^^^^^^^^^^^^^^^^^^^^^^^^^

...(args

||

{}),

success:

res

=>

resolve(res),

fail:

err

=>

reject(err)

});

});

return

promise;

//

^^^^^^^^^^^^^^^

};

}然后得到一個錯誤：TypeError:

Cannot

set

property

'originalResult'

of

undefined這個錯很好理解，也很容易改……不過確實(shí)也很容易犯！本來是認(rèn)為promise是個局部變量，可以直接訪問，所以在其子作用域中使用是沒問題。但是這里忽略了這個子作用域是在構(gòu)造函數(shù)中。來大概分析一下：newPromise()需要一個函數(shù)（假設(shè)叫factory）作為參數(shù)，但是這個factory執(zhí)行的時機(jī)是什么？注意到newPromise()產(chǎn)生Promise實(shí)例之后，我們再沒有主動調(diào)用這個實(shí)例的任何方法，所以可以斷定，factory是在構(gòu)造的過程中執(zhí)行的。換句話說，這時候Promise實(shí)例還沒產(chǎn)生呢，promise引用的是undefined。4.成功的嘗試既然已經(jīng)知道問題所在，我們接著分析。構(gòu)造Promise實(shí)例的過程中調(diào)用了factory，而factory的在函數(shù)體中直接執(zhí)行了fn，可以立即拿到fn的返回值，所以這個Promise實(shí)例構(gòu)造完成之后，是可以拿到原返回值的?，F(xiàn)在來修改一下代碼：function

wxPromisify(fn)

{

return

async

function

(args)

{

let

originalResult;

//

^^^^^^^^^^^^^^^^^^^

const

promise

=

new

Promise((resolve,

reject)

=>

{

originalResult

=

fn({

//

^^^^^^^^^^^^^^

...(args

||

{}),

success:

res

=>

resolve(res),

fail:

err

=>

reject(err)

});

});

promise.originalResult

=

originalResult;

//

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

return

promise;

};

}我們需要在newPromise()之后對promise.originalResult賦值，而這個“值”產(chǎn)生于newPromise()的過程中，那么再加個局部變量originalResult把它帶出來就好。搞定！5.搞笑卻又應(yīng)該嚴(yán)肅對待的事情本來應(yīng)該結(jié)束了，但我猜一定會有人這么干（因?yàn)槲以谄渌麍鼍跋乱娺^）：注意：下面這個是錯誤示例！function

wxPromisify(fn)

{

return

async

function

(args)

{

let

promise

=

new

Promise();

//

^^^^^^^^^^^^^^^^^^^^^^^^^^^^

promise

=

new

Promise((resolve,

reject)

=>

{

//

^^^^^^^^^^

promise.originalResult

=

fn({

...

});

//

^^^^^^^^^^^^^^^^^^^^^^

});

return

promise;

};

}這樣做不會產(chǎn)生前面提到的TypeError，但是外面拿到的Promise對象卻并不攜帶originalResult。具體原因跟上面失敗的那次嘗試一樣，所以不再詳述，只提醒一下：這里產(chǎn)生了兩個Promise對象。6.再啰嗦一下這次帶出原返回值是以wx.request()為例，其返回值的主要用途是提供.abort()方法