functional-programming-in-js/promises.html at master · sudowebdev/functional-programming-in-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>

<html>
<head>
 <meta charset="UTF-8" />
 <title>Callbacks Implementation</title>

</head>
<div id="app">
 <img id="image1" width="200" height="200"/>
 <img id="image2" width="200" height="200"/>
 <img id="image3" width="200" height="200"/>

</div>

<script>

    function imageLoaded(url){
        return new Promise(function(resolve, reject){
            /*
            resolve and reject are 2 separate functions which are same as the
            parameters passed in the .then and .catch
            */

            let image  = new Image();

            image.onload = function(){
                resolve(image);

            };

            image.onerror = function(){
                let message = 'Could not load image at ' + url;
                reject(new Error(message));
            };

            image.src= url;

        });
    }


    let addImg = function (src) {
        let imgElement = document.getElementById("image1");
        imgElement.setAttribute('src', src);

    };


    imageLoaded("./images/cat1.jpg")
        .then(function(img1){
            //resolve function and the function we currently are in, are absolutely the same.
            addImg(img1.src);
        })
        .catch(function(error){
            //reject function and the function we currently are in, are absolutely the same
            console.log(error.message);
        });


    /*
     Iterable array consisting of all the promises
    */
    Promise.all([
        imageLoaded("./images/cat1.jpeg"),
        imageLoaded("./images/cat2.jpeg"),
        imageLoaded("./images/cat3.jpg"),
        imageLoaded("./images/cat4.jpg")
    ]).then(function(img){
        console.log(img);

    })
    .catch(function(error){
        console.log(error.message);
    });


</script>
</html>