Create Axios instance with taking token from AsyncStorage

Question

In my React Native App, I want to create an Axios instance to send headers to the backend with a token taken from AsyncStorage. However, the following Token() always returns an object( Promise ) instead of actual token so that 'Authorization' header is something like [Object object].

    import axios from 'react-native-axios'
    import AsyncStorage from "@react-native-community/async-storage"
    
    const Token = async () => {
        try {
          await AsyncStorage.getItem("token").then(
            token => token
          );
        } catch (error) {
          return null;
        }
      }
    
    export default axios.create({
          baseURL: 'http://192.168.1.100:8080/api',
          headers: {
            'Authorization': 'Bearer '+ Token(),
            'Content-Type': 'application/json'
          }
    }) 

How can I take the actual token and use it in axios instance?

Answer 1

Below is how I managed to solve the problem.

As @Prithwee said, I decided to use axios( not react-native-axios) interceptors and set it up in App.js as follows.

    import React, {Component} from 'react';
    import DrawerNavigator from './Utils/DrawerNavigator'
    import {
      createAppContainer
    } from 'react-navigation';
    import axios from 'axios'
    import AsyncStorage from "@react-native-community/async-storage"
    
    axios.defaults.baseURL='http://192.168.1.100:8080/api'
    
    axios.interceptors.request.use(
      async config => {
        const token = await AsyncStorage.getItem('token')
        if (token) {
          config.headers.Authorization = "Bearer "+token
        }
        return config
      },
      error => {
        return Promise.reject(error)
      }
    );
    
    const App = createAppContainer(DrawerNavigator);
    
    export default App;