Passing an array of promises

[posva]

Currently, it is possible to pass an array of promises as promises but I'm not sure the approach is flexible enough. Maybe it should be in another component that is more flexible, eg:

• An empty array displays right now as pending but it could be a specific slot
• then includes only resolved promises
  • Could there be a second slot with all (also pending) promises
  • get access to them with slot-scope="{ resolved, pending, all }"
  • Always return all and let the user filter
• A way to reset errors

I'm open to suggestions and usecases

[madmoizo]

maybe @success & @error events
the result of a promise can be more than just data display

[posva]

I thought about adding events to the single promise as well. Do you have any use case for single promises?

[madmoizo]

Hum, you can think about a sync function (update a vuex store or an indexeddb store) on success or when the error is not displayed by the component itself (add a toast to a list managed in a vuex store)

[botre]

"the result of a promise can be more than just data display"

In this case you probably shouldn't handle the promise logic in the template layer.

I gave events a try, sending the promise to be resolved to the template layer only to then send the result back to the script layer felt convoluted (at least the way I implemented it).

[posva]

I agree. When you want to display a toast instead of an error, you are probably doing a request in the js (eg: login in the navbar)

[Herteby]

What if it just used/behaved like Promise.all?
It's simple and familiar, and it preserves the order, letting you do things like this:

<promised :promises="[users, posts]">
  <div slot-scope="[users, posts]">
    Very useful!
  </div>
</promised>

If you wanted to wait for the promises individually, you could do:

<promised v-for="promise in promises" :promise="promise">
  <div slot-scope="result">
    ...
  </div>
</promised>

[posva]

@Herteby In that case you would just pass the promise returned by Promise.all to the usual promise prop 😄

[Herteby]

@posva True I suppose. Promise.all isn't available in the template scope though, and when you have a lot of <promised> in the same template, it's nice to be able to do it without having to add extra computed properties.

[posva]

Oh no, you need to use it in the computed property. I actually think it's a bad idea to have an extra layer of complexity for this because it hides away a very simple call regarding promises that a js developer could benefit when writing other code that deals with promises

[posva]

I'm dropping the array of promises as with the new combined slot it's easier to just loop over an array of promises to display multiple Promised components and on top of that the order is preserved