[JS] Fetch

 

HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API 인 fetch

 

---

 

Fetch ?

- 비동기 네트워크 통신을 구현하기 위해 사용하는  Web API 

- HTTP 요청 전송 기능을 제공

- Ajax를 지원하는 비교적 최신 기술

- IE를 제외한 대부분 브라우저에서 제공

 

 

 

 

Fetch 함수의 기본 구조 

const promise = fetch(resource, [options])

 

resource : HTTP 요청 보낼 URL (필수)

options : method , headers , body (선택)

             default값은 GET

 

 

 

 

Fetch 함수 동작 과정

 

- fetch 함수는 promise 객체 + 응답 헤더 + 응답몸체 반환

 

- promise 객체엔 HTTP 응답에 관한 정보가 있는 Response 객체가 있다.

 

- 응답헤더엔 status 속성 값을 통해 HTTP 상태 코드를 확인 가능하다.

 

 

HTTP 상태코드 종류
1xx (조건부 응답)	요청을 받았으며 작업을 계속 한다.
2xx (성공)	성공적으로 처리 (대표: 200)
3xx (리다이렉션 완료)	클라이언트는 요청을 마치기 위해 추가 동작을 취해야한다.
4xx (요청 오류)	클라이언트에 오류가 있다. (대표: 404 not Found)
5xx (서버 오류)	서버가 요청을 수행하지 못했다.

 

 

- 응답몸체에 담긴 데이터는 사용자가 원하는 형태로 파싱하여 접근

 

 

 

 

데이터를 접근하기 위한 메서드

 

response.json()    //json형태로 반환

response.text()    //텍스트 형태로 반환

response.formData()  //FormData 객체 형태로 반환

response.blob()     //이진 데이터로 반환 (이미지,오디오등 멀티미디어 오브젝트를 다룰때)

response.arrayBuffer()  //ArrayBuffer(바이트로 구성된 배열)형태로 반환

 

 

 

---

 

실습 : fetch 함수의 동작을 알아보자!

 

▷promise만 사용

 

1. 응답 헤더 확인하기

 

fetch('https://jsonplaceholder.typicode.com/users/3')

 

id가 3인 user의 이메일 정보를 찾아보자.

위의 코드를 통해 반환 된 Response 객체 안에는 HTTP 응답 헤더가 들어있다.

 

 

[결과]

 

 

 

 

Status : 200을 통해 성공적으로 데이터를 찾았음을 알 수 있다.

→ HTTP 상태코드 참고

 

 

 

---

 

 

2.  데이터 추출하기

 

이제 id가 3인 데이터를 찾았으니 , 이메일 주소를 가져와야한다.

 

fetch('https://jsonplaceholder.typicode.com/users/3')
  .then(response => response.json())

 

응답 몸체에 있는 json 정보를 가져와보면 데이터를 확인 가능하다.

 

 

[결과]

 

Response 응답 몸체 값

 

 

 

 

---

 

 

3. 원하는 데이터만 추출하기

 

우리가 추출하고 싶은 데이터는 이메일이다. 따라서 아래 코드를 사용하면 된다.

 

fetch('https://jsonplaceholder.typicode.com/users/3') 
  .then(response => response.json())
  .then(json => console.log(json.email))

 

 

[결과]

 

이메일이 출력된 결과

 

 

json.email로 접근하여 이메일 값을 잘 가져오고 있다.

 

 

 

---

 

▷async/await 사용

 

async function getUserEmail(id) {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
    const user = await (res.json());
    const email = user.email;
    console.log(email);
}

getUserEmail(3);  // id가 3인 유저의 email을 가지고 온다

 

1. res는 fetch가 반환한 promise가 resolve한 Response 객체를 담고 있다.

 

2. user에는 JSON 형태로 파싱된 응답 데이터 값을 담고 있다.

 

3. user.email을 통해 email 값을 접근 할 수 있다.

 

 

[결과]

 

 

 

---

 

Fetch API  브라우저 지원 현황

 

 

- 일부 구형 브라우저에서는 지원이 되지 않는것을 확인 할 수 있다.

- 따라서 polyfill을 이용하여 fetch를 사용해보자

 

 

 

 

polyfil을 이용한 fetch 사용

 

const promise = fetch(resource, [options])

 

options : headers , methods , body 등 정보를 객체 형태로 담아 전달 

 

 

[ 예제 ]

async function request() {
  const response = await fetch('url 기입',
  {
    method: "GET", //POST, DELETE, PATCH, PUT
	  headers: {
			"Content-type": "콘텐츠 형태",
			//application/json, text/plain 등
		},
		body: JSON.stringify(
			서버에 전달할 데이터
		);
  });
  const data = await response.json();
  console.log(data);
}
request();

body에 담을 콘텐츠는 반드시 JSON.stringify( )하여 JSON 문자열 형태로 반환해야한다.

 

 

직렬화와 역직렬화

직렬화(Serialization)	객체(Object) → 문자열(string)
역직렬화 (Deserialization)	문자열(string) → 객체(Object)

 

* JSON.stringify( )  :  JSON 문자열 형태로 변환  

 

 

HTTP 요청 종류

 

1. GET 

- 서버에서 데이터를 가져올때 사용

 

2. POST

- 데이터 생성을 요청 할 때 사용

 

3. DELETE 

- 리소스 삭제를 요청 할 때 사용

 

4. PUT

- 리소스 업데이트를 요청 할 때 사용 

- 업데이트 할 리소스가 없을 시 새로 생성

- 전체 데이터 업데이트만 가능하다.

 

5. PATCH

- 리소스 업데이트를 요청 할 때 사용 

- 부분 데이터 업데이트가 가능하다.

 

 

이렇게 fetch 포스팅을 마친다.