본문 바로가기
javascript/javascript 고급문법

[javascript] Fetch API

by 남민섭 2023. 1. 24.
728x90
반응형

Fetch API 도 XMLHttpRequest와 비슷하게 서버로부터 데이터를 받아오고 전송하지만 가장 큰 차이점은 Fetch API는 Promise방식으로 구성되어있다

 

그리고!!!!  XMLHttpRequest보다 훨~~~씬 더 간결하다!!!!!!

 

구문)

fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(Response=>Response.json()) //요청받은걸 제이슨데이터로 변환
.then(json=>console.log(json));  //변환받은걸 then으로 받음

 

에러 핸들링 사용 했을 때

2023.01.24 - [javascript 고급문법] - [javascript] try...catch(에러 핸들링)

방법 1

fetch("http://jsonplaceholder.typicode.com/posts/1")
.then(res=>res.json())
.then(data=>console.log(data));
.catch(e=>console.log(e))

 

방법 2 (async와 await 사용)

async function myFun(){
    try{//문제가 생길것만 같은 코드를 try안에 넣어두면 문제있는걸 밑에 catch가 잡아줌
        const res = await fetch("http://jsonplaceholder.typicode.com/poosts/1") //1번
        const resjson = await res.json();  //2번
        console.log(resjson);
    }
    catch(e){
        console.log(e);
    }

}
myFun();

 

 

Fetch API 활용한 실습(Shiping List)

 

 

 

 

 

index.html

<!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>
    <link rel="stylesheet" href="css/style.css">
    <script defer src="./js/main.js"></script>
</head>
<body>
    <div>
        <div class="logoDiv">
            <img src="imgs/logo.png" class="logo" alt="">
        </div>
        <div class="buttonDiv">
            <button class="btn">
                <img src="imgs/blue_t.png" alt="" class="imgBtn" data-key="type" data-value="tshirt">
            </button>
            <button class="btn">
                <img src="imgs/blue_p.png" alt="" class="imgBtn" data-key="type" data-value="pants">
            </button>
            <button class="btn">
                <img src="imgs/blue_s.png" alt="" class="imgBtn" data-key="type" data-value="skirt">
            </button>
            <button class="btn colorBtn blue" data-key="color" data-value="blue">
                blue
            </button>
            <button class="btn colorBtn yellow" data-key="color" data-value="yellow">
                yellow
            </button>
            <button class="btn colorBtn pink" data-key="color" data-value="pink">
                pink
            </button>
        </div>
        <ul class="items">
            <li class="item">
                <img src="imgs/blue_p.png" alt="">
                <span>남성 라지</span>
            </li>
        </ul>
    </div>
</body>
</html>

 

main.js

fetch("data/data.json")
.then(response => response.json())
.then(data =>  { 
    displayItems(data.items)
    setEvnetItems(data.items)
});


function mapStudy() {
    let students = [
        {name: "green", score: 70},
        {name: "blue", score: 80},
        {name: "yellow", score: 90},
    ]
    let stu2 = students.map(stu=>{
        return stu.score;
    })
    console.log(stu2);
}

mapStudy();

//이벤트 설정하기
function setEvnetItems(items) {
    const btns = document.querySelector(".buttonDiv");
    btns.addEventListener("click", function(e){
        const { key, value } = e.target.dataset;
        //value key
        let filterd = items.filter(item => item[key] === value);
        //item[key] 값과 value값이 같으면 필터되서 선언변수에 넣어줌
        console.log(filterd);
        displayItems(filterd);
        // 그 필터된거를 화면 나타내는 함수 안에 넣어주면 됨 
    })
}


//화면 나타내기
function displayItems(items) {
    console.log(items);
    const ul = document.querySelector(".items");  //ul 선택
    let str = "";  //빈문자열 변수선언
    str = items.map(item=>{  //map은 원본배열을 다른형태로 변환할수 있음
        //배열을 순차적으로 돌면서 각각 다른형태로 변환 해줌
        return `<li class="item">
            <img src="${item.image}">
            <span>${item.gender}, ${item.size}</span>
            </li>`;
    }).join("")
    ul.innerHTML = str;

}

