Async / Await in simple JS file

Question

My problem is the idea of writing async / await in a simple JS file.

I want to implement react-native-languages in my app, as the example shows, so I have to create a i18n file in which I set the configuration, which is working as expected. One problem is I want to provide the ability for the user to change the language and when they do I want to store the selected language in my localStorage, so typically I have to check in the i18n file for the localStorage if there is a language or not but as we all know the localStorage is async so how may I do that?

Here is my i18n file

import React from 'react';
import { AsyncStorage } from 'react-native';
import RNLanguages from 'react-native-languages';
import i18n from 'i18n-js';

import en from '@languages/en.json';
import ar from '@languages/ar.json';

let default_language = async () => {
  return await AsyncStorage.getItem('language');
}

// the above approach is not working

i18n.locale = RNLanguages.language;
i18n.fallbacks = true;
i18n.translations = { ar, en }

export default i18n;

How can make the code wait for the fetch in the local storage before executing anything else ?

Answer 1

Asynchronous functions are asynchronous.

You cannot make an asynchronous function run synchronously.

You can create the illusion of running an asynchronous function run synchronously by using the await keyword inside a function which is marked with the async keyword.

You can only await a value that is a Promise. (I have no idea if AsyncStorage.getItem('language') returns a Promise or not).

To make this work, the async function will always return a Promise .

So:

 let default_language = async () => { return await AsyncStorage.getItem('language'); }

Creates a function, which is assigned to default_language .

That function will return a promise. That promise will resolve to the value you are returning. Since that needs to be a Promise, that value will be a Promise. If you resolve a promise with another promise, it adopts the new promise.

This means your code is functionally the same as:

let default_language = () => AsyncStorage.getItem('language');

Wrapping the extra function around it is more-or-less pointless. It just makes a slightly shorter name to call later on.

It is only useful to use async / await if you are going to do something with the value inside the async function:

let default_language = async () => {
  const lang = await AsyncStorage.getItem('language');
  console.log(lang);
  something_useful(lang);
  return lang;
}

Answer 2

You would like to use defaultLanguage when it resolved. The await expression causes async function execution to pause until a promise is resolved. When you call setLanguage function, it will wait until defaultLanguage resolved or rejected. Rather than to use async , you can first look at how to use a callback function. I believe it more useful to understand how async works.

let setLanguage = async () => {
   // you may add get keyword to function name
   let defaultLanguage = await default_language();
   // check defaultLanguage and set if necessary
}