[TIL] JS: 드림코딩 강의노트 05

Asynchronouse 비동기 처리

• Synchronous 동기: JavaScript는 위에서부터 아래로 순차적으로 실행한다.
• Asynchronouse 비동기: 언제 코드가 실행될 지 예측할 수 없다.

Callback

비동기 처리의 시작.

console.log('1');
setTimeout(()=> console.log('2'),1000); // 1초 뒤에 실행되는 Callback함수
console.log('3')'
/*
1
3
2
*/

Promise

Promise를 이용하여 콜백 지옥에서 벗어날 수 있다.

• State: pending -> fulfilled or rejected
• Producer
  비동기적으로 실행하고 싶은 코드를 작성하고, 성공 resolve, 실패 reject를 호출한다.
• 새로운 promise는 만들자마자 자동실행된다.

const promise = new Promise((resolve, reject) =>{
  console.log('doing something...');
  setTimeout(()=>{
    // resolve('naeun');
    // reject(new Error('no network'));
  }, 2000);
});

• Consumer: then, catch, finally

promise
  .then(value => {
  console.log(value); // naeun 성공했을 때 실행하는 함수 .then
})
  .catch(error => {
  console.log(error); // 'no network' error 실패했을 때 실행하는 함수 .catch
})
.finally(() => {
  console.log('finally'); // finally 성공하든 실패하든 언제든지 출력된다.
})

Async

promise를 간단하게 사용하는 방법!

function fetchUser() {
  return new Promise((resolve, reject) => {
    resolve('naeun');
  });
}

async function fetchUser() {
  return 'naeun';
}

• Await
  async 안에서 사용하여 기다리는 시간을 부여할 수 있다.

Promise APIs

이게 뭔소리얍!!?!? ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