Capacitor async/await Android not working

Hi, on Android devices, using async await is not working for me. Am I the only one?
For example, getting a value from Capacitor’s Storage plugin is resolved with async await in the browser but not on Android

Usage example:

I have a storage.service.ts with the following:

export async function getStorage(key: string): Promise<any> {
  const item = await Storage.get({ key: key });
  if (!item.value || item.value !== 'undefined') {
    return Promise.resolve(JSON.parse(item.value));
  } else {
    Promise.resolve({});
  }
}

And then on my page, for example:

  async ngOnInit() {
    const token = await getStorage('token');
    console.log('token', token);
  }

and in the “run console” on android studio I get

I/Capacitor/Console: File: http://192.168.1.4:8100/pages-login-login-module.js - Line 134 - Msg: token [object Object]



behavior on iOS:
[log] - token {“token”:“abcd”,“fetchedAt”:“2020-04-12T20:01:35.721Z”}


behaviour on ionic serve
token {token: “abcd”, fetchedAt: “2020-04-12T19:03:29.765Z”}


wrong behavior on Android
Msg: token [object Object]if I do a {{webToken | json }} on the view, I get the _isScalar, blabla object

my capacitor version
:pill: Capacitor Doctor :pill:
Latest Dependencies:
@capacitor/cli: 2.0.1
@capacitor/core: 2.0.1
@capacitor/android: 2.0.1
@capacitor/ios: 2.0.1

You’re Idea should show you an Error. getStorage must return a Promise, like you correctly declared but you are not returning one. The simpelst Solution is replace
JSON.parse( item . value )
with
Promise.resolve(JSON.parse( item . value ));.

But make sure you return something anyway, as your current return is in an if, otherwise the other code will hang on the await for ever.

The problem still persists in Android devices. But yes, you are correct, updated my question

Okay next: Try debug your Android Device via Chrome Device Inspector, as you can see the [object Object] correctly there.

The Fact that it logs out token: blabla shows that the error may appear somewhere else.

How are you accessing the Storage plugin? See here - make sure it’s:

import { Plugins } from '@capacitor/core';

const { Storage } = Plugins;
const item = await Storage.get()....

If you import the plugin directly, you’ll get the web implementation only.

1 Like

Hi @netkow, yes, I’m already doing it as mentioned in the docs

import { Plugins } from '@capacitor/core';

const { Storage } = Plugins;

export async function setStorage(key: string, value: any): Promise<void> {
  await Storage.set({
    key: key,
    value: JSON.stringify(value),
  });
}

export async function getStorage(key: string): Promise<any> {
  const item = await Storage.get({ key: key });
  if (!item.value || item.value !== 'undefined') {
    return Promise.resolve(JSON.parse(item.value));
  } else {
    Promise.resolve({});
  }
}

export async function removeStorage(key: string): Promise<void> {
  await Storage.remove({
    key: key,
  });
}

I’ve tried to refactor just to be sure but same behaviour. Promise is resolved on iOS and Web but not Android

  async ngOnInit() {
    const { Storage } = Plugins;
    const token = await Storage.get({ key: 'token' });
    console.log('_token', JSON.parse(token.value).token);
    this.webToken = JSON.parse(token.value).token;
  }

Hi, sorry, I was indeed returning an observable where I was testing this. Strange that it worked anyway in the other platforms. My bad. Thanks for the support

1 Like