How to ensure that function passed as prop to Vue component is async?

Question

Is it possible to check if a prop Function is async or not?

For example, here is a prop in my component:

      callbackFunction: {
        type: Function,
        default: null,
      },

How can I validate this and make sure that the passed in Function is declared as async?

score 2 · Answer 1 · answered Nov 12 '22 at 17:53

2

Yes, you can do with props "validator"

     callbackFunction: {
        type: Function,
        validator(value) {
          if (value?.constructor?.name === 'AsyncFunction') {
             return true;
          } else {
            console.error('Function should be async');
            return false;
          }
        },
        default() {},
      },

Here's the example.

Note: This does not break anything, If a requirement is not met, Vue will warn you in the browser's JavaScript console.

answered Nov 12 '22 at 17:53

Naren

4,152
3
17
28

More of a JS hack than a Vue thing. But clever nonetheless! – kissu Nov 12 '22 at 18:00
Haha, yes, anything possible with JS ;-) – Naren Nov 12 '22 at 18:13
It won't work with transpiled functions – Estus Flask Nov 12 '22 at 18:45
wdym, what "transpiled functions"? – Naren Nov 12 '22 at 18:49
`async/await` wasn't there from the beginning. So if OP is using ES5 for example, that one would not be available. – kissu Nov 12 '22 at 19:04
No, I meant where it mentioned in the question – Naren Nov 12 '22 at 19:24
It's not written in the question, but a possibility if OP transpiles to older browsers. – kissu Nov 12 '22 at 19:25
hmm... who's using OLDER Browsers with vue anyway... JK – Naren Nov 12 '22 at 19:32
@Naren It's up to a developer how transpilation is configured and what are the reasons for this. Vue 2 supports older browsers. When Babel target is lower than ES2017, `async` function is outputted as regular function that returns a promise. They are totally equivalent in JS and there's no reliable way and no need to distinguish them in normal work. – Estus Flask Nov 13 '22 at 08:40

score 2 · Accepted Answer · answered Nov 12 '22 at 18:45

There's no reliable way and no reason to do this. It could be regular function that returns a promise with exactly the same result, and it would be impossible to detect if it's asynchronous without calling it.

There may be no reason to restrict a callback to be asynchronous. A safe way that works with any kind of result is:

if (this.callbackFunction) 
  await this.callbackFunction()

score 1 · Answer 3 · answered Nov 12 '22 at 17:27

Props cannot be async, they can only be sync. So no, no such validation is possible.

Here is a detailed page on all the types available: https://vuejs.org/api/options-state.html#props

Btw, passing functions is an anti-pattern in Vue (it's not React).
That blog post could give you more insight as of how to achieve something clean in Vue.

How to ensure that function passed as prop to Vue component is async?

3 Answers3