promises.js

// 'Promise' --> the guarantee that some callback is running and doing things
// and that it will come back to you when it's done,
// either by succeeding or by failing.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('done!'), 2000); // increase this with 1 millisecond, and then the rejection happens before the resolution :o!
  setTimeout(() => reject('failed'), 2000);
});

promise
  .then(result => console.log(result))
  .catch(result => console.log(result))
  .finally(() => console.log('promise is done'));

// Annoying where you need to chain promises

new Promise(resolve => {
  setTimeout(() => resolve(), 200);
}).then(() => {
  new Promise(resolve => {
    setTimeout(() => resolve(), 200);
  }).then(() => {
    new Promise(resolve => {
      setTimeout(() => resolve(), 200);
    }).then(() => {
      new Promise(resolve => {
        setTimeout(() => resolve(), 200);
      }).then(() => {
        new Promise(resolve => {
          setTimeout(() => resolve('pfff, finally done'), 200);
        }).then(result => console.log(result))
      })
    })
  })
})

// Nested way is not so nice.

// Better way, await each promise before we go to the next line of code
// Only can be done inside async functions
const awaitPromises = async () => {
  await new Promise(resolve => {
    setTimeout(() => resolve(), 200);
  });
  await new Promise(resolve => {
    setTimeout(() => resolve(), 200);
  })
  await new Promise(resolve => {
    setTimeout(() => resolve(), 200);
  })
  await new Promise(resolve => {
    setTimeout(() => resolve(), 200);
  })
  const result = await new Promise(resolve => {
    setTimeout(() => resolve('pfff, finally done'), 200);
  });

  console.log(result);
}
awaitPromises();

/**
 * Exercise
 * 1) Create scenario where you chain multiple real life actions (e.g. morning routine)
 * 2) Create an async function where you await a promise for each action. Feel free to log the result of each action if you want
 */
const morningRoutine = async () => {
  const shower = await new Promise(resolve => {
    setTimeout(() => resolve('done showering!'), 2000);
  });
  console.log(shower);

  const putOnClothes = await new Promise(resolve => {
    setTimeout(() => resolve('done putting on clothes!'), 500);
  });
  console.log(putOnClothes);

  const breakfast = await new Promise(resolve => {
    setTimeout(() => resolve('done with breakfast!'), 2000);
  });
  console.log(breakfast);

  const brushTeeth = await new Promise(resolve => {
    setTimeout(() => resolve('done brushing teeth!'), 200);
  });
  console.log(brushTeeth);

  const goToWork = await new Promise(resolve => {
    setTimeout(() => resolve('arrive at work'), 4000);
  });
  console.log(goToWork);
}
morningRoutine();

// Other things that are asynchronous
// - Loading a library
// - Fetching data from backend
// - Sending a form and getting back feedback that it was submitted
// - Batching changes before rendering it
// - Animations