Hello ReactWorld - 5 axios / ajax

본 포스팅은 코딩애플님의 리팩트 강의를 수강한 후 참고하여 작성하였습니다.

AXIOS

리액트에서 AJAX 요청을 조금 더 편리하게 해주는 라이브러리

1. 설치

npm install axios

2. 임포트

import axios from 'axios';

3. 사용하기

<button onClick= {() => {
  axios.get('/myDogs')
  .then((result) => { // 콜백함수
    console.log(result);
    console.log(result.data);
  })
  .catch(() => {
    alert("실패")
  })
}}>버튼</button>

불러온 데이터를 html요소로 그리기

<button onClick= {() => {
  axios.get('/myDogs')
  .then((result) => {
    let copy = [... props.dogs, ...result.data];
    props.setDogs(copy);
  })
  .catch(() => {
  })
}}>버튼</button>

POST요청하기

axios.post("/myDogs", {key : 'value'})

동시에 ajax요청 여러개 보내기

Promise.all([ axios.get('/url1'), axios.get('/url2') ])
.then(() => {

})