TIL. fetch()와 Promise

✍️ fetch() + promise 기초 복습

fetch 사용법

fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다.
반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다.

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

• 옵션(options) 객체에는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있다.

• 응답(response) 객체로 부터는 HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있다.

• fetch() 함수는 브라우저의 window 객체에 소속되어 있기 때문에 window.fetch()로 사용되기도 한다.

fetch 사용하기

1. 주소를 전달하고 실행하기

fetch('https://jsonplaceholder.typicode.com/posts')  // 1)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {  // 2)
    console.log(myJson);
  });

1) 주소를 전달하고 실행한다.
2) myJson이라는 파라미터를 통해서 웹 서버가 return해준 JSON데이터 타입을 JavaScript데이터 타입에 맞게 변환(converting)한 결과를 가져올 수 있다.

▼ JSON타입의 텍스트들을 위의 코드를 통해서 JS 데이터 타입으로 가져올 수 있다.
→ 이 데이터를 통해서 여러가지 작업 처리가 가능해진다.

2. 비동기 처리과정을 확인해보기

서버와의 통신, 즉 언제 끝날지 알 수 없는 처리들은 비동기적으로 처리하는 경우가 많다.

console.log(1)  // 1)
fetch('https://jsonplaceholder.typicode.com/posts')  
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);  // 3)
  });
console.log(2)  // 2)

콘솔에 출력된 순서 1) → 2) → 3)

3. fetch함수 리턴값 확인하기

const fetched = fetch('https://jsonplaceholder.typicode.com/posts');
console.log(fetched)

패치함수에서는 Promise 데이터 타입을 리턴하고 있다.

✍️ 확인하기
1) 어떤 함수를 사용할 때, 그 함수의 리턴값이 promise라면 비동기적으로 동작하는 함수일 가능성이 높다.
2) 그 함수가 리턴한 값은 두 개의 메소드 then() , catch() 를 사용할 수 있다. 이 둘은 콜백함수를 받는다.

4. 반환된 Promise 객체 확인하기

const fetched = fetch('https://jsonplaceholder.typicode.com/posts');

fetched.then(function(response){ // 성공했을 경우 Response object를 반환
  console.log(response);
});
fetched.catch(function(reason){ // 실패할 경우 catch로 전달된 콜백함수 실행
  console.log(reason)
});


// ▼ 코드 정리

//promise를 리턴하기 때문에 일반적으로 변수처리를 하지 않는다. (세미콜론도 제거)
fetch('https://jsonplaceholder.typicode.com/posts')
	//fecth 함수 호출뒤에 나오는 리턴값이 promise이므로 then을 바로 붙인다.
	.then(function(response){ 
  	console.log(response);
	})
	// then 실행 이후 또다시 promise를 반환하므로, 변수처리를 하지않고 promise체이닝을 이용한다.
	.catch(function(reason){ 
	  console.log(reason)
	});

✍️ promise를 사용하는 이유
비동기적인 작업을 처리할 때 작업의 성공실패 여부에 따라, 위와 같이 표준화된 방식으로 처리할 수 있도록 한다.

5. promise를 사용하는 방법

5-1) Nested promise 방식
: then 안에서 then을 사용한다.

fetch('https://jsonplaceholder.typicode.com/posts')
	.then(function(response){ 
		response.json().then(function(data){ // 1)
          console.log(data);  // 2)
    	});
	})
	.catch(function(reason){ 
	  console.log(reason)
	});

response.json()

• response가 가지고 있는 메서드중 하나이다. (response.text 등이 있다.)
• 응답(response)객체로 부터 JSON 포맷의 응답 전문을 자바스크립트 객체로 변환하여 얻을 수 있다.
• 즉, 자바스크립트에게 이 데이터가 json 데이터 타입이라는 것을 알려주며, 웹브라우저는 json타입에 맞게 데이터를 해석해서 JS데이터 타입으로 돌려준다.
• 리턴값은 Promise이다. (json데이터를 js데이터로 컨버팅하는 promise)

1) 리턴값은 promise 이므로 .then 과 .catch 를 사용할 수 있고 콜백 함수가 들어간다. 그리고 그 결과값을 첫번째 파라미터로 받는다.
2) 실행 결과 data에 들어온 값
: json 텍스트를 자바스크립트 데이터 타입으로 바꾼 데이터가 들어왔다. JS데이터 타입이므로 여러 작업들을 이어서 할 수 있게된다.

5-2) promise chaining 방식
: then안에서 promise를 리턴한다. 그리고 바깥에서 then을 연결, 사용한다

▼ 보통은 아래와 같은 형식으로 사용한다.

fetch('https://jsonplaceholder.typicode.com/posts')
	.then(function(response){ 
		return response.json();
	})
	.catch(function(reason){ 
	  console.log(reason)
	})
    .then(function(data){
      console.log(data);
    })

// ▼ 
fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .catch((error) => console.log(reason))
  .then((data) => console.log(data));

✍️ promise 정리

• promise를 사용하면 그 즉시 pending 상태(대기, 진행중)이다.
• 그 결과가 성공하면 .then() 으로 전달된 함수를 호출(resolved 상태) 하고, 에러가 발생하면 .catch() 로 전달된 함수를 호출(rejected 상태) 한다.
• 여기서 .then() 이거나 .catch() 이거나 새로운 promise를 리턴하면 다시 pending 상태가 시작되어 다시 .then()과 .catch()를 사용한다.
• promise 총정리

reference
daleseo fetch()
MDN_fetch()
coding everybody