dog.ceo API

Random dog images

HTML

<button>Click</button>

Add CDN for axios

<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

Get button onClick Event

// Using fetch() 
document.querySelector('button').addEventListener('click', () => {
    getImgUsingFetch();
})
// Using axios()
document.querySelector('button').addEventListener('click', () => {
    getImgUsingAxios();
})

Function

// Using fetch()
async function getImgUsingFetch() {
    try {
        await fetch('https://dog.ceo/api/breeds/image/random').then((data) => {
            return data.json();
        }).then((data) => {
            document.querySelector('.img').setAttribute("src", data.message);
        })
    } catch (err) {
        console.log(err);
    }
}

Using axios

async function getImgUsingAxios() {
    try {
        await axios('https://dog.ceo/api/breeds/image/random').then((data) => {
            document.querySelector('.img').setAttribute("src", data.data.message);
        })
    } catch (err) {
        console.log(err);
    }
}