returning data from then() returns Promise<void> instead of Promise<data>

Question

I'm getting data from an API as follows:

export const getSymbolStats = async (symbol: string) => {
let requiredData: IRequiredSymbolStats;
let request: Promise<AxiosResponse> = axios.get(`${api.baseURL}${api.symbolStats}`, {params: {symbol}});

request.then((res: AxiosResponse<ISymbolStats>) => {
    const symbolStats: ISymbolStats = res.data;

    // Destructure symbol stats.
    const highPrice: string = symbolStats.highPrice;
    const lowPrice: string = symbolStats.lowPrice;
    const priceChangePercent: string = symbolStats.priceChangePercent;
    const volume: string = symbolStats.volume;
    const weightedAvgPrice: string = symbolStats.weightedAvgPrice;

    // return an object with the required data.

    requiredData = {
        symbol,
        highPrice,
        lowPrice,
        priceChangePercent,
        volume,
        weightedAvgPrice,
    };
    return requiredData;
})
}

and retrieving the data inside this function:

export const getStats = async (msg: Message, match: RegExpExecArray | null): Promise<void> => {
  const id = msg.chat.id;
  const symbol: OrUndefined<string> = validateSymbol(id, match);
  if (!symbol) return;

  // make API call to get stats for symbol.
  let data = await getSymbolStats(symbol);

};

The data in the second function shows void rather than the IRequiredSymbolStats type that I returned inside the then() block. Why is this?

Answer 1

1. If you declared your function as async there is no need to use then.
2. What you return from then is going nowhere because you don't store and don't return it from getSymbolStats

Just use await and store a result OR add return before request.then.

with await (more straight forward code, I'd prefer this way).

const res: AxiosResponse<ISymbolStats> = await axios.get<ISymbolStats>(`${api.baseURL}${api.symbolStats}`, {params: {symbol}});

const symbolStats: ISymbolStats = res.data;

// Destructure symbol stats.
const highPrice: string = symbolStats.highPrice;
const lowPrice: string = symbolStats.lowPrice;
const priceChangePercent: string = symbolStats.priceChangePercent;
const volume: string = symbolStats.volume;
const weightedAvgPrice: string = symbolStats.weightedAvgPrice;

// return an object with the required data.

requiredData = {
  symbol,
  highPrice,
  lowPrice,
  priceChangePercent,
  volume,
  weightedAvgPrice,
};
return requiredData;

adding return:

let request: Promise<AxiosResponse> = axios.get(`${api.baseURL}${api.symbolStats}`, {params: {symbol}});

return request.then((res: AxiosResponse<ISymbolStats>) => {
    const symbolStats: ISymbolStats = res.data;

    // Destructure symbol stats.
    const highPrice: string = symbolStats.highPrice;
    const lowPrice: string = symbolStats.lowPrice;
    const priceChangePercent: string = symbolStats.priceChangePercent;
    const volume: string = symbolStats.volume;
    const weightedAvgPrice: string = symbolStats.weightedAvgPrice;

    // return an object with the required data.

    requiredData = {
        symbol,
        highPrice,
        lowPrice,
        priceChangePercent,
        volume,
        weightedAvgPrice,
    };
    return requiredData;
})