JS-ellie-Callback/promise/async & await

06 Feb 2021

* Callback

1.동기와 비동기

- 동기 : JavaScript is synchronous.(자바스크립트는 동기적 이다) 
 : hoisting 이 된 이후 부터 코드가 작성한 순서에 맞춰 하나씩 동기적으로 실행된다
- 비동기 : 언제 코드가 실행될지 예측 할 수 없다

2.콜백

- Synchronous callback : 즉각적으로 동기적으로 실행하는 콜백
- Asynchronous callback : 언제실행될지 예측할 수 없는 콜백

* promise

** promise : JavaScript 안에 내장되어 있는 object 이다 : 비동기적인 것을 수행할 때 callback 함수 대신에 유용하게 사용 가능하다

1.Promise 만들기 (Producer)

Ex)

  const promise = new promise((resolve, reject)=>{ // reject : 실패 했을 때 실행
      // doing some heavy work ()
      setTimeout(()=>{ // setTimeout을 이용해 2초 뒤에 수행 하도록한다
          resolve('ellie'); // 성공적으로 수행한다면 resolve라는 callback함수를 호출한다

      ,2000});

  }); // promise 를 만드는 순간 전달한 함수가 바로 실행된다 (when new Promise is created, the executor runs autimatically.)

2.Promise 사용하기(Consumers) : then, catch, finally 를 이용해 값을 받아올 수 있다

Ex)

  promise.then((value) =>{ // promise.then(값이 정상적으로 잘 실행이 된다면)값을 받아온다 
      // value : promise가 정상적으로 실행 되어서 마지막에 resolve라는 callback 함수를 통해
      // 전달한 값이 value의 매개변수로 전달되어 들어온다
  });

  promise.catch(error => { 
      console.log(error); // error가 발생했을 때 어떻게 처리할 건지 callback 함수를 등록해주면 된다
  }); 

  promise.finally(() => {console.log('finally');

  }); // 성공하던 실패하던 상관없이 무조건 마지막에 호출된다 : 아무런 인자를 받지 않는다

* async & await

** async & await : promise 를 조금더 간편하게 동기적으로 표현할수 있게 해주는 API

1.async 사용하기 : 함수 앞에 async 를 붙혀준다 => 자동적으로 함수안에 있는 코드블럭들이 promise로 바뀐다

Ex)

  async function fetchUser(){ 
      // do network request in 10 secs...
      return 'ellie';
  }
  const user = fetchUser();
  user.then(console.log);
  console.log(user);

2.await : async가 붙은 함수 안에서만 사용이 가능하다 => await를 사용하면 promise에서 지정한 시간을 기다려 준후 실행된다