CH08. 비동기처리

- 동기(Sync)

: 순차적으로 코드 실행

- 비동기(Async)

: 순차적으로 코드 실행X

🐚콜백 패턴

: 함수의 인수로 전달되는 또 다른 함수, 실행 순서를 보장함

const a = (callback) => {     //callback 매개변수에 a()의 인수 들어감
  setTimeout(() => {
    console.log(1)    //1 출력
    callback()       //callback 함수를 호출해서 실행위치 조절 => b 함수 호출
  }, 1000)     //1초 지연
}

const b = () => console.log(2)

a(() => {
  b()          //콜백지옥 발생할 수 있음
})

실행결과:
(1초지연 후)
1
2

• 단, 콜백 지옥 문제 발생

---

🐚Promise 클래스

: 콜백지옥 해결을 위해 사용할 수 있는 방법

const a = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(1)
      resolve()     //callback함수 기능
    }, 1000)
  })
}
const b = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(2)
      resolve()     //callback함수 기능
    }, 1000)
  })
}

const c = () => console.log(3)

//수정부분
a().then(() => {
  return b()
}),then(() => {  //then으로 전달되는 함수는 resolve로 들어감
  return c()
})

//아래로 코드수정 가능
a()
	.then(b)
	.then(c)

실행결과:
(1초지연 후)
1
2
3

---

🐚await, async

• 뒤쪽에 있는 비동기 함수의 실행을 기다리는 키워드 await
• then 메소드 사용하는 패턴보다 효율적으로 비동기 패턴 관리 가능
• promise 인스턴스가 반환되어야지만 사용가능
• async 키워드가 붙어있는 함수로 감싸서 사용해야함

const a = () => {   //a함수는 비동기 코드
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(1)
      resolve()     //b함수 동작
    }, 1000)
  })
}
const b = () => console.log(2)

const wrap = async() => {
  await a()
  b()
}
wrap()

실행결과:
(1초지연 후)
1
2

---

🐚에러핸들링

> 콜백 함수를 사용한 에러핸들링

const delayAdd = (index, cb, errorCb => {   //cb는 콜백
  setTime(() => {
    if (index > 10) {
      errorCb(`${index}는 10보다 클 수 없습니다.`)
      return
    }
    console.log(index)   //if문 실행시 리턴으로 인해 아래 코드는 실행되지 않음
    cb(index + 1)
  }, 1000)
}

delayAdd(
  13,     //매개변수 index가 받음
  res => console.log(res),   //매개변수 cb가 받음, 정상적으로 로직 동작시 콜백 실행 부분
  err => console.error(err)  //매개변수 errorCb가 받음, 정상적으로 처리안될시 콜백 실행 부분
  )

실행결과:
(에러)13는 10보다 클 수 없습니다.

> promise 클래스를 사용한 에러핸들링(resolve와 reject 사용)

const delayAdd = index => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(index>10) {
        reject(`${index}는 10보다 클 수 없습니다.`)  //정상적으로 처리되지 않았을 때 실행
        return
      }
      console.log(index)
      resolve(index + 1)    //정상적으로 처리 되었을 때 실행
    }, 1000)
  })
}

delayAdd(13)  // 매개변수 index 하나이기 때문에 
  .then(res => console.log(res)) //정상적으로 처리되었을때 실행할 콜백함수
  .catch(err => console.error(err))  //reject으로 들어감

실행결과:
(에러)13는 10보다 클 수 없습니다.

• resolve와 reject 둘중 하나가 실행되면 반대 개념은 실행되지 않음
• then과 catch메서드를 사용

> async, await를 사용한 에러핸들링

const delayAdd = index => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(index>10) {
        reject(`${index}는 10보다 클 수 없습니다.`)  
        return
      }
      console.log(index)
      resolve(index + 1)    
    }, 1000)
  })
}

delayAdd(13)  
  .then(res => console.log(res)) 
  .catch(err => console.error(err))  

const wrap = async () => {
  try {           
    const res = await delayAdd(12)
    console.log(res)
  } catch(err) {
    console.error(err)
  }
}
wrap()

실행결과:
(에러)13는 10보다 클 수 없습니다.
(에러)13는 10보다 클 수 없습니다.

• try catch 구문 사용
  : 에러가 발생하는 코드가 있으면 바로 catch구문으로 넘어가서 실행

>> finally 구문(예외처리)

:실행 결과와 상관없이 무조건 실행되는 구문

delayAdd(13)  
  .then(res => console.log(res)) 
  .catch(err => console.error(err))  
  .finally(() => console.log('Done!'))  //finally 구문

const wrap = async () => {
  try {           
    const res = await delayAdd(12)
    console.log(res)
  } catch(err) {
    console.error(err)
  } finally {
    console.log('Done!')  //finally 구문
  }
}

실행결과:
(에러)13는 10보다 클 수 없습니다.
Done!
(에러)13는 10보다 클 수 없습니다.
Done!

🐚반복문에서 비동기 처리

• 비동기 코드를 매 반복마다 기다려서 실행해야 할 경우

//위 코드 생략

const titles = ['frozen', 'avengers', 'avatar']

const wrap = async () => {
  for (const title of titles) {    //배열 반복문이므로 for of 사용
    const movies = await getMovies(title)
    console.log(title, movies)
  }
}
wrap()

실행결과:
frozen
avengers
avatar
(실행시 항상 같은 순서로 출력됨)

🐚fetch(주소, 옵션)

• 네크워크를 통해 리소스의 요청(Request) 및 응답(Response)을 처리할 수 있음
• fetch 함수를 통해 가지고 온 응답의 결과에서 json 메소드를 호출해야지만 데이터를 꺼낼 수 있음
• then 메소드가 Promise 인스턴스를 반환

> then 메서드 사용방법

fetch(url)   
	.then(res =>  res.json())
	.then(json => console.log(json))

> async, await 사용 방법

fetch(url)   
	.then(res =>  res.json())
	.then(json => console.log(json))

const wrap = async () => {
  const res = await fetch(url)
  const json = await res.json()
  console.log(json)
}
wrap()

> 대표적인 옵션

fetch(url, {
  method: 'GET' //어떤 값을 얻어낼때 사용(delete, post, put 사용가능)
  headers: {     //서버로 전송하는 요청에 대한 정보를 담음
	'Content-Type': 'application/json'  //json이라는 데이터의 포맷으로 통신
  },  
  body: JSON.stringfy{{	//요청에 대한 데이터를 담아 전송, 모두 문자화해줘야 함
      name: ksw,   
      age: 25
  }      
})   
	.then(res =>  res.json())
	.then(json => console.log(json))