College Joost Faber

Bij het college van Joost kregen we uitleg over de verschillende manieren van async. Het is belangrijk om async code te hebben om verschillende redenen, bijvoorbeeld omdat de JavaScript dan sneller geladen wordt en omdat de andere functies kunnen laden als er in andere functies errors zijn.

De verschillende manieren waren:

• XHR (XMLHttpRequest): Dit is een van de oudste manieren om data op te halen. Met XHR kan data opgehaald worden zonder de pagina te hoeven refreshen. Een voorbeeld van een XMLHttpRequest:

const target = document.querySelector('section#xhr')
const url =  `${api.endpoint}${api.topic}&api_key=${api.key}&limit=${api.limit}`
const request = new XMLHttpRequest()

target.classList.remove('hidden')

request.open('GET', url, true)
request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
        // Success!
        const data = JSON.parse(request.responseText)
        render(data.data, target)
    } else {
        // We reached our target server, but it returned an error
    }
}

request.send()

export default request

• Promise: Een promise is een returned object waarin callbacks meegegeven kunnen worden, in plaats van callbacks in een functie. Een promise is de basis voor de manieren die hierna komen. Promises kunnen gebruik maken van .then, waardoor de functie asynchroon verloopt waardoor de functies na elkaar worden aangeroepen. Een voorbeeld van een promise is:

const target = document.querySelector('section#promise')
const url =  `${api.endpoint}${api.topic}&api_key=${api.key}&limit=${api.limit}`

target.classList.remove('hidden')

// Make a promise
const loadData = new Promise((resolve, reject)=> {
    const request = new XMLHttpRequest()
    request.open('GET', url, true)

    request.onload = () => {
        if (request.status >= 200 && request.status < 400) {
        // Success!
            const data = JSON.parse(request.responseText);
            resolve(data)
        } else {
        // We reached our target server, but it returned an error
            reject('no connection')
        }
    }

    request.onerror = () => {
    // There was a connection error of some sort
    }

    request.send()
})

loadData
    .then(data => render(data.data, target))
    .catch(error => console.error(error))

export default loadData

• Fetch: Fetch is een makkelijkere en overzichtelijke manier van promises. De code werkt hetzelfde als bij de promise, maar is veel minimaler. Een voorbeeld van fetch is:

const target = document.querySelector('section#fetch')
const url =  `${api.endpoint}${api.topic}&api_key=${api.key}&limit=${api.limit}`

target.classList.remove('hidden')

export default fetch(url).then(response => response.json())
                    .then(data => render(data.data, target))
                    .catch(err => console.error(err))

• Async: Async werkt hetzelfde als een .then chain. Door async en await te gebruiken in een functie zorgt het ervoor dat de functie asynchroon verloopt. Een voorbeeld van async is:

const target = document.querySelector('section#async')
const url =  `${api.endpoint}${api.topic}&api_key=${api.key}&limit=${api.limit}`

target.classList.remove('hidden')

const request = async () => {
    const response = await fetch(url)
    const data = await response.json()

    render(data.data, target)
}
  
export default request()