Promise Method tutorial in Advance JavaScript

October 16, 2024
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Promise Method Advance JavaScript</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="">
</head>

<body>
    <script>
        //Example 1 :
        // let complete = false;

        // let prom = new Promise(function (resolve, reject) {
        //     if (complete) {
        //         resolve("I am Successfull.");
        //     }
        //     else {
        //         reject("I am Failed.");
        //     }
        // });
        // console.log(prom);

        //Example 2 :
        function prom(complete) {
            return new Promise(function (resolve, reject) {
                console.log("Fetching data, please wait...");
                setTimeout(() => {
                    if (complete) {
                        resolve("I am Successful.");
                    }
                    else {
                        reject("I am Failed.");
                    }
                }, 2000);
            });
        }

        let onfulfillment = (result) => {
            console.log(result);
        };
        let onRejection = (error) => {
            console.log(error);
        };
        // prom(true).then(onfulfillment);
        // prom(true).catch(onRejection);
        //We can write above two lines of Code of "then" and "catch" in one line by Method Chaining
        prom(true).then(onfulfillment).catch(onRejection);

        //We can write above two functions "onfulfillment" and "onRejection" code as shown below :
        // prom(true).then((result) => {
        //     console.log(result);
        // }).catch((error) => {
        //     console.log(error);
        // });
        // console.log(prom(true));

        //Example 3 :
        //Promise() function for Division of Two numbers and check result is correct or not and returns the result.
        function prom(a, b) {
            return new Promise(function (resolve, reject) {
                console.log("Fetching data, please wait...");
                var c = a / b;
                setTimeout(() => {
                    if (a, b) {
                        resolve(`Your answer : ${c}`);
                    }
                    else {
                        reject("Failed to Calculate.");
                    }
                }, 2000);
            });
        }
        prom(5, 2).then((result) => {
            console.log(result);
        }).catch((error) => {
            console.log(error);
        });

        //Example 4 : Ajax
        function prom(a, b) {
            return new Promise(function (resolve, reject) {
                console.log("Fetching data, please wait...");
                setTimeout(() => {
                    $.get("https://jsonplaceholder.typicode.com/posts", function (data) {
                        resolve(data);
                    }).fail(err => {
                        reject("Fail to load JSON.");
                    });
                }, 2000);
            });
        }
        prom().then((result) => {
            console.log(result);
        }).catch((error) => {
            console.log(error);
        });
    </script>
</body>

</html>