[Udemy] JavaScript: The Advanced Concepts - 섹션 9:Asynchronous JavaScript

섹션 9:Asynchronous JavaScript

132. Section Overview

//1
setTimeout(()=>{console.log('1', 'is the loneliest number')}, 0)
setTimeout(()=>{console.log('2', 'can be as bad as one')}, 10)

//2
Promise.resolve('hi').then((data)=> console.log('2', data))

//3
console.log('3','is a crowd')

// --output--
// 3 is a crowd
// 2 hi            // Promise
// -- program return undefined --
// 1 is the loneliest number    // setTimeout 0
// 2 can be as bad as one        // setTimeout 10

Web API - DOM 이벤트 핸들러, fetch(), setTimeout() ...

​

135. Promises

A promis is an object that may produce a single value some time in the future.

either a resolved value, or a reason that it’s not resolved (rejected)

states : pending / fulfilled / rejected

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

callback pyramid of dom

movePlayer(100, 'Left', function () {
  movePlayer(400, 'Left', function () {
    movePlayer(10, 'Right', function () {
      movePlayer(330, 'Left', function () {
      });
    });
  });
});

콜백의 중첩 예시

really really complicated code!

​

promise exercise

const promise = new Promise((resolve, reject) => {
  if (true) {
    resolve('Stuff Worked');
  } else {
    reject('Error, it broke');
  }
});

promise
  .then(result => result + '!')
  .then(result2 => {
    console.log(result2);
  })

출력결과

Stuff Worked!
Promise {<fulfilled>: undefined}

then의 첫번째 인자는 앞단 promise 의 resolve 된 결과가 담김

​

promise
  .then(result => {
    //throw "에러1"
    return result + '!'
  })
  .then(result2 => {
    throw "에러2"
    console.log(result2);
  })
  .catch((err) => console.log(err))

.catch가 에러2 잡아서 출력함

catch구문 이전에 있는 에러만 잡을수있음

​

const promise = new Promise((resolve, reject) => {
  if (false) {
    resolve('Stuff Worked');
  } else {
    reject('Error, it broke');
  }
});


// Uncaught (in promise) Error, it broke

.then 안해도 reject된값 바로나오넹..?

​

promise all

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'ONE');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'TWO');
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'THREE');
});

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values);
  })

(3000ms 후) until promises were resolved

(3) ["ONE", "TWO", "THREE"]

​

promise먼저 선언한담에
3초 되기 전에 promise.all.then하면 pending 상태로 나옴

3초 지나고 나서 all 하면 바로 출력

 

​

const urls = [
  'https://jsonplaceholder.typicode.com/users',
  'https://jsonplaceholder.typicode.com/posts',
  'https://jsonplaceholder.typicode.com/albums',
  'o_o?'
];

Promise.all(urls.map(url => {
  return fetch(url).then(resp => resp.json());
}))
  .then(results => {
    console.log(results[0]);
    console.log(results[1]);
    console.log(results[2]);
  })
  .catch(() => console.log("ERROR!"));

// --output--
// Promise {<pending>}
// GET chrome-extension://laookkfknpbbblfpciffpaejjkokdgca/o_o? net::ERR_FILE_NOT_FOUND
// ERROR!

이상한 url 이 있어서 fetch 에서 오류가 나면 catch로 잡을 수 있음

​

fetch('https://jsonplaceholder.typicode.com/users') // return Promise

​

​

136. ES8 - Async Await

async function : a function that returns a promise.

benefit of async/await is that it makes code easier to read.

 

• 1단계 : callback pyramid of dom

movePlayer(100, 'Left', function () {
  movePlayer(400, 'Left', function () {
    movePlayer(10, 'Right', function () {
      movePlayer(330, 'Left', function () {
      });
    });
  });
});

 

• 2단계 : Promise

movePlayer(100, 'Left')
  .then(() => movePlayer(400, 'Left'))
  .then(() => movePlayer(10, 'Right'))
  .then(() => movePlayer(330, 'Left'))

 

• 3단계 : Async/Await

async function playerStart() {
  const firstMove = await movePlayer(100, 'Left'); // pause
  await movePlayer(400, 'Left'); // pause
  await movePlayer(10, 'Right'); // pause
  await movePlayer(330, 'Left'); // pause
}

​

 

more realistic example (use fetch function)

// Promise
fetch('https://jsonplaceholder.typicode.com/users')
  .then(resp => resp.json())
  .then(console.log)

// Async/Await
async function fetchUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await response.json();
  console.log(data);
}

++ response.json()에 대해

response.json() does return a promise as well (as it waits for the body to load)

Why does .json() return a promise? : https://stackoverflow.com/questions/37555031/why-does-json-return-a-promise

​

 

more realistic example 2 (Promise.all)

