axios post 파라미터 전달 방법

axios.post() 메서드는 Axios 라이브러리를 사용하여 HTTP POST 요청을 보낼 때 사용되는 메서드입니다.

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

• url: 요청을 보낼 URL 주소입니다.
• data (옵션): 요청의 본문에 담을 데이터입니다. 일반적으로 객체 형태로 전달됩니다. 이 매개변수는 GET 요청에서는 사용되지 않습니다.
• config (옵션): 요청에 대한 추가적인 설정을 담은 객체입니다. 헤더, 인증, 요청 타임아웃 등을 설정할 수 있습니다.

data와 config 매개변수는 모두 선택적이므로 필요에 따라 생략할 수 있습니다.

 

1. params 전송

 URL 매개변수로 데이터를 전달하는 방식입니다. params 속성을 사용하여 전달할 데이터를 객체 형태로 지정합니다.

axios.post(url, null, { params: { key1: value1, key2: value2 } });

 

2. URLSearchParams 사용

 URL 매개변수를 쉽게 생성하고 전달하기 위한 JavaScript의 내장 클래스인 URLSearchParams를 사용하는 방식입니다.

const params = new URLSearchParams();
params.append('key1', value1);
params.append('key2', value2);

axios.post(url, null, { params: params });

 

3. data에 직접 담아 보내기

요청 본문에 데이터를 담아 전송하는 방식입니다. data 속성에 데이터를 담은 객체를 전달합니다.

const data = {
  key1: value1,
  key2: value2,
};

axios.post(url, data);

대량의 데이터나 구조화된 데이터를 전송하는 데 유용합니다.

*spring controller를 사용할 경우

@RequestBody를 사용해야 합니다. (1, 2 번은 @RequestParam)

 

4. FormData

FormData를 사용하면 파일 업로드나 멀티파트(form-data) 형식으로 데이터를 전송할 수 있습니다. 아래 예시 코드를 통해 사용법을 설명하겠습니다.

const formData = new FormData();
formData.append('file', file); // 파일 업로드 시 사용하는 예시 코드

axios.post(url, formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});