vue-promised

vue-promised copied to clipboard

What problem is this solving

Currently there is no way without using a watcher to invoke a function upon promise resolution or rejection. In the app I'm working on we use notifications when something goes wrong. I can't invoke the notification service from the template.

Proposed solution

Emit @resolved and @rejected events from the promised component when the promise is resolved or rejected.

Example Usage

<promised :promise="makeApiCall()" @rejected="hdlRejected">
   <!-- Some UI Code here -->
</promised

I think this could be very useful for observability and better error handling (such as tentatively recovering from errors)

Your solution looks good, and I believe it would be the best solution in most cases.

As a workaround, would getting the Promise in the script and using it directly work? This doesn't require watchers.

E.g. for the case you outlined above:

const apiCallPromise = ref(makeApiCall())

apiCallPromise.value.catch(
  (reason) => hdlRejected(reason)
)

<promised :promise="apiCallPromise">
   <!-- Some UI Code here -->
</promised

This is exactly my use-case.

The workaround proposed by @darrylnoakes is on point (thanks), but the proposed API is obviously more elegant and clean.