TIL Day 26 callback, promise, async/await

동기(syncronose) + blocking

• 하나의 작업이 완료된 후 , 다음 작업이 실행되는 구조
  ex) 커피에 사장님 한 분뿐이라 손님들은 앞 손님의 주문이 끝나고 커피가 나올 때 까지 기다렸다가 주문 해야 함

비동기(asyncronose) +Non-blocking

• 여러 작업이 동시에 진행되는 구조
  ex) 앞 손님의 주문이 끝나고 직원이 커피를 만든다. 따라서 커피가 나오지 않아도 계속해서 주문을 받을 수 있다.

• 단점 : 각 작업이 어느시점에 끝나는지 알기 어렵다.

콜백(callback)

• 다른 함수에게 인자를 전달하는 함수
  기본형태

function A( () => {})

그러나 콜백함수를 반복해서 사용하면 콜백-지옥에 빠질 수 있다.

function A( () => {
  function B ( () => {
    function B ( () => {
      function B ( () => {
        ...
      })
      })
    })
  })
  ...

프로미스(promise)

• 콜백-지옥을 개선하기 위해 개발됐다.
• 동기적/비동기적 데이터를 처리할 수 있다.

promise 객체

const 이름 = new Promise (resolve,reject) => {
  resolve(이름), -> 성공 데이터
  reject(이름) -> 실패 데이터
}

callback 지옥을 개선하는 then(), catch()

const 이름 = new Promise(function(resolve, reject) => {
resolve(이름1),
reject(이름2)
}
.then(first){
  console.log(안녕하세요.) //정상인 resolve 데이터를 받음
.then(second){ //first를 받음
  console.log(반갑습니다.)
.catch(third){ //오류데이터인 reject만 받는다.
  console.log(이름2는 오류다.)
}

promise all

• all() 메소드를 호출하면, 여러개의 promise를 넘겨준다.
• 모든 promise가 fulfiled 되거나, promise가 하나라도 reject 된 경우, promise를 반환한다.

const promise1 = new promise(function(resolve,reject) => {
setTimeout(resolve,2000,"promise1")
})
const promise2 = new promise(function(resolve,reject) => {
setTimeout(resolve,1000,"promise2")
})
promise.all([promise1,promise2])
.then(function(value){
  console.log(value)
})

async & await

callback, promise와 같은 비동기 객체의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 돕는다.

개발자가 읽기 쉬운 코드

var user = {
  id: 1,
  name: 'Josh'
};
if (user.id === 1) {
  console.log(user.name); // Josh
}

//async & await을 적용 전 함수 logName()으로 함수 감싸기
function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

//async & await 적용
 async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

callback, promise 처럼 비동기적으로 데이터를 가져올 필요가 없다.

const readAllUsersAsyncAwait = async () => {
  // TODO: async/await 키워드를 이용해 작성합니다
  const user1 = await getDataFromFilePromise(user1Path)
  const user2 = await getDataFromFilePromise(user2Path)
  return JSON.parse(`[${user1},${user2}]`)
}

대신 예외처리는 promise와 마찬가지로 catch{}를 사용해야 한다.

async function logTodoTitle(){
  try{
    var user = await fetchUser()
    if(user.id === 1){
      var todo = await fetchTodo()
      console.log(todo.title)
    }
  } catch(error){
    console.log(error)
  }
}