네트워크 요청하기 - 서버에서 데이터 받아오는 방법

※ 해당 글은 모던자바스크립트튜토리얼을 정리한 것입니다.

fetch

- javascript로 서버에 네트워크 요청을 보낸 후,
응답(정보)을 받아오는 기능

 

AJAX: 비동기적으로 추가되는 정보를 가져올 수 있다.

fetch는 AJAX중의 하나.

요청(Request)

- 주문 제출
- user 정보 읽어오기
- 서버의 최근 업데이트 정보 받아오기

특징: 새로 고침을 하지 않고, 네트워크 요청을 할 수 있다.

 

기본 형식

let promise = fetch(url, [options])

* url : API 서버 주소

* options : 매개변수, 

method 혹은 header를 지정 가능하다.

options : 매개변수, method 혹은 header를 지정 가능하다.

 

※

options에 GET, POST등의 요청방법 메서드를 지정.
아무것도 안 쓰면, 자동으로 GET 메서드로 진행된다.

fetch() 호출시, 브라우저가 요청을 보내고 
promise가 반환된다.

 

반응형

응답

- 2가지 단계가 존재.

 

1. 응답 받기, 상태 확인

서버에서 응답 헤더를 받는 즉시,
fetch를 호출해서 리턴된 promise가
내장 객체인 Response 클래스와 함께 쓰인다.

→ promise가 응답을 받는다는 뜻.

본문인 body가 도착하기 전이지만,
우리는 응답 헤더를 확인하고
요청이 성공적으로 처리됐는지 아닌지를 판단 가능하다.

Promise는 HTTP 리퀘스트를 보낼 수 없는 상태에서  거부된다.
(네트워크 문제, 존재하지 않는 사이트)

 

* response 프로퍼티로, HTTP 상태 확인하기

 

status: HTTP 상태 code

ok: boolean값

HTTP status code가 200~ 299일 때 true

2. body까지 받기

추가 메서드 호출로, response body받기

response 객체에는 promise 기반의 메서드들이 존재한다.
메서드들을 사용해서, body에 접근할 수 있다.

 

종류는 위 사진과 같다.

 

① JSON 형태로 받기

(깃허브에서 마지막 커밋 내용을 데이터로 가져오기)

출력 결과는 이렇다. 

 

② await 없이 promise로 받기

위와 동일한 내용인데, 방식만 조금 다르다.

③ JSON이 아니라 .text로 받기

④ JSON이 아니라 .Blob으로 받기

이미지 파일 형태로 출력된다.

※ .text .json 같은 메서드는 코드에 하나만 써주세요.

(위에서 이미 처리되었기 때문에, 2번은 안 뜬다)

 

응답 header

response.headers 메서드에, 
헤더가 map과 비슷한 형식으로 저장된다.

map은 아니지만, map과 유사한 메서드이다.
이 메서드들을 써서, header 일부를 추출하거나
header 전체를 순회할 수 있다.

요청 header

headers로, 헤더 정보가 담긴 객체를 넘긴다.

Post 요청

 

보통 JSON으로 많이 보낸다.

user 객체를 body에 넣어서 요청 보내기

 

POST 요청을 보낼 때,

body가 stringify 문자열이므로 

header 타입을 따로 설정해주어야 한다.

 

Content-Type 변경해주기

text가 아니라 json형태로

전송하고 있기에 여기도 변경해주어야 한다.

 

기본 설정: "text/plain;charset=UTF-8"

↓

application/json으로 변경

 

이미지 서버에 전송하기

Blob과 BufferSource 객체를 써서, 바이너리 data를 전송한다. (fetch 사용)

- code: canvas로 직접 뭔가 그려놓은 이미지를 만들어서,
그것을 서버에 전달하는 예제

 

**

Blob 객체는 내장형 타입으로, toBlob에 의해서 imge/png가
자동 설정된다.

그래서 Content-type을 따로 설정하지 않아도 되고,
해당 객체 타입은 Content-Type의 header 값이 된다.

 

async/await 쓰지 않고, submit function 작성하기

정리

2개의 await 호출로, fetch 요청을 한다.

await 안쓰고, 요청하기

Response 객체의 프로퍼티

 

Body를 얻기 위한 메서드

 

fetch 옵션

Fetch로 user 정보 가져오기

위 조건들을 지켜서, 테스트 코드를 작성해보기

※ 여기 샌드박스 code를 열면,

실행되는 모습까지 확인 가능합니다.

 

실행화면

code 분석

1. fetch로 깃허브에서 user 정보 가져오기

 

2.

- 상태코드가 200이 아닐때: null 반환해서 배열 담기

- 200일 때: json() 객체 읽기

 

※ fetch를 쓰고, .then이 바로 호출되므로

다른 fetch는 기다리지 않고

바로 .json()으로 response를 읽는다.

① 위의 반환값으로, .json()을 호출했을 경우

모든 fetch 응답이 끝날 때까지 기다려야 한다.

 

 ② fetch 쓸 때마다, json()호출하는 형식이면

기다리지 않고 JSON으로 데이터 읽을 수 있다.

 

*

여기선 async await를 쓰지만

프라미스 API도 유용하게 쓰인다.