[React] 10. axios 사용방법

오늘은 axios 공식문서를 참고하여 axios 기본 사용방법에 대해 정리해보려고 합니다.

axios 공식문서

💚 axios란

브라우저, Node.js를 위한 Promise API 기반 HTTP 비동기 통신 라이브러리

💚 axois 설치

먼저 axios를 설치하여 줍니다.

npm 설치

npm i axios

yarn 설치

yarn add axios

💚사용방법

💛 Axios 인스턴스 생성

axios 인스턴스를 생성하기 위해서create()를 사용합니다.

axios.create([config])

아래 코드는 사용 예시 입니다.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

💛 GET 방식

GET요청은 아래와 같은 형태로 사용합니다. 해당 url에 있는 데이터를 요청해요!

axios.get(url ,[config])

아래 함수는 사용자 정보를 가져오는 함수로 해당 url에 id가 12345인 사용자의 정보를 요청하는 코드입니다.

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

💛 POST 방식

POST 메서드는 서버에 데이터를 새로 생성할 때 사용하는데요!

axios.post(url,{data},[config])

이때, data는 {} 안에 JSON형태로 넣어서 사용해요!

async function uploadProfile() {
	const response = await axios.post('/user', {
    	firstName: 'Fred',
   	 	lastName: 'Flintstone'
	 });
}

💛 DELETE 방식

DELETE방식은 REST 기반 API 프로그램에서 DB 데이터를 삭제하기 위해 사용합니다.

axios.delete(url,[config])

아래와 같이 사용해요!

async function deleteUser(){ 
	const response = await axios.delete(`/user?userId=2345`);
}

💛 PUT 방식

PUT방식은 data를 upadate하기 위해 사용합니다!

axios.put(url, {data}, [config])

아래 코드는 특정 사용자의 정보를 업데이트 해주는 역할을 합니다.

async componentDidMount() {
    const response = await axios.put(url,{data});
    this.setState({ updatedAt: response.data.updatedAt });
}