#JavaScript - Callbacks vs. Promises

callbacks-promises.md

Using Callbacks

const posts = [
    { title: 'Post One', body: 'This is post one' },
    { title: 'Post Two', body: 'This is post two' }
]

const getPosts = () => {
    setTimeout(() => {
        let output = ''
        posts.forEach((post) => {
            output += `<li>${post.title}</li>`
        })
        document.body.innerHTML = output
    }, 1000)
}

const createPost = (post, callback) => {
    setTimeout(() => {
        posts.push(post)
        callback()
    }, 2000)
}

createPost({ title: 'Post three', body: 'This is post three' }, getPosts)

Using Promises

const posts = [
    { title: 'Post One', body: 'This is post one' },
    { title: 'Post Two', body: 'This is post two' }
]

const getPosts = () => {
    setTimeout(() => {
        let output = ''
        posts.forEach((post) => {
            output += `<li>${post.title}</li>`
        })
        document.body.innerHTML = output
    }, 1000)
}

const createPost = (post) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            posts.push(post)
            const error = false
            if (!error) {
                resolve()
            }
            else {
                reject('Something went wrong')
            }
        }, 2000)
    })


}

// createPost({ title: 'Post three', body: 'This is post three' })
//     .then(getPosts)
//     .catch(err => console.log('Something went wrong', err))

// const promise1 = Promise.resolve('Hello One')
// const promise2 = Promise.resolve('Hello Two')
// const promise3 = Promise.resolve('Hello Three')
// const promise4 = fetch('https://jsonplaceholder.typicode.com/users').then(response => response.json())

// Promise.all([promise1, promise2, promise3, promise4]).then(values => console.log(values))

Using Async/Await

const init = async() => {
    await createPost({ title: 'Post three', body: 'This is post three' })

    getPosts()
}

init()