Fetch
Fetch API
fetch("경로")
.then(response=> response.json())
.then(json=> console.log(json));이렇게 작성하기 때문에,
XMLHttpRequset보다 간략히 작성할 수 있다.
fetch_예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(reponse => reponse.json())
.then(json => console.log(json));
</script>
</body>
</html>HTML에 출력하기
{
"items": [
{
"type":"tshirt",
"gender":"남성",
"size":"large",
"color":"pink",
"image":"imgs/pink_t.png"
},
{
"type":"tshirt",
"gender":"여성",
"size":"large",
"color":"yellow",
"image":"imgs/yellow_t.png"
},
{
"type":"pant",
"gender":"남성",
"size":"large",
"color":"blue",
"image":"imgs/blue_p.png"
},
{
"type":"pant",
"gender":"여성",
"size":"large",
"color":"pink",
"image":"imgs/pink_p.png"
},
{
"type":"skirt",
"gender":"여성",
"size":"large",
"color":"yellow",
"image":"imgs/yellow_s.png"
},
{
"type":"skirt",
"gender":"여성",
"size":"large",
"color":"pink",
"image":"imgs/blue_s.png"
},
{
"type":"tshirt",
"gender":"남성",
"size":"large",
"color":"blue",
"image":"imgs/blue_t.png"
},
{
"type":"tshirt",
"gender":"여성",
"size":"large",
"color":"pink",
"image":"imgs/blue_t.png"
},
{
"type":"pant",
"gender":"남성",
"size":"large",
"color":"pink",
"image":"imgs/pink_p.png"
},
{
"type":"skirt",
"gender":"여성",
"size":"large",
"color":"yellow",
"image":"imgs/yellow_s.png"
}
]
}
data/data.json의 값
1. forEach
fetch("data/data.json")
.then(response=> response.json())
.then(data=> displayItems(data.items));
//작성한 후 data.itmes를 아래의 function에 담았다.
//data.items의 items는 위 json의 object 명이다.
function displayItems(items){
const ul= document.querySelector(".items");
let str="";
//선언
items.forEach(item => {
str= str+`<li>
<img src="${item.image}">
<span>${item.gender}, ${item.size}</span>
</li>`
});
//data.items를 담은 변수 item을 forEach로 돌려 items의 value값의 key를 이용하여 값을 불렀다.
ul.innerHTML= str;
}2. Map
fetch("data/data.json")
.then(response => response.json())
.then(data => {
//작성한 후 data.items를 아래의 function에 담았다.
//data.items의 items는 위 json의 object 명이다.
displayItems(data.items)
setEventItems(data.items)
});
// function mapStudy(){
// let students = [
// {name: "green", score: 70},
// {name: "blue", score: 80},
// {name: "yellow", score: 90},
// ]
// students.map(stu=>{
// return stu.score;
// })
// console.log(stu2);
// }
//이벤트 설정하기
function setEventItems(items){
const btns = document.querySelector(".buttonDiv");
btns.addEventListener("click",function(e){
// {
// key: "type"
// value: "tshirt"
// }
// dataset.value
// const dataset = e.target.dataset;
// const key = dataset.key;
// const value = dataset.value;
const { key, value } = e.target.dataset;
//value: tshirt key: type
let filterd = items.filter(item=> item[key] === value);
console.log(filterd);
displayItems(filterd);
})
}
//화면 나타내기
function displayItems(items){
const ul = document.querySelector(".items");
let str = "";
//선언
// {
// "type":"tshirt",
// "gender":"남성",
// "size":"large",
// "color":"pink",
// "image":"img/pink_t.png"
// }
str = items.map(item=>{
return `<li class="item">
<img src="${item.image}">
<span>${item.gender}, ${item.size}</span>
</li>`;
//map으로 itmes에서 item을 변형해서 새로운 배열으로 변환한다.
}).join("")
//새롭게 만들어진 배열을 join("")을 이용하여 String으로 변환시켰다.
ul.innerHTML = str;
}HTML에 filter 걸어 출력하기
fetch("data/data.json")
.then(response => response.json())
.then(data => {
displayItems(data.lists)
//작성한 후 data.items를 아래의 function에 담았다.
//data.items의 items는 위 json의 object 명이다.
setEventItems(data.lists)
// setEventItems 함수에서 data.items를 이용하기 위해 추가되었다.
});
//이벤트 설정하기
function setEventItems(lists){
const btns = document.querySelector(".buttonDiv");
btns.addEventListener("click",function(e){
// 이벤트값인 e를 구한다.
// e는 target이 된(버튼이클릭된) 요소를 찾기 위함이다.
const { key, value } = e.target.dataset;
// dataset은 {key : value}로 되어있는데 const {key, value}를 그 값에 할당했다.
// const key에는 type/color,
// const value에는 tshirt/skrit/pants/blue/yellow/pink를 담았다.
let filterd = lists.filter(lists => lists[key] === value);
// data.itmes의 요소들 중 [key]가 value인 녀석만 filter처리하여 반환한다.
console.log(filterd);
displayItems(filterd);
// displayItmes 함수를 이용해 HTML에 출력한다.
})
}
//화면 나타내기
function displayItems(lists){
const tr = document.querySelector(".lists");
let str = "";
str = lists.map(list=>{
return `<tr class="list">
<td>${list.name}</td>
<td>${list.title}</td>
<td>${list.year}</td>
</tr>`;
}).join("")
tr.innerHTML = str;
}
에러가 발생할 확률이 있을 때 작성법
fetch("data/data.json")
.then(response=> response.json())
.then(data=> console.log(data));
async function fetchFun(){
try{
let result= await fetch("URL");
let data= await result.json();
console.log(data);
}
// try{ }내의 구문에서 에러가 났을 때
catch(err){
console.log(err)
}
// catch{ }내의 구문에서 ()매개변수로 에러값을 받아온다.
}