리액트에서 axios 사용하기

axios란?? fetch를 더 쉽고 간결하게 사용하기위한 모듈 / 비동기방식으로 HTTP데이터 요청을 실행한다.

 

---

 

axios 설치

npm install axios --save

 

---

 

axios import

import axios from 'axios';

 

---

axios 사용법

 

const 변수이름 = axios.get("경로이름")

const 변수이름 = axios.post("경로이름",{보낼 데이터})

 

이렇게만 하면 놀랍게도 끝이다.

 

이제 여기에 .then() .catch() .finally()와 같은 함수들을 붙여서 사용하면 된다.

 

 

---

 

 

큰 데이터를 받아올때 async라는 접두사를 함수앞에 붙여서 이 함수가 비동기함수이고, 기다려야 한다는 것을 알려주어야 한다.

그리고 그 함수의 내부에서는 무엇을 기다려야 하는지 알려주어야 하는데 이때 await을 접두어로 기다려야하는 함수 앞에 붙여준다. 

예시는 아래와 같다. 아래 예시에서는 axios.get은 완료되기까지 시간이 필요하기 때문에 await을 넣은 것이다.

getMovies = async () => {
	const movies = await axios.get("경로이름")
} 


componentDidMount(){
	this.getMovies();
}