如何在Promise构造函数回调的作用域之外访问Promise解析回调？

Question

通常，a承诺构造和使用如下：

新承诺（（解决，拒绝）=>{const obj=新的MyEventEmitter（）；obj.onsuccess=（event）=>{resolve（event.result）；}；obj.onerror=（event）=>{拒绝（event.error）；}；});

但最近，为了灵活性，我一直在这样做，将解析器置于执行器回调之外：

让外部解决；让外部拒绝；new Promise（（解决，拒绝）=>{outside解析=解析；outsideReject=拒绝；});

之后：

onClick=函数（）{outsideResolve（）；}

这很好，但有更简单的方法吗？如果不是，这是一个好做法吗？

Answer 1

简单：

var promiseResolve，promiseReject；var promise=新promise（函数（resolve，reject）{promiseResolve=解决；promiseReject=拒绝；});promiseResolve（）；

Answer 2

在这里参加聚会有点晚，但另一种方法是使用推迟对象。基本上，您有相同数量的样板文件，但如果您想传递它们并可能在它们的定义之外进行解析，这很方便。

天真的实施：

类延期{构造函数（）{this.promise=新承诺（（解决，拒绝）=>{this.reject=拒绝this.resolve=解决})}}函数asyncAction（）{var dfd=新的延迟（）setTimeout（（）=>{dfd.解析（42）}, 500)返回dfd.承诺}asyncAction（）.then（结果=>{console.log（结果）//42})

ES5版本：

函数Deferred（）{var self=这个；this.promise=新承诺（功能（解决、拒绝）{self.reject=拒绝self.resolve=解决})}函数asyncAction（）{var dfd=新的延迟（）setTimeout（函数（）{dfd.解析（42）}, 500)返回dfd.承诺}asyncAction（）.then（函数（结果）{console.log（结果）//42})

Answer 3

从ECMAScript 2024起–是的，使用承诺。withResolvers（）.

对于早期版本，没有其他方法可以做到这一点，但我可以说，这个用例并不常见。正如Felix在评论中所说，你所做的将始终如一。

值得一提的是，promise构造函数这样做的原因是通过安全性——如果在promise构造器中运行代码时发生了您没有预料到的异常，它将变成拒绝，这种抛出安全性&将抛出的错误转换为拒绝非常重要，有助于维护可预测的代码。

出于这个安全考虑，执行者回调被选择为优先于延迟（这是一种允许您所做事情的替代承诺构建方式）——至于最佳实践，我会传递元素并使用承诺构造函数：

const p=新承诺（（解决，拒绝）=>{this.onclick=解决；});

因此，无论何时可以在导出函数时使用promise构造函数——我建议你使用它。只要你能避免这两种情况，就避免这两个和chain。

Answer 4

我喜欢@JonJaques的答案，但我想更进一步。

如果你绑定然后和抓住然后推迟对象，然后它完全实现承诺API，您可以将其视为承诺等待等等。

⚠️ 编者注：我不再推荐这种模式，因为在写作时，承诺.原型.最终还不是一件事，然后就变成了一件事……这可能会发生在其他方法上，所以我建议您使用决定和拒绝改为函数：

函数createDeferredPromise（）{让我们解决让拒绝const promise=新promise（（thisResolve，thisReject）=>{resolve=此解决拒绝=thisReject})return Object.assign（promise，{resolve，reject}）}

去投票支持别人的答案。

