카드를 누르면 디테일정보를 가져와서 뿌려주는 기능구현중에 get과 post에 대해 헷갈려서 정리한다.

GET

GET은 서버로부터 정보를 조회하기 위해 설계된 메서드
요청을 전송할 때 필요한 데이터를 Body에 담지 않고 쿼리스트링을 통해 전송. 만약 요청 파라미터가 여러개면 & 로 연결한다.
ex) www.test-url.com/resources?name1=value1&name2=value2

POST

POST는 리소스를 생성/변경하기 위해 설계되었기 때문에 GET과 달리 전송해야할 데이터를 HTTP메세지의 Body에 담아서 전송한다. Body의 길이 제한없이 전송가능, 때문에 POST요청은 GET과 달리 대용량 데이터를 전송할 수 있다.

axios.get() 의 사용

두가지 상황이 있다.

1) 단순 데이터요청을 수행

// callback 을 사용할 때,
axios.get("url")
    .then(response =>  {
         // response  
    }).catch(error => {
        // 오류발생시 실행
    }).then(() => {
        // 항상 실행
    });


// async await 함수를 사용할 때, 
try {
	const data = await axios.get("url");
} catch {
	// 오류 발생시 실행
}

2) 파라미터를 포함 시킬 때 (사용자번호로 조회)

axios.get("url", {
        params: {
          	id: 123
        }
    })
    .then(response => {
         // response  
    }).catch(error => {
        // 오류발생시 실행
    }).then(() => {
        // 항상 실행
    });
   
   
// async await 함수를 사용할 때, 
try {
	const data = await axios.get("url", 
         params: { 
			id: 123 
		 }
    );
} catch {
	// 오류 발생시 실행
}

참고 사이트