TIL 20

비동기 처리란 무엇인가?

특정 로직의 실행이 끝날 때까지 기다리지 않고 다른 코드를 먼저 실행하는 것

비동기 처리는 왜 필요한가?

비동기 처리가 없다면 특정 요청에 대한 응답이 끝나기 전까지 사용자는 아무것도 할 수 없음
요청-응답, 요청-응답을 반복하는 것은 많은 단점을 수반함

how: 비동기 처리는 어떻게 하는가?

1. callback 함수 사용

const printString = (string, callback) => {
  setTimeout(
    () => {
      console.log(string)
      callback()
    },
   	Math.floor(Math.random() * 100) + 1
  )
}

const printAll = () => {
  printString("A", () => {
    printString("B", () => {
      printString("C", () => {})
    })
  })
}

printAll()

2. Promise

Promise 객체를 사용하여 비동기를 처리하는 방법도 있다.
Promise는 콜백지옥을 예방하고, 호출 순서 및 에러를 효과적으로 제어할 수 있다.

기존에 콜백에서는 에러 처리를 하기 위해서는 콜백을 처리할 때마다 에러를 같이 처리해야 하는데, Promise의 마지막 chain에 .catch로 에러를 잡아낼 수 있다.

const addingNum = (number) => { // 콜백을 인자로 받지 않는다
  return new Promise((resolve, reject) => { // 새로운 Promise 인스턴스를 리턴한다
  // resolve와 reject라는 인자를 받는, Promise만의 콜백을 받는다
    setTimeout(() => {
        resolve(number)
      }, 500)
  })
}

const addAll = () => {
  addingNum(3) // 콜백을 인자로 받는게 아니라 .then으로 이어나간다
  .then((result) => {
    console.log(result) // 3
    return result + addingNum(4)
  })
  .then((result) => {
    console.log(result) // 7
    return result + addingNum(5)
  })
  .then(function(result) {
    console.log(result) // 12
  }
}

3. async

async/await을 사용하면 비동기 함수를 동기 함수를 사용하듯 표현할 수 있음

function upIntheMorning() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve(`1. up in the morning`) }, 500)
  })
}

function brushTeeth() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve(`2. brush teeth`) }, 400)
  })
}

function changeClothes() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve(`3. change clothes`) }, 200)
  })
}

const result = async () => { // async 함수임을 표현해야
  const one = await upIntheMorning(); // await를 사용할 수 있다
  console.log(one)
  
  const one = await brushTeeth();
  console.log(two)
  
  const one = await changeClothes();
  console.log(three)
}

result();

fetch API를 사용한 비동기 처리

코드

function getNewsAndWeather() {
  let obj = {};
  return fetch(newsURL)
  .then((response) => response.json())
  .then((response) => {
    obj.news = response.data
    return fetch(weatherURL)
  })
  .then((response) => response.json())
  .then((response) => {
    obj.weather = response
    return obj
  })
}

뜯어보기

fetch(newsURL)
.then((response) => console.log(response))

fetch 후 응답값이 Response 객체임을 알 수 있다.
newsURL이 가지고 있는 데이터가 아니라 type, url, 응답상태 등 newsURL 자체의 정보를 담고있다.

---

fetch(newsURL)
.then((response) => console.log(response.json()))

fetch 후, 이를 json() 메소드로 자바스크립트 객체로 바꾸고 나면 newsURL에 담긴 데이터에 접근이 가능하다.

즉, json() 메소드는 Promise를 리턴한다.