@tesla809/

promises - fp - Fun Fun Function

JavaScript

Notes on promises from Fun Fun Function's series on functional programing.

fork
loading
main.js
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
// Note: use this in file outside of repl.it
// use with browser. Probably won't work if you don't have images named cat1, etc.

// from fun fun function
// Promises - Part 8 of Functional Programming in JavaScript
// https://www.youtube.com/watch?v=2d7s3spWAzo

// functional programming - the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. You can avoid lots of bugs this way.

// Functional programming makes your code more composable.

// higher order function - function that takes in other functions 

// composition - higher order functions and callbacks to make modular code.
// composition allows you to break up problems into small reusbale bits and think/reason those parts much clearer
// in js, functions are values. This allows you to use composition, where you can divide problms into small simple functions and composing them together using higher order functions.

// callback - a way to tell code that when x is done, do y. Think of it like a sticky note that says, when x happens do y. 

// Promises - are a way to deal with asynchonous code, when we don't know when things are going to happen or in what order.
// Promises are more powerful than callbacks because they are composable and we can avoid callback hell

// Promise has a method called .then()
// that can take a callback function

// basic promises
// need to get http request of some info

// promises are something you can pass around and write code around it, even though you don't have the value yet. Sort of like a bank loan.

// old way
/*
function loadImage(url, callback) {
  let image = new Image()

  image.onload = function() {
    callback(null, image);
  }

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

let addImg = src => {
    let imgElement = document.createElement('img');
    imgElement.src = img.src;
    document.body.appendChild(imgElement);
}
*/

// new way with promises
// promise takes function in, and two parameters
// resolve and reject, which are functions too.
// You pass resolved promises to resolve,
// rejected promises to reject.
function loadImage(url) {
  return new Promise((resolve, reject) => {
    let image = new Image()

    image.onload = function() {
      resolve(null, image);
    }

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

    image.src = url
  });
}

let addImg = src => {
    let imgElement = document.createElement('img');
    imgElement.src = img.src;
    document.body.appendChild(imgElement);
}

// Promises are better than callbacks once you start to add more callback events. The more you have the deeper you are in callback hell.
Promise.all([
  loadImage('images/cat1.jpg'),
  loadImage('images/cat2.jpg'),
  loadImage('images/cat3.jpg'),
]).then(images => {
  images.forEach(img => addImg(img.src))
}).catch(error => {
  // handle errors here
  // for any error in promise array.
  // better to have it one place than how it is with old callbacks.
})

// old way
// Callback of hell. Imagine 6 or 10 levels deepe
// This code is not executing in parrallel either.
// The second callback won't be called untill the 
// 1st is done, so its blocking and slowing things down.
// With error handling it looks worse.
loadImage('images/cat1.jpg', (error, img1) => {
  if(error) throw error;
  addImg(img1.src);
  loadImage('images/cat2.jpg', (error, img2) => {
    if(error) throw error;
    addImg(img2.src);
      loadImage('images/cat1.jpg', (error, img3) => {
        if(error) throw error;
        addImg(img3.src);
      });
  });
});
Native Browser JavaScript