Please enable JavaScript.

Coggle requires JavaScript to display documents.

27.4: Async functions - Coggle Diagram

27.4: Async functions

async

if the function returns with a value

const hello = async () => {
  return 'Hi there!'
}

hello().then((data) => console.log(data))

if the function throws an error

const hello = async () => {
  throw Error('Oops, something went wrong!')
}

hello().catch((data) => console.log(data))

outputs

> Error: Oops, something went wrong!
    at hello (<anonymous>:9:9)
    at <anonymous>:11:1
    at mn (<anonymous>:16:5455)

await

back to creating a rainbow

delayedColorChange('red', 1000)
    .then(() => delayedColorChange('orange', 1000))
    .then(() => delayedColorChange('yellow', 1000))
    .then(() => delayedColorChange('green', 1000))
    .then(() => delayedColorChange('blue', 1000))
    .then(() => delayedColorChange('indigo', 1000))
    .then(() => delayedColorChange('violet', 1000))

using async/await

async function rainbow() {
    await delayedColorChange('red', 1000)
    await delayedColorChange('orange', 1000)
    await delayedColorChange('yellow', 1000)
    await delayedColorChange('green', 1000)
    await delayedColorChange('blue', 1000)
    await delayedColorChange('indigo', 1000)
    await delayedColorChange('violet', 1000)
}
rainbow()

rainbow() returns a Promise

so could also do

rainbow().then(() => console.log("END OF RAINBOW!"))

or could use async

async function printRainbow() {
    await rainbow();
    console.log("END OF RAINBOW!")
}

printRainbow()

what about promises that resolve with a value?

fakeRequestPromise

const fakeRequest = (url) => {
    return new Promise((resolve, reject) => {
        const delay = Math.floor(Math.random() * (4500)) + 500;
        setTimeout(() => {
            if (delay > 4000) {
                reject('Connection Timeout :(')
            } else {
                resolve(`Here is your fake data from ${url}`)
            }
        }, delay)
    })
}

async function makeTwoRequests() {
    try {
        let data1 = await fakeRequest('/page1');
        console.log(data1);
        let data2 = await fakeRequest('/page2');
        console.log(data2);
    } catch (e) {
        console.log("CAUGHT AN ERROR!")
        console.log("error is:", e)
    }

}

outputs

> Here is your fake data from /page1
  Here is your fake data from /page2