Resolve Javascript Promise outside function scope

Question

I have been using ES6 Promise   Ordinarily  a Promise is constructed and used like this  new Promise function resolve  reject       if  someCondition           resolve          else           reject                 But I have been doing something like below to take the resolve outside for the sake of flexibility   var outsideResolve  var outsideReject  new Promise function resolve  reject         outsideResolve   resolve       outsideReject   reject         And later  onClick   function        outsideResolve        This works fine  but is there an easier way to do this  If not  is this a good practice

User · Answer

I made a library called manual-promise that functions as a drop in replacement for Promise  None of the other answers here will work as drop in replacements for Promise  as they use proxies or wrappers   yarn add manual-promise  npn install manual-promise   import   ManualPromise   from  manual-promise    const prom   new ManualPromise     prom resolve 2       actions can still be run inside the promise const prom2   new ManualPromise  resolve  reject    gt               code       new ManualPromise   instanceof Promise     true    https   github com zpxp manual-promise readme

User · Answer

No  there is no other way to do this - the only thing I can say is that this use case isn t very common  Like Felix said in the comment - what you do will consistently work   It s worth mentioning that the reason the promise constructor behaves this way is throw safety - if an exception you did not anticipate happens while your code is running inside the promise constructor it will turn into a rejection  this form of throw safety - converting thrown errors to rejections is important and helps maintain predictable code   For this throw safety reason  the promise constructor was chosen over deferreds  which are an alternative promise construction way that do allow what you re doing  - as for best practices - I d pass the element and use the promise constructor instead   var p   new Promise function resolve  reject       this onclick   resolve    bind this      For this reason - whenever you can use the promise constructor over exporting the functions - I recommend you do use it  Whenever you can avoid both - avoid both and chain   Note  that you should never use the promise constructor for things like if condition   the first example could be written as   var p   Promise  someCondition   resolve   reject

User · Answer

I m using a helper function to create what I call a  flat promise  -  function flatPromise          let resolve  reject       const promise   new Promise  res  rej    gt          resolve   res        reject   rej               return   promise  resolve  reject        And I m using it like so -  function doSomethingAsync             Get your promise and callbacks     const   resolve  reject  promise     flatPromise            Do something amazing        setTimeout      gt            resolve  done            500           Pass your promise to the world     return promise       See full working example -   x000D   x000D  function flatPromise     x000D   x000D      let resolve  reject  x000D   x000D      const promise   new Promise  res  rej    gt    x000D          resolve   res  x000D          reject   rej  x000D          x000D   x000D      return   promise  resolve  reject    x000D    x000D   x000D  function doSomethingAsync     x000D       x000D         Get your promise and callbacks x000D      const   resolve  reject  promise     flatPromise    x000D   x000D         Do something amazing    x000D      setTimeout      gt    x000D          resolve  done     x000D         500   x000D   x000D         Pass your promise to the world x000D      return promise  x000D    x000D   x000D   async function run     x000D   x000D      const result   await doSomethingAsync   x000D           catch err   gt  console error  rejected with   err    x000D      console log result   x000D   x000D        x000D   x000D   x000D    Edit  I have created an NPM package called flat-promise and the code is also available on GitHub

User · Answer

Many of the answers here are similar to the last example in this article  I am caching multiple Promises  and the resolve   and reject   functions can be assigned to any variable or property  As a result I am able to make this code slightly more compact   function defer obj        obj promise   new Promise  resolve  reject    gt            obj resolve   resolve          obj reject    reject              Here is a simplified example of using this version of defer   to combine a FontFace load Promise with another async process   function onDOMContentLoaded evt        let all          array of Promises     glob             global object used elsewhere     defer glob       all push glob promise          launch async process with callback   resolveGlob        const myFont   new FontFace  myFont    url myFont woff2         document fonts add myFont       myFont load        all push myFont       Promise all all  then      gt    runIt        v    gt    alert v               function resolveGlob         glob resolve      function runIt         runs after all promises resolved    Update  2 alternatives in case you want to encapsulate the object   function defer obj             obj promise   new Promise  resolve  reject    gt            obj resolve   resolve          obj reject    reject              return obj    let deferred   defer      and  class Deferred       constructor             this promise   new Promise  resolve  reject    gt                this resolve   resolve              this reject    reject                      let deferred   new Deferred

User · Answer

I liked  JonJaques answer but I wanted to take it a step further   If you bind then and catch then the Deferred object  then it fully implements the Promise API and you can treat it as promise and await it and such    x000D   x000D  class DeferredPromise   x000D    constructor     x000D      this  promise   new Promise  resolve  reject    gt    x000D           assign the resolve and reject functions to  this  x000D           making them usable on the class instance x000D        this resolve   resolve  x000D        this reject   reject  x000D          x000D         bind  then  and  catch  to implement the same interface as Promise x000D      this then   this  promise then bind this  promise   x000D      this catch   this  promise catch bind this  promise   x000D      this Symbol toStringTag     Promise   x000D      x000D    x000D   x000D  const deferred   new DeferredPromise    x000D  console log  waiting 2 seconds       x000D  setTimeout      gt    x000D    deferred resolve  whoa     x000D     2000   x000D   x000D  async function someAsyncFunction     x000D    const value   await deferred  x000D    console log value   x000D    x000D   x000D  someAsyncFunction    x000D   x000D   x000D

