Working with promises - adding to collection return error - remove previous added data on error.

Hi community.

I have kind of a complicated program running on my website,
We are a company making blinds and i’m making a progam calculating evrything and then giving them the right price.
How do does it work:
-The customer selects the type of case, type of blind ,blind color, the color of the case & conductor (hope this is the right word for it, the bars at the side where the blinds slide trough.)

  • depending on the type of blind they select, the color options for the blinds change, depending on the type of case the options for the color changes.
    This is for the whole calculator the same.

-Then i have a repeater.
-Here they can give their blind a “position name” (easyer for them to know later where the blind has to be placed)
-The width & height of the blind with the options how they measured. Depending on what they select it goes trough a code looking for the right case size (this adjusts the height), and changing the width depending on how they measured.
-They can select what kind of service that has to go in it (motor serviec, manual service, etc).
-Depending on that selection some other options change like the transimmters they can select.

I tought it would be nice to have a small explenation about what i am making so you can follow a bit.
Now i have an array wich stores all the data.
data is added when our customers click or changes some optons.

So now the big question.
How do i add evrything to the database without any data loss.
Evrything works kinda fine, but sometimes data isn’t added correctly.

I searched far and wide to learn more about promises but i still can’t figure evrything out .

So i have a function.

import { BREEDTE_SPAN } from 'backend/global/globalVariables.jsw' // This is a size that is always the same

export function changeWidth(width, breedteAFwerking) {
 
 return new Promise((resolve,reject)=>{
 if (breedteAFwerking === "spanBreedte") { //this is fired if they didn't give the finished size (adding the "BREEDTE_SPAN")
 let newWidth = Number(width) - BREEDTE_SPAN
        resolve(newWidth)
    } else if (breedteAFwerking === "afgBreedte") {
        resolve(Number(width)) //this is fired if they did give the finished size (No extra size is added)
    } else {
        reject("Er is iets mis gegaan bij het berekenen van de breedte") //This gives an error on the page when adding all to the database.
    }
    })
}

Then when using this function

 let width;
 changeWidth(data[K].width, data[K].breedteafspan)
        .then(res=>{
            width = res //The result returned
            console.log("new Width : " + width)
        }).catch(err=>{
 
            validation = false
            errorMessage = errorMessage + "\n" + err + "Bij rolluik Nr : " + K //the rejection returned "err"
        })
        console.log("after new width") // this is fired before the res is added to width

Now the console.log(“after new width”) is fired before width is set,
I have a whole bunch of code like this.
Do i have to chain them somehow?
When i use await before changeWidth(data[K].width,data[K].breedteafspan)
it seems to work the way it should but their has been told that you never may use await with .then()
If i chain them,

The variable ‘width’ is used down below in my code to add to the database,
I have alot more like these variables that getting a valua after a function.
width,height,color,repeaterdata, etc.

Evry data from the repeater added to the database has its own row.
This is the way i add it.

The function to add to the database:


async function addRolluik(indexNr, sortNr, naam, lamel, info, breedte = 0, hoogte = 0, korting, breedteSpan, hoogteAf, db) {
 var ref = $w("#txtReferentie").value
 if (ref === "") {
        ref = bestelNr
    }
 let toInsert = {
 "bestelNr": bestelNr,
 "referentie": ref,
 "indexNr": indexNr,
 "sortNr": sortNr,
 "naam": naam,
 "lamel": lamel,
 "info": info,
 "breedte": Number(breedte),
 "hoogte": Number(hoogte),
 "breedteSpan": breedteSpan,
 "hoogteAf": hoogteAf,
 "korting": korting,
 "userId": userId
    }
    wixData.insert(db, toInsert, options)
}

How i use it:

 addRolluik(
i, //index number to know wich item belongs to wich blind
10, //order number to know where to place it later when viewing it
"Rolluikblad", // name to know in the backend what to do with it.
$w("#rbTypeLamel").value, //type of the blind
width + " * " + height + " mm", //calculated size of the blind
width,
height,
user.rolluikblad, 
data[i].breedteafspan, //Data from repeater data.
data[i].hoogtedagaf, //data from repeater data
 "OffertesTest" //database to save to
 )

Like these functions i have like 10-15 .
This is the output of it.


depending on what is send to it (depending on the name given) it does something with it in the backend.
Some data needs to calculate a prices some do not have to do anything.

So in short what i need.
-How can i be sure evrything is added.
-if there is a problem, how can i make sure there is no data added at all.
-if there is a problem in the backend with a price calculation, how could a return a error back to the frontend that something went wrong and also removing all data that has already sended.

Hope someone can give some nice examples that i’ll understand better then all the other expamples on the web.

Kind regards,
Kristof.