[Javascript] fetch()와 promise / then 비동기처리

개인과제는 물론 팀과제 때에도 fetch라는 함수를 그냥 썼지,

분석하고 공부하고 쓴 것이 아니라서 오늘 전반적인 내용을 이해하고

과제에는 쓰지 않았던 await을 공부하며 TIL을 작성할 계획이다.

 

우선 비동기 처리라는 의미를 알아보자

 

비동기 처리는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고

다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.

만약 무수히 많은 데이터를 요청했을 때, 그 서버에서 언제 응답을 줄지도 모르는데

마냥 기다리기만 한다면 실행하고 기다리고, 실행하고 기다리는 것이 반복되고

이것은 시간이 오래 걸릴 수 밖에 없는 비효율적인 구조가 된다.

그래서 비동기 처리가 필요하다!

 

자바스크립트에서 fetch는 리소스를 비동기 요청을 할 수 있다.

주로 API를 호출하고 응답 데이터를 받아오는 데에 사용한다.

 

 

API 리소스 샘플 제공은 --> https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

 

fetch("https://jsonplaceholder.typicode.com/todos/1")
// promise 객체 반환
.then(function(response){
  return response.json();
})
.then(function(json){
  console.log(json);
})



// 화살표 함수
fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => response.json())
  .then((data) => console.log(data));

데이터 값이 잘 들어왔다

 

fetch 에는 기본적으로 첫 번째 인자에 요청할 url이 들어간다.

default로 http 메소드 중 GET으로 동작!

 

호출 시, 해당 주소에 요청 -> 응답 객체를 받는다 -> 첫 번째 then 응답받기 ->

json 메서드로 파싱한 json 값을 리턴 -> 그 다음 then 에서 리턴 받은 json 값을 받고, 원하는 처리 가능

 

 

 

then() 메서드는 promise를 리턴하고 두 개의 콜백 함수를 인수로 받는다.

하나는 promise가 이행(resolve)했을 때, 다른 하나는 거부(reject) 했을 때를 위한 콜백함수이다.

 

  const promise = new Promise((resolve, reject) => {
    resolve('Success!');
  })

  promise.then((val) => {
    console.log(val);
  });

 

 

 

 

 

---