[JS] Promise (then, catch)

서준·2023년 7월 13일

이번 Promise 포스팅은 생활코딩님의 강의를 바탕으로 작성했습니다.

Synchronus VS Asynchronous

Promise를 공부하기에 앞서 이해해야 될 개념인 동기, 비동기의 개념에 대해 먼저 짚고 넘어가겠습니다.

동기 기존의 명령이 끝난 뒤 순차적으로 실행

console.log(1)
console.log(2)
console.log(3)
console.log(4)
// 1
// 2
// 3
// 4

비동기 순서와 상관없이 처리할 수 있는 코드를 동시에 실행 (멀티태스킹)

console.log(1)
console.log(2)
setTimeout(function(){ console.log(3)}, 5000);
console.log(4)
// 1
// 2
// 4
// 5초후 -> 3

장단점

먼저 동기적 실행의 장점은 위 그림에서도 알 수 있듯 실행이 순차적 으로 진행되기 때문에 어떻게 실행될 것인지를 파악하기가 쉽습니다.

반면 비동적으로 실행하게 되면 동시다발적으로 실행이 이루어지기 때문에 동기적으로 실행될 때보다 혼란스럽고 복잡하다고 느낄 수 있지만 그렇기에 동기적으로 실행했을 때와 비교했을때 실행속도가 훨씬 빠르다는 장점이 있습니다.

그렇다면 비동기는 언제 사용해야 할까? 🤔

장기간 소요되는 작업, 서버와의 통신 , 파일 로딩 등과 같은 작업을 수행할 때
ex) 서버와 통신 중일 때 동기적인 방식으로 작업을 진행하면 그 작업이 완료될 때 까지
전체 프로그램이 멈추는 현상이 발생이 된다 -> 사용자의 경험을 저하시킴 -> 문제 해결을 위해 비동기 처리 사용

서버와의 통신을 통해 Promise 이해하기

fetch API를 통해 Promise의 작동원리에 대해 구체적으로 알아보겠습니다.

서버에서 받아올 데이터가 없기 때문에 JSON Placeholder를 통해 예제 데이터를 가져와 사용하였습니다.

console.log(1);
// 주소를 전달하면
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(function(response) {
    return response.json();
  })
   // myJson 이라는 파라미터를 통해
	// 웹서버가 리턴해준 json데이터 타입을
	// 자바스크립트가 원하는 데이터 타입으로 변환해서 사용할 수 있다
  .then(function(myJson) {
    console.log(myJson);
  });
console.log(2);

결과는 아래 그림과 같습니다.

보이는 것처럼 1과 2가 먼저 찍히고나서 서버와의 통신 작업 된 결과물이 출력되는 것을 확인할 수 있으며 이것은 then 이라는 Promise 때문입니다.

then 은 fetch함수의 method 이며 정확히 이해하기 위해 먼저 fetch 함수에 대해 더 알아보겠습니다.

fetch()

fetch(resource) 
fetch('https://jsonplaceholder.typicode.com/posts')

fetch 함수에는 resource 가 필요합니다. 이 resource는 쉽게 말해 위에서 요청했던 데이터 URL이라 생각하면 쉽습니다.

그렇다면 fetch 함수는 무엇을 반환할까? 🤔

Return value
A Promise that resolves to a Response object

위 영문 내용 MDN 문서의 정이를 한국어로 번역하자면
"fetch 함수는 promise 데이터 타입을 반환하며 반환한 데이터 타입은 Response 객체를 나타낸다." 로 볼 수 있습니다.
이 말의 의미는 아래 코드를 통해 설명하겠습니다.

var fetched = fetch('https://jsonplaceholder.typicode.com/posts')
//fetched라는 변수 안에 resource값을 담은 fetch함수를 전달한 뒤 
console.log(fetched);
//console.log로 fetched 의 값을 확인해보겠습니다

console.log로 fetch 함수의 결과를 출력해보면 위의 내용처럼 promise 데이터 타입을 반환하는 것을 확인할 수 있습니다.

그리고 이 fetch함수에는 사용할 수 있는 두 가지 method 가 있습니다.

.then()
then 메소드는 fetch 함수가 성공적으로 응답을 받았을 때 호출되는 콜백 함수를 받습니다.
이 콜백 함수는 Response 객체를 매개변수로 받아 응답을 처리하거나 변환하는 등의 작업을 수행할 수 있습니다.
.catch()
then 메소드의 콜백 함수 내에서 발생한 오류나 Response 객체를 처리하는 도중에 예외가 발생하면 catch 의 콜백 함수가 호출됩니다.
catch 메소드를 통해 오류를 확인하고 오류에 대한 적절한 조취를 취할 수 있게 됩니다.

아래 코드를 통해 직접 확인해 보겠습니다
임의로 then의 파라미터는 result catch의 파라미터는 reason 이라 하였습니다