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

Thank You.
You can follow us on:
Youtube
Instagram