[React] 15. ajax로 post 요청하기 & fetch

이전에는 ajax를 axios 라이블러리로 구현해보았는데 이번에는 자바스크립트에서 기본으로 제공해주는 fetch를 이용하여 구현해볼 것이다

• ajax로 post 요청
• ajax를 fetch()로 구현

---

✨ ajax로 post 요청하기

axios.post('URL', {name : 'kim'})

get 요청과 마찬가지로 url을 작성하고, 전송하고 싶은 자료는 객체 형태로 보낸다

완료 시 특정 코드를 실행하고 싶으면 이것도 역시 .then()을 뒤에 붙이면 됨!

❌ 하지만 원래는 object/array를 주고받는게 불가능하다

서버와 주고받을 수 있는 데이터 형태는 JSON 뿐

JSON이란?

object/array 자료에 따옴표를 쳐놓은 꼴
"{"name" : "kim"}"

하지만 내가 사용했던 axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해줘서 받아온 데이터를 그대로 사용할 수 있었다

하지만 fetch는 따로 변환작업이 필요!

✨ ajax를 fetch로

쌩자바스크립트 문법인 fetch() 를 이용해도 GET/POST 요청이 가능한데 그건 JSON -> object/array 이렇게 자동으로 안바꿔줘서 직접 바꾸는 작업이 필요하다

fetch('URL')
  .then(결과 => 결과.json()) //이 작업이 필요!!
  .then((결과) => { console.log(결과) } )

.json()은 json 형태를 우리가 사용할 수 있는 object/array로 바꾸는 작업이다

✨ 동시에 AJAX 요청 여러개 보내는 법

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

완료 시 특정 코드를 실행하고 싶으면 마찬가지로 뒤에 .then() 을 붙이면 된다