Function doesn't wait for async/await on addListener?

Question

Supposedly, the component needs to wait for notificationsMixin to finish before it changes the route, but it doesn't:

Mixin:

export const notificationsMixin = {
  methods: {
    async notificationsMixin () {
      this.$Plugins.PushNotifications.register()

      this.$Plugins.PushNotifications.addListener('registration', async (token) => {
        await this.API(token.value)
      })

      this.$Plugins.PushNotifications.addListener('registrationError', () => {
        //
      })
    },
    async API (token) {
      await this.$axios.post('https://api.fexler.com/?action=notifications', token).then(async (response) => {
        if (response.data) {
          await this.$Plugins.Storage.set({
            key: 'token',
            value: JSON.stringify(token)
          })
        }
      })
    }
  }
}

Component:

this.notificationsMixin().then(async () => {
  this.$router.push('/profile')
})

T. Short · Accepted Answer · 2020-01-02 14:45:34Z

2

This function resolves immediately.

async notificationsMixin () {
      this.$Plugins.PushNotifications.register()

      this.$Plugins.PushNotifications.addListener('registration', async (token) => {
        await this.API(token.value)
      })

      this.$Plugins.PushNotifications.addListener('registrationError', () => {
        //
      })
    },

Try adding await

async notificationsMixin () {
    try {
        await this.$Plugins.PushNotifications.register()

        const token = await this.$Plugins.PushNotifications.addListener('registration')

        await this.API(token.value)

        this.$Plugins.PushNotifications.addListener('registrationError', () => {
            //
        })
    }
    catch (e) {
        // handle error
    }
}

I'm not 100% familiar with this plugin you are using, so you may have to tweak the code a bit. But this should give you an idea of what to do.

As an extra tip, it's not great practice (IMO) to mix then with await. Pick one and stick with it.

And you don't need async here:

this.notificationsMixin().then(async () => {
  this.$router.push('/profile')
})

change to:

this.notificationsMixin().then(() => {
  this.$router.push('/profile')
})

answered Jan 2, 2020 at 14:45

T. Short

3,62417 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hristo Torbov Over a year ago

Thank you so much! I didn't know that I can make it const token = await this.$Plugins.PushNotifications.addListener('registration'). Now it works perfectly! :-)

Collectives™ on Stack Overflow

Function doesn't wait for async/await on addListener?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related