Section 17: Asynchronous Code - Code That "Takes a Bit Longer"

The goals

💪🏻What is "Async Code"?

✌🏻Working with Callbacks

👍🏻Promises

👊🏻async / await

 

quiz

질문 1:

동기 코드와 비동기 코드의 차이는 무엇일까요?

• 동기 코드는 행 단위로 실행되고 비동기 코드는 일부 작업(예: 타이머)이 완료되면 실행됩니다.

• 동기 코드는 비동기 코드(예: 타이머)가 발견될 때까지 실행되고 이 경우 해당 코드가 실행이 완료될 때까지 실행이 일시 중지됩니다.

• 둘 사이에는 차이가 없습니다.

질문 2:

이 코드는 콘솔에 무엇을 출력할까요?

console.log('Starting!);
setTimeout(() => {
  console.log('Timer completed!');
}, 10);
console.log('Finished!');

• 1. Starting!
  2. Timer completed!
  3. Finished!
• 1. Starting!
  2. Finished!
  3. Timer completed!

• 출력 순서가 항상 같은 것은 아닙니다 - CPU와 여러 다른 요인에 따라 달라집니다.

질문 3:

JavaScript는 비동기 코드 실행을 어떻게 처리할까요?

• 다중 스레드로 처리하고 기본 스크립트 실행이 차단되지 않도록 더 오래 걸리는 작업(예: 타이머)을 별도의 스레드로 넘깁니다.

• 단일 스레드로 처리하고 더 오래 걸리는 작업(예: 타이머)이 완료될 때까지 스크립트 실행을 차단합니다.

• 단일 스레드이지만 더 오래 걸리는 작업(예: 타이머)을 (다중 스레드를 사용하는) 브라우저로 넘깁니다.

 

Instead of having multiple levels and that makes our code way more readable.

 

If we put catch in the middle of the promise code, then all prior then would be skipped.

 

프로미스 상태 & “finally”

여러분은 다양한 프로미스 상태에 대해 배웠습니다.

• PENDING => 프로미스가 작동 중이며then()이나 catch() 가 실행되지 않습니다
• RESOLVED =>  프로미스가 해결됐습니다 => then()이 실행됩니다
• REJECTED  => · 프로미스가 거절됐습니다=> catch()이 실행됩니다

catch()나 then() 블록 다음에 또 다른 then() 블록이 있으면 프로미스가 PENDING 모드로 다시 들어갑니다. (참고: then()과 catch()는 항상 새로운 프로미스를 반환합니다 - 어떤 것으로도 해결되지 않거나then()내부에서 return한 것으로 해결됩니다). 더 이상 then() 블록이 남아 있지 않은 경우에만 아래의 최종 모드로 들어갑니다. SETTLED.

SETTLED가 되면 특수 블록인 finally()로 최종 정리 작업을 수행할 수 있습니다. 이전에 해결됐든 거부됐든 상관없이 finally()에는 도달합니다.

다음은 예시입니다:

somePromiseCreatingCode()
  .then(firstResult => {
    return 'done with first promise';
  })
  .catch(err => {
    // would handle any errors thrown before
    // implicitly returns a new promise - just like then()
  })
  .finally(() => {
    // the promise is settled now - finally() will NOT return a new promise!
    // you can do final cleanup work here
  });

finally() 블록은 추가할 필요 없습니다(강의에서 하지 않았으니까요).

 

Promise

 

 

Promise.all / Promise.race

 

 

Async / Await

 

 

 

quiz

질문 1:

JavaScript에서 프로미스란 무엇일까요?

• 프로미스는 JavaScript에서 비동기 코드를 작동시키는 유일한 방법입니다.

• 프로미스는 작업을 더 쉽게 하기 위해 (비동기) 코드를 "감싸는" 객체입니다.

• 프로미스는 Http 요청을 백엔드 서버로 보내고 응답으로 작업할 수 있도록 합니다.

많은 비동기 작업의 경우 콜백으로 작업할 수도 있지만 프로미스를 사용하면 비동기 코드로 작업하기가 더 쉽습니다.

 

질문 2:

프로미스의 맥락에서 “체이닝(Chaining)”이란 무엇일까요?

• 각 then() 블록이 새 프로미스를 반환할 수 있으므로(반환할 필요는 없음) 여러 프로미스를 서로 연결할 수 있습니다.

• 이는 프로미스 내에서 다양한 배열 메서드(filter() 등)를 사용할 수 있음을 의미합니다.

• 각 then()과 catch() 메서드는 아직 SETTLED 되어야 하는 새로운 프로미스를 반환하기 때문에 then()과 catch() 메서드를 서로에 연결할 수 있습니다.

오답입니다. 다시 시도하세요.

완전하게 옳은 답은 아닙니다. then() 블록은 아무 것도 반환하지 않더라도 항상 새로운 프로미스를 생성합니다. 참고로 catch() 블록도 마찬가지입니다.

return 문을 추가하지 않더라도 then()과 catch()는 항상 새로운 프로미스를 생성합니다.

 

질문 3:

아래 예에서 마지막 then() 블록이 실행될까요(즉 전달된 함수가 실행될까요)?

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Timer completed!');
  }, 1000);
})
  .then((text) => { throw new Error('Failed!') })
  .catch(err => console.log(err))
  .then(() => console.log('Does that execute?'));

• 그렇습니다!

• 아니오, 이전에 오류가 발생했기 때문입니다.

• 아니오, 프로미스 체인당 두 개 이상의 then()과 catch() 블록을 가질 수 없기 때문입니다.

then()과 catch() 블록이 원하는 만큼 있을 수 있습니다.

catch() 블록을 통해 오류를 처리하는 한 이후에는 then() 블록이 작동할 수 있습니다. catch()는 또한 새로운 프로미스를 반환합니다.

 

질문 4:

async/ await과 프로미스의 차이점은 무엇인가요?

• async/ await는 비동기 코드를 처리에 대해서는 완전히 다른 접근 방식이고 프로미스와 전혀 관련이 없습니다.

• async/ await를 사용하면 비동기 코드를 동기 코드로 전환할 수 있습니다.

• async/ await는 결국 백그라운드에서 여전히 프로미스를 사용하는 코드 변환입니다.

 

질문 5:

아래의 코드와 동일한 프로미스는 무엇일까요?

async function wait() {
  try {
    const result = await doSomething();
    console.log(result);
  } catch (error) {
    console.log('Error!');
  }
}

• 1. function wait() {
  2.   doSomething()
  3.     .catch(error => {
  4.       console.log('Error!');
  5.     })
  6.     .then(result => {
  7.       console.log(result);
  8.     });
  9. }
• 1. function wait() {
  2.   doSomething()
  3.     .then(result => {
  4.       console.log(result);
  5.     })
  6.     .catch(error => {
  7.       console.log('Error!');
  8.     });
  9. }
• 1. function wait() {
  2.   doSomething()
  3.     .then(result => {
  4.        try {
  5.           console.log(result);
  6.        } catch (error) {
  7.           console.log('Error!');
  8.        }
  9.    });
  10. }