👩🏻‍💻 Promise

JavaScript는 비동기 처리가 가능하도록 설계되어있다.
Promise 객체는 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 비동기의 결과를 객체화 시킨다는 점이 Promise의 가장 큰 장점이다.
비동기에 대한 예제를 찾아보다가 일생생활에서의 비동기를 표현한 문장이 있었는데 너무 이해가 잘 되어 나도 남겨본다.

커피숍에서 주문을 받고 음료를 만들고 음료를 서빙 후 다시 재 주문을 받고 음료를 만드는 것이 동기적 처리이며, 모든 사람의 주문을 한꺼번에 받고 음료가 완성되는 대로 사람들에게 서빙을 하는 것이 비동기적 처리이다.

📌 then

then 메서드는 callback함수를 실행한 것과 같은 효과를 나타내어 Promise객체에 붙여서 사용한다.

promise.then(successCallback, failureCallback)

promise.then(function (value) {
  //성공했을 때 실행
}, function (reason) {
  //실패했을 때 실행
});

then 메소드는 promise객체를 리턴하고 두 개의 콜백 함수를 인수로 받는다.

const fetchData = () => {
    asyncFunc() // asyncFunc 함수는 Promise 객체를 반환한다
        .then(response => console.log(response))
		.catch(err => console.log(err))

// 이런 식으로도 가능하다.
const fetchData = () => {
    asyncFunc() // asyncFunc 함수는 Promise 객체를 반환한다
		.then(
			response => console.log(response),
			err => console.log(err)
        )
}

예전에는 callback 함수를 통해 구현했으나 최근에는 async, await로 작업이 완료되면 다음 로직이 진행이 되게끔 지연시키는 방법으로 구현한다.

📌 async, await

const fetchData = async () => {
    const response = await asyncFunc() // asyncFunc 함수는 Promise 객체를 반환한다
    console.log(response)
}

await키워드를 쓰려면 반드시 async키워드로 선언된 함수 내부여야 한다.
asyncFunc함수의 실행결과가 반환되어 result에 할당되기 전까지 await키워드가 console.log 함수의 실행을 지연시켰음을 알 수 있다.

const fetchData = async () => {
    try {
        const response = await asyncFunc()
        console.log(response)
    } catch (err) {
        console.log(err)
    }
}

예외처리도 같이 해준다.

json데이터를 가지고 올 때 then코드를 async, await로 변환시키면 아래구문처럼 표현할 수 있다.

const url = 'http://~';
const fetchData = async (url: string) => {
  try {
    const response = await fetch(url);
    const responseJson = await result.json();
    return responseJson;
  } catch (error) {
    console.error(error);
  }
}

url을 매개변수로 받아서 fetch메서드로 데이터를 가져오고 result.json()을 사용하여 데이터를 JSON형식으로 변환한 다음에 data 변수에 할당한다.
fetch() 메소드는 반환된 Promise를 반환하므로, await키워드를 사용하여 데이터를 가져와 변수에 할당한다. 이제 데이터를 가져올 때까지 기다린 다음 함수를 호출하고 try-catch구문을 사용하여 에러 핸들링도 추가한다.

추가로 fetch메서드asyncFunc생성자로 호출한 것과의 차이점은 fetch()함수는 Promise를 반환하는 AJAX 요청 함수이고, asyncFunc() 함수는 개발자가 직접 작성한 코드이어서 함수 내부에서 사용되는 로직은 다양하다는 점이 차이이다. 그러나 fetch 함수는 표준 웹 API이기 때문에 사용 가능한 옵션 및 메서드가 제한된다.

const url = 'http://~';
fetchData(url)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

이제 fetchData()함수를 호출할 때 URL을 매개변수로 전달하면 해당 URL에서 데이터를 가져오고 처리할 수 있다.

⚠️ async/await구문과 then

const url = 'http://~';
const fetchData = async (url: string) => {
    try {
      await fetch(url)
        .then((response) => response.json())
      return data;
    } catch (error) {
      console.error(error);
    }
  }

이렇게 async/await구문과 then을 같이 쓸 수 있는데 .then() 체인은 Promise 기반 코드의 구현 방식이지만, async/await 구문이 도입된 이후에는 더 이상 권장하지 않는다. async/await 구문을 사용하여 동일한 동작을 수행할 수 있기 때문이다.
따라서 async/await 구문을 사용하여 코드를 개선하는 것이 더 좋다.