Typescript async function wrapping promise

Issue

I'm curerntly playing with Typescript and ionic and also new to async-await on javascript. I'm trying to get a good undestanding of promises but I can't figure out how to wrap methods which call multiple promises to return a promise. I'll try to elaborate better:

Basically, I have an object which can create a SQLite database, and when the create() method is invoked, it would return a Promise with the actual database object once it has been created.

Then, when the promise resolves and the DB object is returned, I need to use it to execute some statements in a transaction to create all the tables, and a new promise is returned when I invoke the execution of all the statements in the transaction.

Then when the transaction is finished and everything went good, I need to assign the database object to a class property and set a flag indicating database is created and ready to go.

So I thought it would be a good idea to wrap this database initialization stuff in a method called createDatabase() or something like that, which returns a Promise<SQLiteObject>, where SQLiteObject represents the database. This method would be called on initialization and should return the SQLiteObject representing the database once everything went OK, or throw an error which I would log in the .catch() method of the Promise.

I have a basic understanding of promises and how to use then() and catch() methods but I'm a bit confused when I have to create the database, then do something else when the promise resolves, and when everything is done, return a Promise containing the DB object, which is an instance of the class SQLiteObject.

---

CODE
Below is my current Typescript code. It's not valid typescript as I don't know how to return the Promise<SQLiteObject> from the async function.

async createDatabase(): Promise<SQLiteObject> {

        this.sqlite.create({
            name: this.dbName,
            location: this.dbLocation
        }).then( (db: SQLiteObject) => {
            // Insert all tables.
            let createTableParam: string = `CREATE TABLE IF NOT EXISTS param (name PRIMARY KEY NOT NULL, value TEXT)`;
            let createTableNews: string = `CREATE TABLE IF NOT EXISTS news (id PRIMARY KEY NOT NULL,title TEXT,
                content TEXT, image TEXT, date DATE)`;

            db.transaction(tx => {
                    tx.executeSql(createTableParam);
                    tx.executeSql(createTableNews);
                    // Add here more tables to create if needed
                }
            )
                .then( () => {
                    console.log('Tables were created');
                    this.isActive = true;
                })
                .catch(error => {
                    console.log(`Error creating tables - ${error}`);
                });
        }).catch(
            error => console.log(`Error at SQLite initialization - ${error}`)
        );
    }

---

RESEARCH SO FAR

• I have read this question here which seems related but I am confused on how to implement on my code
• Checked async/await on MDN
• This question here also seems related but still don't really understand how to do it.
• Typescript promises at "Typescript Deep Dive"
• Async/Await at "Typescript Deep Dive"

Solution

You used async, so that means you can use await inside the function any time you have a Promise and write the code almost as though it were synchronous.

async createDatabase(): Promise<SQLiteObject> {
    let db: SQLiteObject;
    try {
      db = await this.sqlite.create({
        name: this.dbName,
        location: this.dbLocation
      });
    } catch(error) {
        console.log(`Error at SQLite initialization - ${error}`);
        return;
    );
    // Insert all tables.
    let createTableParam: string = `CREATE TABLE IF NOT EXISTS param (name PRIMARY KEY NOT NULL, value TEXT)`;
    let createTableNews: string = `CREATE TABLE IF NOT EXISTS news (id PRIMARY KEY NOT NULL,title TEXT,
        content TEXT, image TEXT, date DATE)`;

     try {
       await db.transaction(tx => {
                tx.executeSql(createTableParam);
                tx.executeSql(createTableNews);
                // Add here more tables to create if needed
            }
          );

       console.log('Tables were created');
       this.isActive = true;
       return db;
     catch(error) {
         console.log(`Error creating tables - ${error}`);
     });
}

Without the await you need to be sure to return that initial promise.

return this.sqlite.create({...

and then again further down you can return the db object:

       this.isActive = true;
       return db;

Also you should avoid nesting the .then() handlers: when you get another promise just return it from the first handler and chain another .then on the end:

createDatabase(): Promise<SQLiteObject> {
    let database: SQLiteObject = null;
    return this.sqlite.create({
        name: this.dbName,
        location: this.dbLocation
    })
    .catch(error => console.log(`Error at SQLite initialization - ${error}`))
    .then( (db: SQLiteObject) => {
        // Insert all tables.
        let createTableParam: string = `CREATE TABLE IF NOT EXISTS param (name PRIMARY KEY NOT NULL, value TEXT)`;
        let createTableNews: string = `CREATE TABLE IF NOT EXISTS news (id PRIMARY KEY NOT NULL,title TEXT,
            content TEXT, image TEXT, date DATE)`;
        database = db;
        return db.transaction(tx => {
                tx.executeSql(createTableParam);
                tx.executeSql(createTableNews);
                // Add here more tables to create if needed
            }
        );
    })
    .then( () => {
        console.log('Tables were created');
        this.isActive = true;
        return database;
    })
    .catch(error => console.log(`Error creating tables - ${error}`));

Answered By - Duncan