- Fetch API를 사용하면 웹 브라우저가 웹 서버에 HTTP 요청을 할 수 있습니다.
- 2015년~2017년 사이 모든 브라우저가 Fetch API를 지원하므로 더 이상 XMLHttpRequest가 필요하지 않습니다.
1. REST API
- REST API는 웹 주소를 이용하여 서버와 통신하는 방법 중 하나라고 보면 됩니다.
- 주소를 입력하는 방법으로 데이터를 생성, 요청, 변경, 삭제를 할 수 있습니다.
- 그래서 우리는 REST API의 4가지 함수를 보도록 하겠습니다.
1) REST API 함수
| REST API함수 | 설명 | CRUD표현 | 주소입력방식 |
| POST | 데이터 등록 | Create | /test |
| GET | 데이터 조회 | Read | /test 또는 get/test/4 |
| PUT | 데이터 수정 | Update | /test/3 |
| DELETE | 데이터 제거 | Delete | /test/3 |
- 이 외에도 [ PATCH ], [ HEAD ]와 같은 함수도 갖고 있습니다.
- 기본적으로 JSON데이터에 대한 이해가 있어야 하므로 아래 주소에서 공부하면 좋습니다.
https://ossam5.tistory.com/category/%EC%9B%B9%EC%96%B8%EC%96%B4/JSON
'웹언어/JSON' 카테고리의 글 목록
웹프론트엔드의 모든것
ossam5.tistory.com
2. fetch 사용법
1) 기본적인 문법
## fetch 기본문법
fetch(url, options)
.then((response) => 데이터호출 성공시 명령)
.catch((error) => 데이터호출 에러시 명령);- 기본적으로는 이렇게 문법을 확인할 수 있습니다.
- 서버에서의 데이터 통신이므로 jsonplaceholder사이트를 이용해 보겠습니다.
- jsonplaceholder사이트는 json데이터를 가져다 쓸 수 있게 해주는 무료 가짜 REST API입니다.
- 원래 타 사이트의 데이터는 크로스도메인 관련 문제 때문에 함부로 가져다 쓸 수는 없습니다.
https://jsonplaceholder.typicode.com/
JSONPlaceholder - Free Fake REST API
{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month.
jsonplaceholder.typicode.com
## POST나 PUT방식에서의 세부 options
fetch(url, {
method: "REST APT함수명",
header: {
"Content-Type": "application/json",
"X-Auth-Token" : //인증토큰
},
body: JSON.stringify({
//데이터처리
})
})
.then((response) => 데이터호출 성공시 명령)
.catch((error) => 데이터호출 에러시 명령);
2) GET 방식 데이터 불러오기
## 제시 데이터 확인
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
</head>
<body>
<script>
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response));
</script>
</body>
</html>- 이렇게만 작성하면 데이터 뿐만 아니라 HTTP 응답 상태(status), HTTP 응답 헤더(headers), HTTP 응답 전문(body) 등을 읽어올 수 있습니다.
## 결과 확인
- 이렇게 전반적인 데이터를 전부다 출력합니다.
- 대부분의 REST API들은 JSON 형태의 데이터를 응답하기 때문에 응답(response) 객체는 json() 메서드를 갖고 있습니다.
## JSON데이터만 확인
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
</head>
<body>
<script>
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
</script>
</body>
</html>
## 결과 확인
- 그럼 원하는 데이터만 잘 반환되는 것을 확인할 수 있습니다.
- GET방식에서는 보낼 데이터가 없기 때문에 headers와 body옵션은 필요가 없습니다.
- 단순히 특정 API에 저장된 데이터를 보여주는 웹페이지는 GET방식의 HTTP통신으로 충분할 것입니다.
4) POST호출
- 원격 API에서 관리하고 있는 데이터를 생성해야 한다면 요청 전문을 포함할 수 있는 POST방식의 HTTP통신이 필요합니다.
## 데이터 등록
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
</head>
<body>
<script>
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
userId: 1,
title: "Test",
body: "I am testing!",
}),
})
.then((response) => response.json())
.then((data) => console.log(data));
</script>
</body>
</html>- 단순히 데이터를 얻어오는 GET방식이 아니기 때문에 method 를 통해 POST로 지정해줍니다.
- headers 옵션을 통해 JSON포맷을 사용한다고 알려 줍니다.
- 데이터 요청을 위해서 body 옵션에 데이터를 추가해 줍니다.
- 이때 id를 쓰지 않은 것은 원래 서버가 100개의 데이터를 갖고 있고 각각 id를 1~100까지 주고 있습니다.
- 그래서 자동으로 101로 들어갑니다.
## 결과 확인
- 값들은 코드에 작성한 대로 들어갔고, id값은 101이 들어가 있습니다.
3) PUT호출
- PUT은 데이터를 수정합니다.
- method만 PUT으로 사용하는 방법은 POST방식과 유사합니다.
## 첫 번째 post 수정 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
</head>
<body>
<script>
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "Test",
body: "I am testing!",
userId: 1,
}),
})
.then((response) => response.json())
.then((data) => console.log(data));
</script>
</body>
</html>
## 결과 보기
- id는 여전히 1이고 나머지는 수정한 대로 바뀐 것이 확인됩니다.
5) DELETE호출
- DELETE는 데이터 삭제입니다. 보낼 데이터가 없기 때문에 headers와 body옵션은 필요가 없습니다.
## 데이터 삭제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
</head>
<body>
<script>
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "DELETE",
})
.then((response) => response.json())
.then((data) => console.log(data));
</script>
</body>
</html>- 첫번째 post만 삭제해 보겠습니다.
## 결과 보기
- 데이터가 삭제되었기 때문에 빈객체만 반환됩니다.
3. async/await사용
- REST API를 통해 서버 데이터 통신을 한다는 것은 비동기적인 방식으로 데이터가 오는 겁니다.
- 데이터가 오는데 시간이 걸리기 때문에 시간이 걸리기 때문입니다.
- 그래서 명령을 먼저 줬다고 해도 다른 함수들보다 늦게 구현이 될 수 있기 때문에 비동기적이라고 합니다.
- 데이터를 가져오는 것을 계속 사용하다 보면 코드가 반복되기 때문에 별도로 모듈로 빼서 활용하는 것도 좋은 방법입니다.
1) GET방식 async/await
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
</head>
<body>
<script>
async function logJSONData(url){
const response = await fetch(url);
const jsonData = await response.json();
return jsonData;
}
logJSONData('https://jsonplaceholder.typicode.com/todos/1')
.then((data) => console.log(data));
</script>
</body>
</html>- 주소를 무엇을 쓰냐에 따라서 결과를 다르게 확인할 수 있습니다.
## 결과 보기
2) POST방식 async/await
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch API</title>
</head>
<body>
<script>
async function postJSONData(host, path, body, headers = {}) {
const url = `https://${host}/${path}`;
const options = {
method: "POST",
headers: {
"Content-Type": "application/json",
...headers,
},
body: JSON.stringify(body),
};
const res = await fetch(url, options);
const data = await res.json();
if(res.ok){
return data;
}else{
throw Error(data);
}
}
postJSONData("jsonplaceholder.typicode.com", "posts", {
title: "Test",
body: "I am testing!",
userId: 1,
})
.then((data) => console.log(data))
.catch((error) => console.log(error));
</script>
</body>
</html>- 이번에는 promise함수인 postJSONData 의 매개변수를 주소, 파라미터, body, headers로 나눠 처리했습니다.
## 결과 보기
'웹언어 > 자바스크립트 - ES6' 카테고리의 다른 글
| [ES6강좌] 15강 CustomEvent 제작하기 - 오쌤의 니가스터디 (3) | 2023.11.14 |
|---|---|
| [ES6강좌] 13강 async/await - 오쌤의 니가스터디 (0) | 2023.03.14 |
| [ES6강좌] 12강 Tagged Template literals - 오쌤의 니가스터디 (0) | 2023.03.02 |
| [ES6강좌] 11강 Template literals - 오쌤의 니가스터디 (0) | 2023.03.02 |
| [ES6강좌] 10강 JS Promise - 오쌤의 니가스터디 (0) | 2022.11.24 |