const urls = [
  'https://jsonplaceholder.typicode.com/users',
  'https://jsonplaceholder.typicode.com/posts',
  'https://jsonplaceholder.typicode.com/albums',
];

// Promise.all
Promise.all(urls.map(url =>
  fetch(url).then(resp => resp.json())
))
  .then(results => {
    console.log("Users  : ", results[0]);
    console.log("Posts  : ", results[1]);
    console.log("Albums  : ", results[2]);
  })
  .catch("Oooops!");

// Async/Await
const getData = async function () {
  const [users, posts, albums] =
    await Promise.all(urls.map(url =>
      fetch(url).then(resp => resp.json())
    ));

  console.log("Users  : ", users);
  console.log("Posts  : ", posts);
  console.log("Albums  : ", albums);
}

 

error handing

Promise.all 에서 처럼 error 발생 시, catch 하려면

=> use try...catch block!

// try...catch on Async/Await
const urls = [
  'https://jsonplaceholder.typicode.com/users',
  'weird url',    // 여기서 에러날거임
  'https://jsonplaceholder.typicode.com/albums',
];

const getData = async function () {
  try {

    const [users, posts, albums] =
      await Promise.all(urls.map(url =>
        fetch(url).then(resp => resp.json())
      ));

    console.log("Users  : ", users);
    console.log("Posts  : ", posts);
    console.log("Albums  : ", albums);

  } catch (err) {

    console.log("Oooops!", err)

  }
}

// --output-- => Oooops! TypeError: Failed to fetch

async/await은 새로운 신택스니까 although intimidating at first 하긴 하지만
유용하게 사용할 수 있음!!

​

137. ES9 (ES2018)

전 버전에 비해서 알아야할 three main new features 가 있다

Object spread operator

//Object spread operator
const animals = {
  tiger: 23,
  lion: 5,
  monkey: 2,
  quokka: 1204
}

const { tiger, ...restAnimals, quokka } = animals;
 // SyntaxError: Rest element must be last element

const { tiger, ...restAnimals } = animals;
// --output--
// tiger -> 23
// restAnimals -> {lion: 5, monkey: 2, quokka: 1204}

function objectSpread(p1, p2, p3) {
  console.log(p1);
  console.log(p2);
  console.log(p3);
}

const { tiger, lion, ...restAnimals } = animals;

objectSpread(tiger, lion, restAnimals);
// --output--
// 23
// 5
// {monkey: 2, quokka: 1204}

​

138. ES9 (ES2018) - Async

finally

const urls = [
  'http://swapi.dev/api/people/1/',
  'http://swapi.dev/api/people/2/',
  'http://swapi.dev/api/people/3/',
  'http://swapi.dev/api/people/4/',
]

Promise.all(urls.map(url =>
  fetch(url).then(person => person.json())
))
  .then(people => {
    console.log('1', people[0]);
    throw Error;
    console.log('2', people[1]);
    console.log('3', people[2]);
    console.log('4', people[3]);
  })
  .catch(err => console.log('ughhhhh fix it!', err))
  .finally(() => console.log('extra'))

// --output--
// 1 {name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", …}
// ughhhhh fix it! ƒ Error() { [native code] }
// extra

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

finally() 메소드는 Promise 객체를 반환합니다.
Promise가 처리되면 충족되거나 거부되는지 여부에 관계없이 지정된 콜백 함수가 실행됩니다.
이것은 Promise가 성공적으로 수행 되었는지 거절되었는지에 관계없이 Promise가 처리 된 후에 코드가 무조건 한 번은 실행되는 것을 제공합니다.

 

요것을 쓰는 이유 : Promise의 then()과 catch() 핸들러에서의 코드 중복을 피하게 합니다.

 

p.then(onFulfilled, onRejected) 인 것과 달리
p.finally(onFinally) 요렇게 쓰임.

onFinally에 들어가는 function은 어떠한 인수도 전달받지 않는다.
왜냐하면 이행/거부 여부를 판단할 수 없기 때문에!

​

for await of

const urls = [
  'https://jsonplaceholder.typicode.com/users',
  'https://jsonplaceholder.typicode.com/posts',
  'https://jsonplaceholder.typicode.com/albums',
];

const getData = async function () {
  try {
    const [users, posts, albums] =
      await Promise.all(urls.map(url => {
        const response = await fetch(url);
        return response.json();
      }));

    console.log("Users  : ", users);
    console.log("Posts  : ", posts);
    console.log("Albums  : ", albums);
  } catch (err) {
    console.log('Ooooops!!', err);
  }
}

// do exactly what this one does above by 
// using by "for await of"
const getData2 = async function () {
  const arrayOfPromises = urls.map(url => fetch(url));

  for await (let request of arrayOfPromises) {
    const data = await request.json();
    console.log(data);
  }
}

​

