리액트 스터디 16탄) axios로 api호출하기

리액트를 다루는 기술을 참고하여 기술하였습니다.

---

axios는 현재 가장 많이 사용하는 http클라이언트다.

특징은 HTTP요청을 Promise기반으로 처리한다는 점이다.

준비하기

npm install axios

하면 준비완료.

데이터 받기

axios는 get() 함수를 이용해서, 데이터를 HTTP형태로 받아올수 있다.

Const onClick= ()=>{
	axios.get('http://데이터 받을 곳의 주소')
		.then(response=>{ setData(response.data);
	}
};

이러한 방법을 통해서 데이터를 받아온다.

---

👉

중요한 점은 axios로 데이터를 받은것을 Promise로 처리한다는 점.

즉 axios로 데이터를 받앗을때, resolve되면, .then으로 처리를 해줄수 있고,

오류를 catch문으로 처리할수 있다는 이야기다.

또한 async를 사용하면서 try catch문도 사용할수 있게 된다.

위의 코드를 async를 사용해서 try catch를 사용하면

const onClick= async()=>{
	try{
		const response = await axios.get('http:// 주소');
		setData(response.data);}
	catch(e){
		console.log(e);}
};

이런식으로 처리가 가능하다.

Uploaded by N2T