[Web] Fetch - ( week 2)

fetch는 입력받은 api를 가지고 데이터를 가져오는 함수이다.

일반적으로 서버에서 가져오는 데이터는 json 형식이기 때문에 fetch는 json으로 만드는 기능과 함께 사용한다.

 

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {

        console.log(data)

 

fetch 연습

서울시 미세먼지 정보를 제공하는 API를 가지고 테스트해본다.

http://spartacodingclub.shop/sparta_api/seoulair

이 정보는 실시간으로 갱신되는 정브르 누구나 해당 url을 가지고 정보를 가져올 수 있다.

 

<script>

        // URL을 JSON으로 만들어서 사용, 이 형식으로 많이 사용함

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

            let rows = data['RealtimeCityAir']['row']

            rows.forEach((a)=>{

                    console.log(a)

            })

        })

    </script>

콘솔창에 출력되는 정보는 해당 URL에 접속해서 보이는 정보와 동일하다.

이 정보 덩어리에서 특정 정보만 가져오는 것도 가능하다.

 

<script>

        // URL을 JSON으로 만들어서 사용, 이 형식으로 많이 사용함

        fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {

            let rows = data['RealtimeCityAir']['row']

            rows.forEach((a)=>{

                    console.log(a['MSRSTE_NM'], a['IDEX_MVL'])

            })

        })

    </script>

리스트, 딕셔너리에서 사용했던 방식이 그대로 적용된다. 반복문으로 리스트를 순회하면서 Key값으로 해당 리스트의 Value를 가져온다.

 

fech('URL') // 추가정보가 들어가면 Post 형식도 가능하다.

.then() // 통신 요청을 받은 다음 수행할 작업

res => res.json() // 통신 요청을 받은 데이터는 res이름으로 작명하고 res를 json 형태로 변경한다.

.then(data=>{}) // json 형태로 바뀐 데이터를 data 이름으로 정한다.