类DeferredPromise{构造函数（）{这个_诺言=新诺言（（解决，拒绝）=>{//将解析和拒绝函数分配给“this”`//使它们在类实例上可用this.resolve=解决；this.reject=拒绝；});//绑定`then`和`catch`以实现与Promise相同的接口this.then=这个_承诺。然后。绑定（this.promise）；this.catch=这个_promise.catch.bind（this.promise）；this.finally=这个_promise.finally.bind（this.promise）；this[Symbol.toStringTag]=“承诺”；}}const deferred=新的DeferredPromise（）；console.log（'等待2秒…'）；setTimeout（（）=>{延迟。解决（“哇！”）；}, 2000);异步函数someAsyncFunction（）{const值=等待延迟；console.log（值）；}someAsyncFunction（）；

Answer 5

我在2015年为我的框架想出了一个解决方案。我把这种承诺称为任务

函数createPromise（处理程序）{var解析，拒绝；var promise=新promise（函数（_resolve，_reject）{解决=重新解决；拒绝=拒绝；if（处理程序）处理程序（解析、拒绝）；})promise.resolve=解决；promise.reject=拒绝；回报承诺；}//创建var promise=创建承诺（）promise.then（函数（数据）{alert（数据）}）//从外部解决承诺.解决（200）

Answer 6

公认的答案是错误的。使用范围和引用很容易，尽管它可能会产生Promise纯粹主义者愤怒：

常数createPromise=（）=>{let解析器；返回[新承诺（（解决，拒绝）=>{resolver=解析；}),分解器，];};const[promise，resolver]=createPromise（）；promise.then（value=>console.log（value））；setTimeout（（）=>解析器（'foo'），1000）；

我们本质上是在创建承诺时获取对resolve函数的引用，并返回该引用，以便可以在外部设置它。

控制台将在一秒钟内输出：

>foo公司

Answer 7

以防有人来寻找简化此任务的util的TypeScript版本：

导出常量递延=<T>（）=>{让我们解决！：（值：T|PromiseLike<T>）=>无效；让我们拒绝！：（原因？：未知）=>无效；const promise=新promise<T>（（res，rej）=>{解析=res；拒绝=拒绝；});返回{解决、拒绝、承诺}；};

可以这样使用：

const{promise，resolve}=deferred<string>（）；promise.then（（值）=>console.log（值））；//没有什么解析（'foo'）；//console.log:foo

Answer 8

helper方法可以减轻这种额外的开销，并给您同样的jQuery感觉。

函数Deferred（）{让决心；让拒绝；const promise=新promise（（res，rej）=>{解析=res；拒绝=拒绝；});返回{承诺，解决，拒绝}；}

用法是

const{promise，resolve，reject}=延迟（）；显示确认对话框({确认：解决，取消：拒绝});回报承诺；

这与jQuery类似

常数dfd=$。延期（）；显示确认对话框({确认：dfd.解决，取消：dfd.拒绝});return dfd.promise（）；

---

尽管在用例中，这种简单的本机语法很好

return new Promise（（resolve，reject）=>{显示确认对话框({确认：解决，取消：拒绝});});

Answer 9

我使用一个helper函数来创建我称之为“简单承诺”的内容-

函数flatPromise（）{让决心，拒绝；const promise=新的promise（（res，rej）=>{解析=res；拒绝=拒绝；});返回{承诺、解决、拒绝}；}

我就是这样用的-

函数doSomethingAsync（）{//得到你的承诺和回电const{resolve，reject，promise}=flatPromise（）；//做一些令人惊奇的事情。。。setTimeout（（）=>{解决（“one！”）；}, 500);//把你的承诺传递给世界回报承诺；}

参见完整的工作示例-

函数flatPromise（）{让决心，拒绝；const promise=新promise（（res，rej）=>{解析=res；拒绝=拒绝；});返回{承诺、解决、拒绝}；}函数doSomethingAsync（）{//得到你的承诺和回电const{resolve，reject，promise}=flatPromise（）；//做一些令人惊奇的事情。。。setTimeout（（）=>{下定决心（“下定决心！”）；}, 500);//把你的承诺传递给世界回报承诺；}（异步函数run（）{const result=等待doSomethingAsync（）.catch（err=>console.error（'rejected with'，err））；console.log（结果）；})();

编辑：我创建了一个名为扁平防护代码也可用在GitHub上.

Answer 10

你可以在课堂上把诺言包装起来。

类延期{构造函数（处理程序）{this.promise=新承诺（（解决，拒绝）=>{this.reject=拒绝；this.resolve=解决；处理程序（解析、拒绝）；});this.promise.resolve=本解决方案；this.promise.reject=此.reject；返回this.promise；}承诺；解决；拒绝；}//如何使用。const promise=new Deferred（（解析，拒绝）=>{//像正常的承诺一样使用。});promise.resolve（）；//从任何上下文进行解析。

Answer 11

在某些情况下，我发现自己也错过了延迟模式。您始终可以在ES6承诺的基础上创建一个：

