React Native 将异步 function 导出为组件

Question

I am trying to export this function axiosWithToken into my component so that when I call 'axiosWithToken' it will return the axios.create object so i can build the rest of my axios request off of it. However, it does not work as expected but doesn't give any errors. If I gut out this file and put it inside the component it works. Below is my component file I minimized it for readability. This has also happened to me with other asynchronous functions so I'm curious what I am doing wrong.

import axiosWithToken from './axiosWithToken'
const response = axiosWithToken.get(....)

This is the axiosWithToken file

import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState } from 'react';

const axiosWithToken = async () => {
  const [token, setToken] = useState('');
  try {
    const value = await AsyncStorage.getItem('@token');
    setToken(value);
    console.log(token);
  } catch (e) {
    // error reading value
    console.log('error getting value');
  }

  return axios.create({
    baseURL: 'http://10.0.2.2:3000',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
  });
};

export default axiosWithToken;

Answer 1

You're trying to get a value from an async function without await?

const response = axiosWithToken.get(....)
                ^
              await