I want to fetch object and use it on in class. It works well inside then statement, but after that it looks for it doesn't want to show up

Question

here is a part of my code, I tried to follow with console.logs what's going on. In async allLists() and on 4th line it returns right object. But after then block it doesn't console.logs anything. So that makes me think I did something wrong with syntax or something. the error is weird tho as for me cause I cant even understand what does it want from me(picture), pleas let me know if you see anything weird or that's something wrong with other part of a code. So I guess main question can I assign to class variable with the method like that? console.log error picture

import * as server from './listings';

export class listScroll
{
constructor(){
        this.dropLists = 5;
        this.allLists().then((lists) => {
            console.log(lists); // returns me a right object
            this.lists = lists;
        })
        console.log(this.lists); // doesn't return me anything
    }

    async allLists(){
        let res = await server.all();
        console.log(res); //returns me a right object
        return res;
    }

listings.js

export async function all() {
    let result = await makeRequest('http://sellbuyschool42.com/listings');
    return result;
}

export async function getLists(url, options)
{
    return makeRequest(url, options);
}

function makeRequest($url, options= {})
{
    return fetch($url, options).then((responce) => {
        if(responce.status != 200)
        {
            return responce.text().then((text) => {
                throw new Error(text);
            })
        }
        return responce.json();
    })
}