导出默认类递延<T>{私有解析：（值：T）=>void=（）=>{}；私有对象：（值：T）=>void=（）=>{}；private _promise:承诺<T>=新承诺<T>（（解决，拒绝）=>{这个_拒绝=拒绝；这个_resolve=解决；})public get promise（）：承诺{返回这个_承诺；}公共解析（值：T）{这个_解析（值）；}公共拒绝（值：T）{这个_拒绝（价值）；}}

Answer 12

这里的许多答案与中的最后一个示例类似这篇文章.我缓存了多个Promiseresolve（）和拒绝（）函数可以分配给任何变量或属性。因此，我能够使此代码稍微紧凑：

函数defer（obj）{obj.promise=新承诺（（resolve，reject）=>{obj.resolve=解决；obj.reject=拒绝；});}

下面是使用此版本的延迟（）将字体字体使用另一个异步进程加载Promise：

DOMContentLoaded（evt）上的函数{让所有=[]；//一系列承诺全局={}；//其他地方使用的全局对象推迟（glob）；all.push（全球承诺）；//使用callback=resolveGlob（）启动异步进程const myFont=新FontFace（“myFont”，“url（myFont.woff2）”）；document.fonts.add（myFont）；myFont.load（）；all.push[myFont]；Promise.all（all）.then（（）=>{runIt（）；}，（v）=>{alert（v）；}）；}//...函数resolveGlob（）{glob.resolve（）；}函数runIt（）｛｝//在所有promise解析后运行

更新：如果要封装对象，有两个备选方案：

函数defer（obj={}）{obj.promise=新承诺（（resolve，reject）=>{obj.resolve=解决；obj.reject=拒绝；});返回对象；}let deferred=defer（）；

和

类延期{构造函数（）{this.promise=新承诺（（解决，拒绝）=>{this.resolve=解决；this.reject=拒绝；});}}let deferred=新的deferred（）；

Answer 13

在不久的将来，我们将能够使用本机承诺。withResolvers（），现在位于第4阶段和已在基于Blink/WebKit的浏览器中实现在撰写本文时。

同时，我使用了一个具有相同签名的实用函数：

导出默认函数usePromise（）{常量noop=（）=>{}；let localResolve:（value:T|PromiseLike<T>）=>void=noop；let-localReject:（原因？：未知）=>void=noop；const promise=新promise（解决，拒绝）=>{localResolve=解析；localReject=拒绝；});返回{承诺，解析：localResolve，拒绝：localReject，};}//用法const{promise，resolve，reject}=usePromise（）；//示例const triggerEl=document.querySelector（'.trigger'）；const someEl=document.querySelector（'.dummy-element'）；const{promise，resolve}=usePromise（）；someEl.addEventListener（'transitionend'，（）=>{resolve（）；});triggerEl.addEventListener（'click'，async（）=>{someEl.classList.add（'fadeout'）；等待承诺；//在移除元件之前，等待过渡结束someEl.remove（）；});

值得一提的是，这也是一个有效的Vue3可组合。

Answer 14

我们的解决方案是使用闭包来存储解析/拒绝函数，并附加一个函数来扩展promise本身。

以下是模式：

函数getPromise（）{变量_resolve，_reject；var promise=新promise（（resolve，reject）=>{_拒绝=拒绝；_resolve=解决；});promise.resolve_ex=（值）=>{_解析（值）；};promise.reject_ex=（值）=>{_拒绝（价值）；};回报承诺；}

使用它：

var promise=getPromise（）；承诺。然后（值=>{console.info（“承诺已经实现：”+值）；});promise.resolve_ex（“你好”）；//或拒绝的版本//promise.reject_ex（“再见”）；

Answer 15

类版本，在Typescript中：

导出类递延<T>{公开只读承诺：承诺私有resolveFn！：（值：T|PromiseLike<T>）=>无效私人拒绝Fn！：（原因？：任何）=>无效公共构造函数（）{this.promise=新承诺{this.resolveFn=解决this.rejectFn=拒绝})}公众拒绝（原因？：任何）：无效{this.rejectFn（理由）}公共解析（param:T）：void{this.resolveFn（参数）}}

Answer 16

是的，你可以。通过使用自定义事件浏览器环境的API。并在node.js环境中使用事件发射器项目。由于问题中的代码片段是针对浏览器环境的，因此这里有一个相同的工作示例。

