Axios

Axios는 JavaScript 라이브러리 중 하나인 Fetch api와 같은 비동기 통신 라이브러리

React ⇒ Axios를 더 많이 사용

특징 : 요청과 응답 모두 JSON 형식으로 자동 변환시켜준다!

기본 사용법

const axios = require(`axios`)

// ID로 사용자 요청
axios
	.get('/user?ID=12345')
    // 응답(성공)
    .then(function(response){
    	console.log(response);
    })
    // 응답(실패)
    .catch(function(error) {
    	console.log(error);
    })
    // 응답 (항상 실행)
    .then(function(){
    	// ...
    })

async/await와 사용법

axios만을 이용하여 api호출을 하는 경우, 바로 응답이 오지 않기 때문에 일반적으로 비동기 방식을 이용함!

• async : 함수를 항상 Promise로 반환
  • 만약 반환값이 Promise가 아니라면 이행상태의 Promise(Resolved Promise) 형태로 값을 감싸 반환
• await : async 함수 안에서만 사용 가능! await를 만나면 promise가 처리될 때까지 대기(Settled상태까지)
  • 콜백함수 처리 없이 비동기 처리 가능!

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

1. GET

• 서버로부터 데이터를 받아올 때 사용 (Read)
• HTTP 통신할 때 주소에 있는 query string을 사용해서 정보 전달 가능

const axios_get = () => {
	axios.get("http://localhost:8080/get") //url
    	.then((response) => { //통신 성공 시
        	console.log(response);
        })
        .catch((error) => { //통신 실패 시
        	console.log(error);
        })
}

2. POST

• 서버로 데이터를 전송할 때
• JSON 형식이나 객체 형태로 데이터 전송 가능 (Create)

const axios_post = () => {
	const data = {
    	name : 'name',
        age: 23
    }
    
    axios.post("http://localhost:8080/post", data)
    	.then((response => {
        	console.log(response)
        })
        .catch((error) => {
        	console.log(error);
        })
}

3. PUT

• 서버에 존재하는 DB자원을 수정할 때 사용 (Update)

const axios_put = () => {
	const data = {
    	age: 25
    }
    
    axios.put("http://localhost:8080/put", data)
    	.then((response) => {
        	console.log(response);
        })
        .catch((error) => {
        	console.log(error);
        })
}

4. DELETE

• 서버에 존재하는DB 자원을 삭제할 때 사용 (Delete)

const axios_delete = () => {
	axios.delete("http://localhost:8080/delete")
}

// DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣어주면 된다.
const axios_delete = () => {
	axios.delete("http://localhost:8080/delete",
    {
    	data: {
        	postId: ...
            commentId: ...
        }
    });
}