[React] API 연동 - axios

API 호출하기 위해서 라이브러리를 설치해보자

 

https://meetup.toast.com/posts/92 - rest api

npm install axios

 

axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다.

 

• GET: 데이터 조회
• POST: 데이터 등록
• PUT: 데이터 수정
• DELETE: 데이터 제거

 

axios 사용법

 

Get 방식

import axios from 'axios';

    axios.get('https://localhost:4000/sendlist/todo', 
      {userId: userId}, 
      { withCredentials: true }
    )

 

Post

axios.post('/users', {
  username: 'blabla',
  name: 'blabla'
});

혹은

axios.post(API_URL + "receiveData",  JSON.stringify(data), 
    { headers: { "Content-Type": "application/json; charset=UTF-8" },
      params: { userID: 1 }, //Add userID as a param 
    }).then(response=> console.log("repsonse", response.status))

 

 

동기로 Post 날리기 비동기 X

 

API.js

export async function PostAPI(URL, body)
{
	var result = await axios.post(URL, body)
    
    result result
}

 - async, await 동기로 해주기위함

 

 

호출시에도 await axios.post(URL, body)

로 작업 시 순서대로 작업이 진행된다. 값 return 도 가능+