函数myPromiseReturningFunction（）{return new Promise（解决=>{window.addEventListener（“myCustomEvent”，（event）=>{解决（event.detail）；}) })}myPromiseReturningFunction（）。然后（结果=>{警报（结果）})document.getElementById（“p”）.addEventListener（“点击”，（）=>{window.dispatchEvent（新的CustomEvent（“myCustom事件”，{detail:“它可以工作！”}）})

单击我</p>

我希望这个答案有用！

Answer 17

我发现这个问题最简洁的解决方案是[承诺。withResolvers（）].1

const{promise，resolve，reject}=promise.withResolvers（）；

该函数返回允许从执行器函数外部调用的对象。

Answer 18

我为此写了一个小库。https://www.npmjs.com/package网站/@信息3rno/promise.exposed

我使用了别人写的工厂方法，但我覆盖了然后,抓住,最后方法也一样，因此您也可以通过这些方法来解决最初的承诺。

无外部执行人解决承诺：

const promise=promise.exposed（）.then（console.log）；promise.resolve（“这应该显示在控制台中。”）；

从外部与执行者的setTimeout竞争：

const promise=promise.exposed（函数（resolve，reject）{setTimeout（函数（）{决心（“我几乎睡着了。”）}, 100000);}).then（console.log）；setTimeout（函数（）{诺言。决心（“我不想等那么久。”）；}, 100);

如果您不想污染全局命名空间，则存在无冲突模式：

const createExposedPromise=require（“@inf3rno/promise.exposed/noConflict”）；const promise=createExposedPromise（）.then（console.log）；promise.resolve（“这应该显示在控制台中。”）；

Answer 19

我建了一个图书馆叫手动承诺它可以替代承诺。这里的其他答案都不能替代承诺，因为它们使用代理或包装器。

纱线添加手工承诺

npn安装手册承诺

从“manual-promise”导入{manual-promise}；const prom=新的ManualPromise（）；prom.解决（2）；//行动仍然可以在承诺范围内进行const prom2=新的ManualPromise（（解析，拒绝）=>{// ... 代码});新的ManualPromise（）Promise实例===true

https://github.com/zpxp/manual-promise#自述文件

Answer 20

只是解决外部承诺的另一个解决方案

类锁定{#锁定；//承诺得到解决（发布时）释放；//释放锁id；//锁的Id构造函数（id）{this.id=id这个#lock=新承诺（（解决）=>{this.release=（）=>{if（解决）{resolve（）}其他{承诺.resolve（）}}})}get（）{return this.#lock}}

用法

let lock=新锁（…some id…）；...lock.get（）.then（）=>｛console.log（'已解决/已释放'）｝）lock.release（）//排除“已解析/已释放”

Answer 21

我想分享一些不同的东西，这是这个主题的延伸。

有时，您希望在解析时在同一地址（属性或变量）自动重新创建“任务承诺”。可以创建一个外部解析器来实现这一点。

使用外部解析器的重复承诺示例。每当调用解析器时，都会在相同的地址/变量/属性上创建一个新的承诺。

让resolvePromise；让承诺实现；const setPromise=（解析）=>{resolvePromise=（）=>{resolve（）；thePromise=新的Promise（setPromise）；}}thePromise=新的Promise（setPromise）；（异步（）=>{设i=0；while（真）{让消息=（i%2===0）？'勾选：“Tock”；document.body.innerHTML=消息；setTimeout（resolvePromise，1000）；等待承诺；i++；}})();

https://jsfiddle.net/h3zvw5xr

Answer 22

如果（像我一样）你不喜欢增加本机实例，也不喜欢笨拙“.承诺”属性。。。但是，如果你喜欢代理和修改类，那么这一个是为你准备的：

类GroovyPromise{构造函数（）{return new Proxy（new Promise（（resolve，reject）=>{this.resolve=解决；this.reject=拒绝；}), {获取：（target，prop）=>this[prop]|target[prop].bind（target），});}}

这样使用：

const groovypromise=新groovypromise（）；setTimeout（（）=>groovypromise.resolve（'groovy'），1000）；console.log（等待groovypromise）；

当然，您也可以将类重命名为类似这样的枯燥内容“延期”