JS - Promises vol. 1

Poznajemy promises w JavaScript. Uczymy się tworzyć funkcje zwracające promise. Do dzieła.

Wzór na funkcje zwracające promisy jest bardzo prosty:

function invokeWhenLoaded(){
    let p = new Promise(function(resolve, reject){
        //(...)
    });
    return p;
}

Resolve wywołujemy gdy sukces z wartością, jaką chcemy przekazać, reject gdy fail.

Teraz napiszmy sobie naszą funkcję:

function invokeWhenLoaded(){
    let p = new Promise(function(resolve, reject){
        document.addEventListener('DOMContentLoaded', function(){
            resolve(true);
        });
    });
    return p;
}

Ta funkcja ma chodzić, gdy DOM się załaduje:

invokeWhenLoaded()
.then(() => console.log("DOM LOADED"))
.then(() => console.log(document.querySelector("#para")));

console.log(document.readyState);

Najpierw zobaczymy, że stan to loading, później wykona bloki then, gdy już DOM będzie załadowany.

Wartość przekazana do resolve nie jest tu używana, ale możemy ją sobie wyświetlić:

invokeWhenLoaded()
.then((val) => console.log(val))
.then(() => console.log("DOM LOADED"))
.then(() => console.log(document.querySelector("#para")));

console.log(document.readyState);

Ok, teraz napiszmy sobie jeszcze nasze promise bez event-listenera:

function invokeWhenLoaded(){
    let p = new Promise(function(resolve, reject){

    let stateCheck = setInterval(() => {
        if (document.readyState === 'complete') {
              clearInterval(stateCheck);
              resolve(true);
            }
        }, 100);
        
    });
    return p;
}

Działa dokładnie tak samo.

JS – Promises vol. 1