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')
})

Answer 1

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')
})