Fetch와 Promise

 

Fetch는 Promise를 반환한다...?

첨에 무슨소리지 했는데 말그대로다.

fetch는 서버 통신을 위한 함수고, 통신이 시간이 걸리니까 Promise 객체를 뱉는다.

const 결과 = fetch('URL');
console.log(결과); // Promise 객체가 나옴

 

위코드를 콘솔에 찍어보면 요렇게 나옴

 

에러는 무시하고 fetch안에 Promise를 저렇게 보여주게된다.

내장 메서드들을 보면 .then 외에 .cath,constructor, finally, symbol 등 어디선가 한번쯤 봤었던 친구들이 많은데

요것들은 아래에 천천히 설명하도록 하겠다

 

 

 

Promise - 결과를 약속해줄게

이름 그대로 약속이란 의미로 

비동기 작업, 즉 지금 당장은 값이 없지만 나중에 성공이나 실패할때 결과를 나타내는 객체라고 말할수있겠다.

 

// 이건 뭐지?
new Promise((resolve, reject) => {
  resolve("완료");
});

// 이것도 Promise인데 왜 이렇게 생김?
fetch('URL').then(data => console.log(data));

 

Promise 만드는 법은 생성자 new 를 쓰고 파라미터로 성공과 실패를 넣어주면 된다.

그러나 이건 만들기일뿐 사용하려면 Promise가 내장하고 있는 😵‍💫메서드체이닝😵‍💫을 통해 후속처리를 가능하다.

 

....메서드체이닝..?

들엇을때 또 어려울까봐 동공지진했지만 알고보면 뭐 별거없다.

Fetch 설명에서 콘솔에 Promise 객체를 살펴봤듯이 내장되어있는 메서드들이 있다.

• .then() - 성공 했을때
• .catch() - 실패 했을때
• .finally() - 성공/실패 상관없이 무조건 실행

 

요거밖에 없다. 예시코드를 보면 더 이해가 잘간다. 👇

fetch('https://api.example.com/user')
  .then(response => {
    if (!response.ok) {
      throw new Error('서버 응답 실패');
    }
    return response.json();
  })
  .then(data => {
    console.log("데이터:", data);
  })
  .catch(error => {
    console.error("에러:", error);
  })
  .finally(() => {
    console.log("요청 완료");
  });

 

 

Promise 다루는방법도 여러가지임

Promise.all() - 모두 성공해야 성공

여러 요청을 동시에 보내고 모두 완료될 때까지 기다린다.

const user = fetch('https://api.example.com/user');
const posts = fetch('https://api.example.com/posts');
const comments = fetch('https://api.example.com/comments');

Promise.all([user, posts, comments])
  .then(responses => {
    // 모두 성공했을 때만 실행
    console.log("모든 요청 완료", responses);
  })
  .catch(error => {
    // 하나라도 실패하면 실행
    console.error("요청 실패", error);
  });

 

Promise.allSettled() - 성공/실패 상관없이 모든 결과 받기

Promise.allSettled([user, posts, comments])
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log("성공:", result.value);
      } else {
        console.log("실패:", result.reason);
      }
    });
  });

 

Promise.race() - 가장 먼저 완료되는 것만

const slow = fetch('https://slow-api.com/data');
const fast = fetch('https://fast-api.com/data');

Promise.race([slow, fast])
  .then(result => {
    console.log("가장 빠른 응답:", result);
  });

 

 

async/await로 더 쉽게

async/await 그건또 뭔데....동공지진2가 일어났지만 침착하게 클로드에게 물어보았다.

.then이 남발하면 코드읽기가 어려우니 동기코드처럼 보이게 만들수있는, Promise를 더 쉽게쓰기 위한 문법일뿐이다.

 

비교해보삼 👇

// then() 방식
function getUser() {
  fetch('https://api.example.com/user')
    .then(response => response.json())
    .then(user => {
      console.log(user);
      return fetch(`https://api.example.com/posts/${user.id}`);
    })
    .then(response => response.json())
    .then(posts => {
      console.log(posts);
    })
    .catch(error => console.error(error));
}

// async/await 방식
async function getUser() {
  try {
    const response = await fetch('https://api.example.com/user');
    const user = await response.json();
    console.log(user);
    
    const postsResponse = await fetch(`https://api.example.com/posts/${user.id}`);
    const posts = await postsResponse.json();
    console.log(posts);
  } catch (error) {
    console.error(error);
  }
}

 

클로드가 훨씬 읽기쉽지 않느냐는데 솔직히 나는 잘 모르겠다.

핵심은 await은 Promise가 완료될때까지 기다리는 키워드로, 결국 Promise를 쓰는것이다.

 

 

---

 

JS는 정말 심오한 언어라고 생각한다.... 비동기까지는 괜찮았다. (진짜다) 

Fetch와 Promise는 개념을 배워도 비슷하게 생긴게 어떤관계인지 잘이해하지 못했는데

이번 수업으로 완전히까진 아니지만 드디어 어떤 동작원리로 돌아가는건지 머리에 넣을수있게 되었다

JS를 마스터하는 그날까지.