data.json

{
    "items": [
        {
            "type": "tshirt",
            "gender": "남성",
            "size": "large",
            "color": "pink",
            "image": "imgs/pink_t.png"
        },
        {
            "type": "tshirt",
            "gender": "여성",
            "size": "middle",
            "color": "yellow",
            "image": "imgs/yellow_t.png"
        },
        {
            "type": "pants",
            "gender": "남성",
            "size": "large",
            "color": "blue",
            "image": "imgs/blue_p.png"
        },
        {
            "type": "pants",
            "gender": "여성",
            "size": "large",
            "color": "yellow",
            "image": "imgs/yellow_p.png"
        },
        {
            "type": "tshirt",
            "gender": "남성",
            "size": "large",
            "color": "yellow",
            "image": "imgs/yellow_t.png"
        },
        {
            "type": "tshirt",
            "gender": "남성",
            "size": "large",
            "color": "yellow",
            "image": "imgs/yellow_t.png"
        },
        {
            "type": "tshirt",
            "gender": "남성",
            "size": "large",
            "color": "yellow",
            "image": "imgs/yellow_t.png"
        },
        {
            "type": "tshirt",
            "gender": "남성",
            "size": "large",
            "color": "yellow",
            "image": "imgs/yellow_t.png"
        },
        {
            "type": "pants",
            "gender": "남성",
            "size": "large",
            "color": "yellow",
            "image": "imgs/yellow_p.png"
        },
        {
            "type": "skirt",
            "gender": "여성",
            "size": "large",
            "color": "pink",
            "image": "imgs/pink_s.png"
        }
    ]
}

style.css

:root {
    /* color */
    --color-black : #3f454d;
    --color-white : #fff;
    --color-blue : #3b88c3;
    --color-yellow: #fbbe28;
    --color-pink : #fd7f84;
    --color-light-gray: #dfdfdf;

    /* size */
    --base-space: 8px;
    --size-button: 60px;
    --font-size: 14px;
    --size-border: 4px;
    --size-thumnail: 45px;

    --animation: 0.3s;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    height: 100vh;
    background-color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
}
.logoDiv {
    text-align: center;
}
.logoDiv img {
    transition: var(--animation);
}
.logoDiv img:hover, .btn:hover {
    transform: scale(1.2);
}
.buttonDiv {
    display: flex;
    align-items: center;
}
.btn {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: var(--animation);
    margin-right: var(--base-space);
}
.imgBtn {
    width: var(--size-button);
    height: var(--size-button);
}
.colorBtn {
    font-size: var(--font-size);
    padding: calc(var(--base-space)*2);
    border-radius: var(--size-border);
}
.blue {
    background-color: var(--color-blue);
}
.yellow {
    background-color: var(--color-yellow);
}
.pink {
    background-color: var(--color-pink);
}
li{
    list-style: none;
}

.items {
    height: 50%;
    overflow-y: scroll;
}

.item {
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    padding: var(--base-space);
    margin-bottom: var(--base-space);
}

.item img {
    width: var(--size-thumnail);
    height: var(--size-thumnail);
}
.item span {
    margin-left: var(--base-space);
    font-size: var(--font-size);
}

 

이미지

imgs.zip
0.07MB

 

 

728x90
반응형

'javascript > javascript 고급문법' 카테고리의 다른 글

[javascript] Promise & Async/Await  (0) 2023.01.24
[javascript] try...catch(에러 핸들링)  (0) 2023.01.24
[javascript] XMLHttpRequest  (0) 2023.01.23
[javascript] this키워드  (0) 2023.01.23
[javascript] Modules  (0) 2023.01.11

관련글

댓글

티스토리툴바