DEV Community 👩‍💻👨‍💻

AKSH DESAI
AKSH DESAI

Posted on

Part 1:- Try Catch javascript Syntax

Javascript Code

let btn = document.getElementById("btn");
let divdata = document.getElementById("divdata");

const makeRequest = () => {
    btn.setAttribute('disabled', 'disabled');
    const promiseObj = fetch("data.txt");
    console.log('promiseObj', promiseObj);
    promiseObj.then((res) => {
        return res.text()
    }).then((data) => {
        btn.removeAttribute('disabled');
        console.log('data', data)
    })
}

const makeRequest = () => {
    console.log("Button Clicked");
    btn.setAttribute('disabled', 'disabled');

    fetch("data.txt")
        .then((res) => {
            return res.text()
        }).then((data) => {
            btn.removeAttribute('disabled');
            console.log('data', data)
        })
}

// Promise then Error Handling 
const makeRequest = () => {
    console.log("Button Clicked");
    btn.setAttribute('disabled', 'disabled');

    fetch("data.txt")
        .then((res) => {
            console.log('res', res);
            if (res.ok === false) {
                throw Error(res.statusText)
            }
            return res.text()
        }).then((data) => {
            console.log('data1', data)
        }).catch((err) => {
            console.log('err', err);
        })
    btn.removeAttribute('disabled');
}


// Promise then Showing Data into Browser
const makeRequest = () => {
    console.log("Button Clicked");
    btn.setAttribute('disabled', 'disabled');

    fetch("data.txt")
        .then((res) => {
            console.log('res', res);
            if (res.ok === false) {
                throw Error(res.statusText)
            }
            return res.text()
        }).then((data) => {
            console.log('data1', data)
            divdata.innerText += data
        }).catch((err) => {
            console.log('err', err);
        })
    btn.removeAttribute('disabled');
}

// // Async & Await 
async function makeRequest() {
    console.log("Button Clicked");
    const res = await fetch('data.txt');
    console.log(res);
    const data = await res.text();
    console.log('data', data)
}


// Async & Await | Error Handling
async function makeRequest() {
    try {
        console.log("Button Clicked");
        const res = await fetch('data1.txt');
        if (!res.ok){
            throw new Error(res.statusText)
        }
        console.log(res);
        const data = await res.text();
        console.log('data', data)
    } catch (error) {
        console.log('error', error);
    }
}

// Async & Await | Showing Data into Browser 
async function makeRequest() {
    try {
        console.log("Button Clicked");
        const res = await fetch('data.txt');
        if (!res.ok){
            divdata.innerText = res.statusText;
            throw new Error(res.statusText)
        }
        console.log(res);
        const data = await res.text();
        console.log('data', data)
        divdata.innerText = data;
    } catch (error) {
        console.log('error', error);
    }
}

btn.addEventListener('click', makeRequest); 1
Enter fullscreen mode Exit fullscreen mode

Thank You.
You can follow us on:
Youtube
Instagram

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!