JS - Promises vol. 2

Kontynuujemy poznawanie promises. Piszemy promisy, które zwracają wartość i posiadają resolve/reject – do dzieła.

Nasz poprzedni przykład:

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

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

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

console.log(document.readyState);

Potrzebujemy do tego jeszcze odrobinę HTML:

<body>
    <p id="para">bla bla bla</p>
    <script src="./promise2.js"></script>
</body>

Powinno wyglądać to tak:

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

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

    });
    return p;
}

whenLoaded()
.then(function(){
    console.log("DOCUMENT READY");
});

console.log(document.readyState);
//loading
//DOCUMENT READY

Teraz dodać możemy funkcję wykonującą selekcję po ID:

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

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

    });
    return p;
}

function selectById(selector){
    let p = new Promise(function(resolve, reject){
        let element;
        element = document.getElementById(selector);
        resolve(element);
    });
    return p;
}

Oraz jej użycie:

whenLoaded()
.then(function(){
    console.log("DOCUMENT READY");
    
    selectById("para")
    .then((el) => el.textContent = "MODIFIED")
});

console.log(document.readyState);
//loading
//DOCUMENT READY

Możemy dodać też reject do naszej promise:

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

        let element;
        
        try {
            element = document.getElementById(selector);
            resolve(element);
        } catch(err) {
            reject(err.message);
        }

    });

    return p;
}

Zobaczmy jak działa z błędami:

whenLoaded()
.then(function(){
    console.log("DOCUMENT READY");

    selectById("para")
    .then((el) => el.textContent = 'modified')

    selectById("doesntexist")
    .then((el) => el.textContent = "modified!")
    .catch((err) => console.warn(err));
});

JS – Promises vol. 2