改进异步封装：使用返回值处理异步调用【k3】Border City In

前几篇文章是关于微信小程序开发的。 于是有人问我：“我不懂小程序，你能给我写点别的吗？”

其实，你不需要太关注“小程序”，因为它们只是文章中的开发场景。 我们实际解决的问题不仅仅在小程序内部，解决问题的手段也与小程序无关！

1.问题

代理封装微信小程序的异步调用时还存在一个问题：

像wx.request()这样本来就有返回值的情况怎么处理？ >如果请求在处理过程中需要取消，则使用wx.request()的返回值。

const requestTask = wx.request(...);if (...) { //由于某种原因必须取消这个请求 requestTask.abort();}

封装了 awx.request() 返回一个 Promise 对象，与 wx.request( ) 的原始返回值无关。 如果你希望能够取消请求，你需要检索wx.request()的原始返回值。 我应该怎么办？

function wxPromisify(fn) { return async function (args) { return new Promise((resolve,reject) => { constoriginalResult = fn({// ^^^^^^^^^^^^^^^ ^ ^^^^^^^^^^//// => 拒绝（错误例如，通过“容器”参数获取返回值，例如 return {promise,originalResult} 或 [promise,originalResult]; awx.request(params, outBox = {});马苏处理。 JS 是动态类型，这意味着你可以直接修改 Promise 对象并添加属性。 Promise.originalResult = ....

从用户的角度来看，大多数情况下不需要原始返回值。 目前，我们总是等待 awx.request()，而不是先分解然后等待（或 then()）。 因此，方法1不是一个选择。

第二种方法是可行的，如果不需要原来的返回值，可以直接使用。 不过如果想要原来的返回值就有点麻烦了。 首先，您需要创建一个容器对象并将其传递。

第三种方法应该以最“不带感情色彩”的方式使用。 无论如何，Promise 对象都会派生出它们的真正价值，因此无论您是否想使用它们，都可以随意使用它们。

接下来，让我们实现第三种方法来转换 wxPromisify()：

3. 失败的尝试

一开始非常简单。 以前我们所要做的就是返回 new Promise() ，但现在只需添加一个临时变量就足够了。

function wxPromisify(fn) { return async function (args) { const Promise = new Promise((resolve, Accept) => { // ^^^^^^^^^ ^^^^^^^ 承诺.originalResult = fn({//结果), 失败: ERR => 拒绝 (ERR)});}); 承诺返回。 // ^^^^^^^^^^^^^};}

然后我得到一个错误：

TypeError: Cannot set property 'originalResult' ofunknown

这个错误很容易易于理解、易于修改、易于创建。

本来我以为promise是一个可以直接访问的局部变量，所以在子作用域中使用它是没有问题的。 然而，这里忽略了这个子作用域位于构造函数内部的事实。 让我们做一些高层分析：

new Promise() 需要一个函数（我们称之为工厂）作为参数，但是这个工厂什么时候执行 new 注意，在 Promise() 创建一个 Promise 之后？实例，它不会主动调用该实例上的任何方法。 所以我们可以得出结论，工厂是在构建过程中执行的。 也就是说，此时 Promise 实例尚未创建，并且 Promise 正在引用 unfineed。

4.成功

现在我们明白了问题所在，我们继续分析。

工厂在Promise实例的构造过程中被调用，工厂直接执行函数体中的fn，并且fn的返回值是立即可用的，所以当Promise实例构造完成后，原来可以得到的返回值

接下来，让我们更改代码。

function wxPromisify(fn) { return async function (args) { letoriginalResult;// ^^^^^^^^^^^^^^^^^^ const Promise = new Promise((已解决，被拒绝) => { OriginalResult = Fn ({// ^^^^^^^^^^^^^^ ... (ARGS || {})，成功：Res => 解决 (res)，失败：Er => 拒绝 (拒绝 (拒绝错误））;^^^^^^原来的结果应该就这样发出来了！

但是有人会这样做（我在其他情况下见过）：

注意：以下是一个错误的例子！ function wxPromisify(fn) { return async function (args) { let Promise = new Promise();// ^^^^^^^^^^^^^^^^^^^^^^^^^^                                                 };}

这样做不会产生上面提到的 TypeError，但是外部获取到的 Promise 对象没有originalResult。具体原因和上面失败的尝试是一样的，所以我再解释一下，生成了两个 Promise 对象 > 这次我们以 wx.request() 为例。获取原始返回值。该返回值的主要目的实际上是提供一个 .abort() 方法来取消请求。您也可以参考 Axios 通过 cancelToken 实现的方法，这与 Axios 的处理方式类似。取消”。 cancelToken的本质就是上面的第二种方法，你传递一个“容器”对象来检索你想要的东西。 通过 Promise 对象检索它本质上与通过特殊的“容器”对象检索它相同，因此我们不会进一步解释。

推荐教程：《微信小程序》

PHP快速学习视频免费教程（从入门到精通）

如何学习PHP？我该如何开始使用 HP？我应该从哪里学习 PHP？如何才能快速学习 PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 微信小程序wx.request和Promise的结合
• 微信小程序的wx.request和Promise的结合(微信小程序的await promise用法)

本文由主机参考刊发，转载请注明：改进异步封装：使用返回值处理异步调用【k3】Border City In https://zhujicankao.com/123714.html