JS Async: 15. Fetch Api

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fetch API</title>
</head>
<body>
<form>
    <label for="username">Username:
        <input type="text" id="username" name="username">
    </label>
    <br>
    <label for="password">Password:
        <input type="password" id="password" name="password">
    </label>
    <br>
    <input type="button" id="login" value="Login">
</form>
<h1 id="response"></h1>
<script>

    function doLogin(){
        // new Request("input", init); input = url, init = configuration
        const request = new Request("https://javascript-async.free.beeceptor.com", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            body: JSON.stringify({
                username: document.getElementById("username").value,
                password: document.getElementById("password").value
            })
        });

        // Promise<Response> di mana Response berupa object Response
        const response = fetch(request); // mengirim request

        response
            .then((response) => response.json())
            .then(function (json){
                document.getElementById("response").textContent = json.success;
            })
            .catch(function (error){
                document.getElementById("response").textContent = error;
            })

    }

    document.getElementById("login").onclick = doLogin;

</script>
</body>
</html>