참고: https://www.javascripttutorial.net/javascript-fetch-api/
이 튜토리얼에서는 javascript의 fetch api를 사용하여 어떻게 비동기 HTTP 요청을 하는지 알아보겠습니다.
fetch api는 웹브라우저에서 서버로 HTTP 요청을 하게 해주는 최신 인터페이스입니다. 만일 XMLHttpRequest(XHR) 객체를 사용하고 있다면 fetch api로 모든 작업을 대체할 수 있습니다. 추가적으로 fetch api는 서버에서 웹브라우저로 데이터를 전송할 때 유연한 기능을 제공하기 위해 Promise를 사용하기 때문에 더 간단하고 깔끔합니다.
fetch() 메소드는 웹브라우저에서 URL 요청을 전송할 때 전역 스코프를 가지기 때문에 어디서든 사용이 가능합니다.
Sending a Request
fetch() 메소드는 매개변수로 자료를 가져올 URL만이 필요합니다.
let response = fetch(url);fetch() 메소드는 Promise를 리턴하므로 결과를 제어하기 위해 then()과 catch() 메소드를 사용할 수 있습니다.
fetch(url)
.then(response => {
// handle the response
})
.catch(error => {
// handle the error
});요청이 완료되어 데이터를 사용가능한 상태가 되면 Promise는 Response 객체를 반환합니다. Response 객체는 가져온 데이터의 API 래퍼인데 이는 데이터를 분석할 다수의 유용한 속성과 메소드를 가지고 있습니다.
Reading the Response
만일 응답받은 데이터가 raw text 포멧이라면 text() 메소드를 사용할 수 있습니다. 이 text() 메소드는 Promise를 반환해 가져온 데이터를 읽을 수 있는 값으로 변환해줍니다.
fetch('/readme.txt')
.then(response => response.text())
.then(data => console.log(data));다른 방법으로 fetch() 메소드는 Promise를 반환하므로 async/await을 사용할 수도 있습니다.
async function fetchText() {
let response = await fetch('/readme.txt');
let data = await response.text();
console.log(data);
}text() 메소드와 더불어 Response 객체는 json(), blob(), formData(), arrayBuffer() 과 같은 메소드를 가지고 있어서 원하는 raw 값을 원하는 값으로 제어할 수 있습니다.
Handling the status codes of the Response
Response 객체는 status, statusText로 상태 코드와 상태 메시지 속성을 가지고 있습니다. 요청이 성공하면 상태 코드는 200이고 상태 메시지는 OK가 됩니다.
async function fetchText() {
let response = await fetch('/readme.txt');
console.log(response.status); // 200
console.log(response.statusText); // OK
if (response.status === 200) {
let data = await response.text();
// handle data
}
}
fetchText();결과:
200
OK만약 요청한 리소스가 존재하지 않는다면 응답 코드는 404가 됩니다.
let response = await fetch('/non-existence.txt');
console.log(response.status); // 400
console.log(response.statusText); // Not Found결과:
400
Not Found또 요청한 URL이 서버 에러라면 응답 코드는 500이 됩니다. 만약 URL이 다른 새로운 리소스로 리다이렉트 되면 응답은 300-309가 되지만 Response 객체의 응답 코드는 200으로 설정되고 redirected 속성은 true로 설정됩니다.
fetch() 메소드는 웹브라우저 타임아웃이나 네트워크 연결 실패나 CORS 상황일 경우 reject Promise를 반환합니다.
JavaScript Fetch API example
다음의 내용을 가지는 json 파일(users.json)이 웹서버에 있다고 생각하고
[
{
"username": "john",
"firstName": "John",
"lastName": "Doe",
"gender": "Male",
"profileURL": "img/male.png",
"email": "john.doe@example.com"
},
{
"username": "jane",
"firstName": "Jane",
"lastName": "Doe",
"gender": "Female",
"profileURL": "img/female.png",
"email": "jane.doe@example.com"
}
]다음은 HTML 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"></div>
<script src="js/app.js"></script>
</body>
</html>app.js 파일에서 사용자 데이터를 가져오고 container 클래스를 가지는 div에 보여주기 위해 fetch() 메소드를 사용합니다.
먼저 서버의 users.json을 가져오기 위해 getUsers() 함수를 정의합니다.
async function getUsers() {
let url = 'users.json';
try {
let res = await fetch(url);
return await res.json();
} catch (error) {
console.log(error);
}
}다음으로 사용자 데이터를 화면에 보여주기 위해 renderUsers() 함수를 만듭니다.
async function renderUsers() {
let users = await getUsers();
let html = '';
users.forEach(user => {
let htmlSegment = `<div class="user">
<img src="${user.profileURL}" >
<h2>${user.firstName} ${user.lastName}</h2>
<div class="email"><a href="email:${user.email}">${user.email}</a></div>
</div>`;
html += htmlSegment;
});
let container = document.querySelector('.container');
container.innerHTML = html;
}
renderUsers();결과:
Summary
- fetch api는 리소스에 대한 비동기 요청을 지원합니다.
- fetch() 메소드를 사용하면 Promise 객체로 Response 객체를 받습니다. 여기서 실제 값을 얻으려면 Response 객체의 메소드(text(), json()) 중 하나를 호출해야 합니다.
- Response 객체의 status와 statusText 속성은 응답의 상태와 상태 메시지를 가집니다.
- catch() 메소드나 try...catch 구문을 사용해 요청 실패를 제어할 수 있습니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 Number 타입 사용 방법 (0) | 2022.05.27 |
|---|---|
| [javascript] 자바스크립트 console.log 사용 방법 (로그 찍기) (0) | 2022.05.27 |
| [javascript] 자바스크립트 문자열에 0으로 자리수 채우는 방법 (padding) (0) | 2022.05.03 |
| [javascript] 자바스크립트 enter key 입력 방법 (1) | 2022.05.02 |
| [javascript] 자바스크립트 querySelector 사용 방법 (0) | 2022.04.29 |
댓글