User · Answer

As I didn t find what I was looking for  I will share what I actually wanted to achieve when I ended in this question  Scenario  I have 3 different API s with same possible response and therefore I would like to handle the completion and error handling of the promises in a single function  This is what I did   Create a handler function     private handleHttpPromise    promise  Promise lt any gt     gt        promise        then  response  any    gt               do something with the response         console log response                   catch  error    gt               do something with the error         console log error                    Send your promises to the created handler    switch  method        case  get           this handleHttpPromise apiService get url          break            case  post           if  jsonData            this handleHttpPromise apiService post url  jsonData                  break

User · Answer

Just another solution to resolve Promise from the outside   class Lock            lock      Promise to be resolved  on  release          release      Release lock         id      Id of lock         constructor id                this id   id             this  lock   new Promise  resolve    gt                    this release        gt                        if  resolve                            resolve                         else                           Promise resolve                                                                            get     return this  lock           Usage  let lock   new Lock     some id           lock get   then     gt  console log  resolved released     lock release       Excpected  resolved released

User · Answer

A solution I came up with in 2015 for my framework  I called this type of promises Task function createPromise handler     var resolve  reject     var promise   new Promise function  resolve   reject       resolve    resolve       reject    reject      if handler  handler resolve  reject             promise resolve   resolve    promise reject   reject    return promise         create var promise   createPromise   promise then function data   alert data         resolve from outside promise resolve 200

User · Answer

I wrote a small lib for this  https   www npmjs com package  inf3rno promise exposed  I used the factory method approach others wrote  but I overrode the then  catch  finally methods too  so you can resolve the original promise by those as well   Resolving Promise without executor from outside   const promise   Promise exposed   then console log   promise resolve  This should show up in the console       Racing with the executor s setTimeout from outside   const promise   Promise exposed function  resolve  reject       setTimeout function             resolve  I almost fell asleep           100000      then console log    setTimeout function         promise resolve  I don t want to wait that much        100     There is a no-conflict mode if you don t want to pollute the global namespace   const createExposedPromise   require   inf3rno promise exposed noConflict    const promise   createExposedPromise   then console log   promise resolve  This should show up in the console

User · Answer

How about creating a function to hijack the reject and return it    function createRejectablePromise handler      let  reject     const promise   new Promise  resolve  reject    gt         reject   reject       handler resolve  reject           promise reject    reject    return promise        Usage const   reject     createRejectablePromise  resolve    gt      setTimeout      gt        console log  resolved       resolve         2000        reject

User · Answer

Accepted answer is wrong  It s pretty easy using scope and references  though it may make Promise purists angry   const createPromise        gt        let resolver      return           new Promise  resolve  reject    gt                resolver   resolve                      resolver             const   promise  resolver     createPromise    promise then value   gt  console log value    setTimeout      gt  resolver  foo    1000      We are essentially grabbing the reference to the resolve function when the promise is created  and we return that so it can be set externally   In one second the console will output    gt  foo

User · Answer

first enable --allow-natives-syntax on browser or node  const p   new Promise function resolve  reject       if  someCondition           resolve          else           reject                onClick   function           ResolvePromise p  value

User · Answer

Yes  you can  By using the CustomEvent API for the browser environment  And using an event emitter project in node js environments  Since the snippet in the question is for the browser environment  here is a working example for the same    x000D   x000D  function myPromiseReturningFunction    x000D    return new Promise resolve   gt    x000D      window addEventListener  myCustomEvent    event    gt    x000D         resolve event detail   x000D          x000D       x000D    x000D   x000D   x000D  myPromiseReturningFunction   then result   gt    x000D     alert result  x000D     x000D   x000D  document getElementById  p   addEventListener  click        gt    x000D     window dispatchEvent new CustomEvent  myCustomEvent    detail    It works      x000D     x000D   lt p id  p  gt  Click me  lt  p gt  x000D   x000D   x000D    I hope this answer is useful

User · Answer

simple   var promiseResolve  promiseReject   var promise   new Promise function resolve  reject     promiseResolve   resolve    promiseReject   reject       promiseResolve

User · Answer

