JavaScript Help with understanding how to use async, await and promises

[Exabyte]

I would like to ask for a little help with understanding the concept of promises and how async/await work. This is my second attempt at trying to understand and I have spent a lot of time Googling and reading but am still considerably confused. This time I need to understand because the functions related to the Origin Private File System (OPFS) feature that i am trying to use, make use of the 'await' keyword.

So far, I understand that promises are a way to request an action or result of a function in a way that does not otherwise block the execution of the application. The request happens "in the background" so to speak, and when the request has been completed, the promise is "fulfilled". The concept appears to be sound, but understanding its implementation is very confusing. I understand that a promise function (or whatever you call that nested messy construct) returns a promise object, and although I can expand the object and see my result in the console log, apparently there is no method by which one can get at the result? So of what use is that?

I have been told that async/await is "sugar candy" for promises to make them easier to use and indeed the syntax does seem to be cleaner. However, I am still vague as to what this is actually doing? As a practical example, I am trying to take the first step in OPFS of getting a reference to its root directory. In particular, I am trying to follow this:

The origin private file system | Articles | web.dev

As can be seen, the examples use the 'await' keyword, but none seem to mention 'async'. So trying to use the example as it stands in my function:

class TapeLibMgr {

    #OPFSroot;

    constructor(){
        this.#OPFSroot = "";
    }

    showTapeLibMgrLog(){
        this.#OPFSroot = await navigator.storage.getDirectory();
        console.log("OPFS: ", this.#OPFSroot);
    }

}

returns and error saying :

SyntaxError: await is only valid in async functions and the top level bodies of modules

So I changed it a bit and created a function with the 'async' keyword:

]class TapeLibMgr {

    #OPFSroot;

    constructor(){
        this.#OPFSroot = "";
        (async () => await this.init())();
    }

    async init() {
        this.#OPFSroot = await navigator.storage.getDirectory();      
    }

    showTapeLibMgrLog(){
        console.log("OPFS: ", this.#OPFSroot);
    }

}

So now when I call showTapeLibMgrLog() the result is and empty variable. Then, based on information I found on line here:

async-await in Javascript class

One of the projects that I am working on recently has to use async methods and also call it from...

dev.to

I added a line of code:

class TapeLibMgr {

    #OPFSroot;

    constructor(){
        this.#OPFSroot = "";
        (async () => await this.init())();
    }

    async init() {
        this.#OPFSroot = await navigator.storage.getDirectory();      
    }

    showTapeLibMgrLog(){
        console.log("OPFS: ", this.#OPFSroot);
    }

}

Now it works, but i don't understand WHY it works or what that extra line is doing?

In short, I understand the concept somewhat, but don't understand how to access the results of what I am trying to do in an asynchronous manner, so quite frankly, I am still very much stumbling in the dark. Any help in understanding the concept a bit better and specifically how to implement async functions in practice - for example how the above idea should be implemented - would be appreciated.

 

[EkBass]

Have you checked w3schools tutorial yet? Atleast for me, they were great resource for me. But, everyone cant go with same things so, let me know

 

[Exabyte]

Yes and WebMD, both useful resources.

I actually spent all day and into the early hours on this yesterday and it paid of because finally, by 3am in the morning got what I needed working.

Firstly, although having an IIFE in the constructor seems to work, the advice I got on the JavaScript IRC channel seems to be that this is a bad idea so I now removed it. Instead, I am calling an async ini() function.

Secondly, it seems that assigning and referring to global class variables, such as the private this.#OPFSroot that set up will usually fail because the async functions may not have returned results (fulfilled their promises) yet so subsequent async calls were reading the variable as 'undefined'.

I also hadn't properly set up the .then chain to correctly await the result of one function before asnchronously calling the next. Hence the first step or two would work, but subsequent steps returned undefined or empty results.

I was determined and eventually had a breakthrough in my understanding of things and was able to solve the problems and arrange the functions and callbacks (.then sections) in an appropriate way so that I got the result that was expected. Today I have been reading another helpful async Javascript tutorial book which has helped to re-enforce my understanding of the concepts and the reason for the problems that I had enoucntered. Hopefully this eill help me move forward.

I do still have questions. For example, I am working with Origin Private File System (OPFS - another new concept for me). Methods to get file handles and work with files are all async calls, which means the class will have be comprised of async funcions. Somehow, I would like to store a reference to the root of OPFS as well as the directory and asociated with the class instance somehow within it. As I have discovered, because of the async nature of the associated functions, this cannot be done using ordinary Javascript this.variables in the construcor, so how would I manage to store this information within the class so it doesn't have to be repeatedly fetched from the OPFS?