[JS] Kan man gömma en fetchcallback?

Permalänk
Medlem

[JS] Kan man gömma en fetchcallback?

Jag har gjort en simpel fönsterhanterare (modul) i javascript och har bland annat skrivit en custom Confirm metod.
I denna Confirm metod använder jag mig av en fetch request för att hämta .html filen som aggerar skelett för Confirm rutan. Så, Confirm måste ju vara async och för att jag ska kunna läsa svaret från metoden när den anropas så måste ju en callback användas.
Men jag vill slippa kladda till det med callback när jag anropar metoden. Jag vill att det ska vara mer eller mindre lika rent och simpelt som med vanilla Confirm. Om Metoden i sig är lite mer kladdig gör inte så mycket.

Så, frågan är om man kan flytta in callbacken i Confirm metoden? Dvs, kan man nästla det på något vis så att Confirm i sig inte är async, utan istället så ligger det en async function nästlad i metoden.
Finns det något annat sätt att göra detta på eller är jag låst till att använda callback?

Simplifierad kod.

async Confirm(..... , _callback){ let response = await fetch("confirm.htm"); // No button $("ewindow-confirm-btnNo").addEventListener("click", () => { _callback(false); }); // Yes button $("ewindow-confirm-btnYes").addEventListener("click", () => { _callback(true); }); }

Hur jag anropar metoden.

eWindow.Confirm(..... , callback); function callback(_response){ if(_response === true){ ..... } }

Hur jag vill att det ska se ut när jag anropar metoden

if(eWindow.Confirm(.....) === true){ ..... }

Visa signatur

www.fckdrm.com - DRM år 2024? Ha pyttsan.

Permalänk
Medlem

Med hjälp av Promise och async/await kan du göra lite lite mer "lättläst" på detta sätt eller kanske något liknande. Du gör en closure med en promise executor som du sedan anropar resolve() på i din event listener. Det borde fungera tyvärr inte praktiskt testat just detta exempel.

async Confirm(....) { let response = await fetch("confirm.htm"); // Wrap in promise const myConfirmPromise = new Promise((resolve, reject) => { // No button $("ewindow-confirm-btnNo").addEventListener("click", () => { resolve(false); }); // Yes button $("ewindow-confirm-btnYes").addEventListener("click", () => { resolve(true); }); }); return myConfirmPromise; }

Och sedan används så här då (i en async function / context)

let result = await eWindow.Confirm(......) if (result) { // yes } else { // no }

Permalänk
Medlem

@toj_ts Glömde säga tack. Ska kolla på det.

Visa signatur

www.fckdrm.com - DRM år 2024? Ha pyttsan.

Permalänk
Medlem

Nu har jag kollat på det och kan säga att det fungerar sitbra
Jag kan till och med skriva;

if(await eWindow.Confirm(....)){ //Do something }

Jag får nog läsa på om promises lite mer.

Visa signatur

www.fckdrm.com - DRM år 2024? Ha pyttsan.