[JavaScript] fetch API

728x90

SMALL

1. fetch api

네트워크 요청을 보내고 응답을 처리하는 기능을 제공
fetch API를 사용하면 HTTP 요청을 보내고, 그에 따른 응답 데이터를 받아와서 처리할 수 있음
Request나 Response와 같은 객체를 이용하여 HTTP 프로토콜을 통해 원격지에 정보를 가져오기 위해 사용하는 api
Promise를 기반으로 동작

Ajax ➡ XMLHttpRequest() ➡ fetch() ➡ jQuery, Axios

1-1. fetch 함수

Promise 객체를 반환
비동기적으로 동작
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>fetch</title>
    <script>
        function fetchAPI(){
            return fetch('https://www.7timer.info/bin/astro.php?lon=113.2&lat=23.1&ac=0&unit=metric&output=json&tzshift=0')
                // resolve되면 결과를 response에 담고 스트링으로 바꿈
                .then((response) => response.json())
                // 스트링으로 변환 후 data에 저장
                .then((data) => data)
        }
        // dataseries array만 뽑음
        fetchAPI()
            .then((datas) =>{
                console.log(datas.dataseries)
                showDatas(datas.dataseries)
            })

        // 파싱하는 함수
        function showDatas(datas){
            const ul = document.querySelector('#dataseries')
            // datas에서 한줄을 뽑아 data(아무거나 써도됨!)에 저장
            
            // map(): 배열의 각 요소에 대해 setLiElement()함수를 호출하고, 그 결과로 새로운 배열을 반환
            ul.innerHTML = datas.map((data) =>setLiElement(data)).join(' ')  // join()함수를 사용하여 li태그끼리 붙임
        }

        function setLiElement(data){
            return `<li>cloudcover: ${data.cloudcover}, lifted_index: ${data.lifted_index}, prec_type: ${data.prec_type}, rh2m: ${data.rh2m}, seeing: ${data.seeing}, temp2m: ,${data.temp2m}, timepoint: ${data.timepoint}, transparency: ${data.transparency}</li>`
        }
    </script>
</head>
<body>
    <h2>fetch</h2>
    <ul id="dataseries">
    </ul>
</body>
</html>

📌 json문법 검증하는 사이트
에러를 알 수 있음!
https://jsonlint.com/

The JSON Validator

JSONLint is the free online validator and json formatter tool for JSON, a lightweight data-interchange format. You can format json, validate json, with a quick and easy copy+paste.

jsonlint.com

MDN: fetch
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() (en-US) 메서드로 네트워크의 리소

developer.mozilla.org

728x90

LIST

'Web > JavaScript' 카테고리의 다른 글

[Node.js] 모듈 - 1️⃣ os (0)	2023.04.25
[JavaScript] JSON이란? & JSON 특징, JSON 구조, JSON의 타입, 메서드 (0)	2023.04.20
[JavaScript] Promise 객체 - 3️⃣ all(), allSettled(), race() (0)	2023.04.20
[JavaScript] Promise객체 - 2️⃣ promise 콜백함수 축약형으로 작성하기! (0)	2023.04.20
[JavaScript] Promise객체 - 1️⃣ 비동기 작업 처리란? & Promise 객체 생성과 콜백함수 사용 (0)	2023.04.20