Promise.all

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

반환한 프로미스의 이행 결과값은 (프로미스가 아닌 값을 포함하여) 매개변수로 주어진 순회 가능한 객체에 포함된 모든 값을 담은 배열입니다.

주어진 프로미스 중 하나라도 거부하면, 다른 프로미스의 이행 여부에 상관없이 첫 번째 거부 이유를 사용해 거부합니다.

Promise.all은 주어진 순회 가능한 객체가 비어있는 경우에만 동기적으로 이행됩니다.

var p = Promise.all([]); // 즉시 이행함
var p2 = Promise.all([1337, "hi"]); // 프로미스가 아닌 값은 무시하지만 비동기적으로 실행됨
console.log(p);
console.log(p2);
setTimeout(function() {
    console.log('the stack is now empty');
    console.log(p2);
});

// 출력
// Promise { <state>: "fulfilled", <value>: Array[0] } // p
// Promise { <state>: "pending" } // p2
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] } // p2

--- MDN 예제가 매우 도움이 되는구만☺

​

139. Job Queue

Promise는 최근에 추가되어서
이 추가사항을 수용accommodate 하기 위해서
기존의 Event Loop를 변경해야했다.

ECMA script에서는 Promise 를 위해서 원래 가지고 있던 Callback Queue 을 사용하는 것 대신에 다른 큐가 필요하다고 했다.

그거슨 바로 ‘Job Queue’이다! (혹은 Microtask Queue)

 

Job Queue는 콜백큐에 비해서 smaller 하지만 더 높은 우선순위를 가진다.
(Event Loop가 처리할 때)

 

JAVASCRIPT RUNTIME 다이어그램을 다시 보자

 

 

Event Loop 는 먼저 Jop Queue 를 체킹하고
콜스택이 비었을때 요거 먼저 처리한다.

// Callback Queue
setTimeout(() => {
  console.log('1', 'is the loneliest number')
}, 0);
setTimeout(() => {
  console.log('2', 'can be as bad as one')
}, 0);

// 2 Job Queue - Microtask Queue
Promise.resolve('hi').then((data) => console.log('2', data));

// 3
console.log('3', 'is a crowd');

---output---

3 is a crowd >> 비동기가 아닌 애는 먼저 처리되고
2 hi >> 이벤트큐: 헤이잡큐!! 뭐갖고있는거있니? / 잡큐: ㅇㅇ이거있엉
undefined >> JS file 끗
1 is the loneliest number >> 이벤트큐: 헤이잡큐!! 뭐갖고있는거있니? / 잡큐: ㄴㄴ없엉!! 이제 콜백큐한테 가도돼!!
2 can be as bad as one

어떤 레거시 브라우저는 잡큐가 없기도하지만 대부분 스탠다드를 따른다.

​

140. Parallel, Sequence and Race

multiple promises를 처리하는데 있어서 세 가지 방법이 있다.

1. in parallel (start all at the same time)
2. sequential (they're all dependent on each other)
3. race (one comes back first and ignores the rest.)

​

const promisify = (item, delay) =>
  new Promise((resolve) =>
    setTimeout(() =>
      resolve(item), delay));

const a = () => promisify('a', 100);
const b = () => promisify('b', 5000);
const c = () => promisify('c', 3000);

위의 3개의 multiple promises를 각 방법으로 처리해보자

​

1) Parallel

async function parallel() {
  const promises = [a(), b(), c()];
  const [output1, output2, output3] = await Promise.all(promises);
  return `parallel is done: ${output1} ${output2} ${output3}`
}

parallel().then(console.log);

// --output--
// (0초후) Promise {<pending>}
// (5초후) parallel is done: a b c

​

2) Race

async function race() {
  const promises = [a(), b(), c()];
  const output1 = await Promise.race(promises);
  return `race is done: ${output1}`;
}

race().then(console.log);

// -- output --
// (  0초후) Promise {<pending>}
// (0.1초후) race is done: a

​

3) Sequential

async function sequence() {
  const output1 = await a();
  const output2 = await b();
  const output3 = await c();
  return `sequence is done ${output1} ${output2} ${output3}`
}

sequence().then(console.log);
// -- output --
// (  0초후) Promise {<pending>}
// (8.1초후) sequence is done a b c

​

+ 셋 다 한꺼번에 하면...?

parallel().then(console.log);
sequence().then(console.log);
race().then(console.log);

// -- output --
// (  0초후) 01:12:56.033 Promise {<pending>}
// (0.1초후) 01:12:56.139 race is done: a
// (  5초후) 01:13:01.033 parallel is done: a b c
// (8.1초후) 01:13:04.166 sequence is done a b c

​

 

 

출처 : Udemy - JavaScript: The Advanced Concept
https://www.udemy.com/course/advanced-javascript-concepts