fetch API (response object, json)

 

fetch

---

fetch 함수는 브라우저에 내장된 자바스크립트 함수이다. (window.fetch)

웹브라우저가 통신할 때 fetch API를 사용한다.

fetch API는 promise를 사용한다

-> 비동기적으로 사용할 수 있다

JSON placeholder 에서 API를 가져와 실습할 수 있음

웹브라우저에서 자바스크립트 이용해 웹서버에 접속하고 정보를 가져오는 것 - Ajax

 

 

 

 

구성 fetch( API 주소 {,옵션}).then()

fetch("API주소").then(res => console.log(res))
//응답 객체 Rsponse 출력

fetch 함수는 promise타입의 객체를 반환함.

반환된 promise로부터 then 메소드를 이용해 응답 객체(response)를 얻을 수 있다.

 

 

 

 

 

 

 

response object

---

promise를 사용하는 이유는, 비동기적인 작업을 처리할 때, 성공 실패 여부를 표준화된 방식으로 처리할 수 있게 해주기 때문이다.

fetch('URL주소')
	.then(function(response){
    	console.log('response', response);
     })
     .catch(function(reason){
     	console.log('reason', reason);
     });

fetch 함수는 promise타입의 객체를 반환한다.

반환된 promise로부터 then 메소드를 이용해 응답 객체(response)를 얻을 수 있다.

fetch가 promise를 반환했기 때문에, then과 catch를 사용할 수 있다.

then과 catch는 각각 콜백함수를 가질 수 있다. 예시의 익명함수.

then의 파라미터는 response, catch는 reason이 담긴다.

fetch를 통해 실행한 결과가 성공했을 때, then으로 전달된 콜백함수가 호출된다.

호출되며 그 결과값이 있다면, 첫번째 인자(response)로 받을 수 있다.

실패를 하면 catch 안의 콜백 함수가 호출된다. 그 파라미터로는 실패의 이유가 들어옴.

실패시 response 객체 안나옴.

 

 

 

 

 

 

 

 

 

fetch함수와 json 메서드

---

fetch 함수로 가져온 데이터(response)는 json데이터 타입이다.

node.js에서는 브라우저처럼 윈도우 객체가 없기 때문에 fetch 함수를 쓸 수 없다. 자바스크립트로 사용해야한다.

하지만, 자바스크립트의 데이터 타입으로 변환하는 과정이 필요하다.

fetch("API주소")
	.then(function(response) {
    	return response.json();  //---- 1
     })
     .then(function(data) {    //---- 2
    	console.log(data);
     });

1 응답객체에 json 메서드를 사용해서 자바스크립트 데이터 타입으로 바꾼다.

    => promise 객체가 반환됨

2 promise를 다시 then을 사용해 자바스크립트 타입으로 바뀐 data를 출력함

 

 

 

 

 

promise의 state

promise를 사용하면 pending
결과가 성공일 때(resolve), then으로 전달된 콜백함수가 호출된다.
실패 시(reject), catch로 전달된 콜백함수가 호출된다.
then이나 catch가 실행되면 또 promise pending 상태가 된다.
다시 then, catch...
(then 은 무조건 promise를 리턴한다)

 

 

 

 

 

 

reference

---

https://www.youtube.com/watch?v=Sn0ublt7CWM&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=2 

https://www.youtube.com/watch?v=jBMBTI2AsTA&t=4s 

https://jsonplaceholder.typicode.com/