A helper method would alleviate this extra overhead  and give you the same jQuery feel   function Deferred         let resolve      let reject      const promise   new Promise  res  rej    gt            resolve   res          reject   rej              return   promise  resolve  reject        Usage would be  const   promise  resolve  reject     Deferred    displayConfirmationDialog       confirm  resolve      cancel  reject     return promise    Which is similar to jQuery  const dfd     Deferred    displayConfirmationDialog       confirm  dfd resolve      cancel  dfd reject     return dfd promise        Although  in a use case this simple  native syntax is fine  return new Promise  resolve  reject    gt        displayConfirmationDialog           confirm  resolve          cancel  reject

User · Answer

I ve put together a gist that does that job  https   gist github com thiagoh c24310b562d50a14f3e7602a82b4ef13  here s how you should use it   import ExternalizedPromiseCreator from     externalized-promise    describe  ExternalizedPromise        gt      let fn  jest Mock    let deferredFn  jest Mock    let neverCalledFn  jest Mock    beforeEach      gt        fn   jest fn        deferredFn   jest fn        neverCalledFn   jest fn             it  resolve should resolve the promise   done   gt        const externalizedPromise   ExternalizedPromiseCreator create      gt  fn          externalizedPromise        promise        then      gt  deferredFn           catch      gt  neverCalledFn           then      gt            expect deferredFn  toHaveBeenCalled            expect neverCalledFn  not toHaveBeenCalled            done                   expect fn  toHaveBeenCalled        expect neverCalledFn  not toHaveBeenCalled        expect deferredFn  not toHaveBeenCalled         externalizedPromise resolve

User · Answer

I would like to share something different  an extension to this topic  Sometimes you want a  quot task promise quot  to be automatically re-created at the same address  property or variable  when it resolves  It s possible to create an outside resolver that does just that  Example of a recurring promise with an external resolver  Whenever the resolver is called  a new promise is created at the same address variable property  let resolvePromise  let thePromise   const setPromise    resolve    gt      resolvePromise        gt        resolve        thePromise   new Promise setPromise            thePromise   new Promise setPromise     async      gt      let i   0    while  true        let msg    i   2     0     Tick     Tock       document body innerHTML   msg      setTimeout resolvePromise  1000       await thePromise      i               https   jsfiddle net h3zvw5xr

User · Answer

Our solution was to use closures to store the resolve reject functions and additionally attach a function to extend the promise itself    Here is the pattern   function getPromise          var  resolve   reject       var promise   new Promise  resolve  reject    gt             reject   reject           resolve   resolve               promise resolve ex    value    gt            resolve value               promise reject ex    value    gt            reject value               return promise      And using it   var promise   getPromise     promise then value   gt        console info  The promise has been fulfilled      value        promise resolve ex  hello         or the reject version    promise reject ex  goodbye

User · Answer

You can wrap the Promise in a class   class Deferred       constructor handler            this promise   new Promise  resolve  reject    gt                this reject   reject              this resolve   resolve              handler resolve  reject                        this promise resolve   this resolve          this promise reject   this reject           return this promise            promise      resolve      reject        How to use  const promise   new Deferred  resolve  reject    gt         Use like normal Promise       promise resolve       Resolve from any context

User · Answer

I find myself missing the Deferred pattern as well in certain cases  You can always create one on top of a ES6 Promise   export default class Deferred lt T gt        private  resolve   value  T    gt  void        gt          private  reject   value  T    gt  void        gt           private  promise  Promise lt T gt    new Promise lt T gt   resolve  reject    gt            this  reject   reject          this  resolve   resolve              public get promise    Promise lt T gt            return this  promise             public resolve value  T            this  resolve value              public reject value  T            this  reject value

User · Answer

Thanks to everyone who posted in this thread  I created a module that includes the Defer   object described earlier as well as a few other objects built upon it  They all leverage Promises and the neat Promise call-back syntax to implement communication event handling within a program   Defer  Promise that can be resolved failed remotely  outside of its body  Delay  Promise that is resolved automatically after a given time TimeOut  Promise that fails automatically after a given time  Cycle  Re-triggerable promise to manage events with the Promise syntax Queue  Execution queue based on Promise chaining   rp   require  quot openpromise quot   https   github com CABrouwers openpromise https   www npmjs com package openpromise

User · Answer

Bit late to the party here  but another way to do it would be to use a Deferred object  You essentially have the same amount of boilerplate  but it s handy if you want to pass them around and possibly resolve outside of their definition   Naive Implementation   class Deferred     constructor         this promise   new Promise  resolve  reject   gt          this reject   reject       this resolve   resolve               function asyncAction       var dfd   new Deferred      setTimeout     gt        dfd resolve 42       500     return dfd promise    asyncAction   then result   gt      console log result     42      ES5 Version   function Deferred       var self   this    this promise   new Promise function resolve  reject        self reject   reject     self resolve   resolve         function asyncAction       var dfd   new Deferred      setTimeout function         dfd resolve 42       500     return dfd promise    asyncAction   then function result      console log result     42

[javascript] Resolve Javascript Promise outside function scope

Examples related to javascript

Examples related to promise

Examples related to es6-promise