[4주차] Fetch API

< fetch >

• fetch() cheatsheet 사이트
• fetch로 가져온 서버에서 json파일을 꺼내고
• 꺼낸것 역시 promise라서 then으로 data을 뽑아낸다.

 

1. GET

 

fetch('/data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data)
  })
  .catch(err => ...)

 

ex) 서버에서 데이터를 받아서 <li> 태그 만들기

 

<nav>
    <ul></ul>
</nav>

<input type="button" value="GET" onclick="
    fetch('접속할 서버 주소')
    .then(response => response.json())
    .then(data => {
        let liTag = '';
        for(let i=0;i<data.length;i++) {
            console.log(data[i])
            liTag += `<li>${data[i].title}</li>`
        }
        document.querySelector('nav>ul').innerHTML = liTag;
    })
">

 

---

 

2. POST

• 데이터 교환을 위한 텍스트 포멧
  • js -> json : JSON.stringify()
  • json -> js : JSON.parse()
• 통신을 할 때는 항상 텍스트로 한다.
  • 자바스크립트 객체는 그대로 서버로 못보낸다. (통신X)
  • 그래서 텍스트로 바꿔야 한다.
  • 우리는 그때 JSON을 쓰기로 했다.

 

fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        console.log(data)
     })

 

 

ex) db에 데이터를 추가하기

• fetch에 두번 째 인자를 준다.

headers에 type이 json 이라고 알려준다.

headers: { 'Content-Type': 'application/json', }

body에 전송할 데이터를 넣는다.

• body에 js타입으로 전달X -> json 포맷으로 전달해야함.

JSON.stringify()

<input type="button" value="CREATE" onclick="
    fetch('접속할 주소', {
        method: 'POST',
        headers: {
        'Content-Type': 'application/json',
    },
        body: JSON.stringify({title:prompt('title?'), body:prompt('body?')})
    })
    .then(response => response.json())
    .then(data => {
        let lis = '';
        for(let i=0;i<data.length;i++){
            console.log(data[i]);
            lis = lis + `<li>${data[i].title}</li>`;
        }
        document.querySelector('nav>ul').innerHTML = lis;
    })
">