Axios에서 Config 객체를 활용한 적절한 HTTP 요청 방법

Axios에서는 요청을 보낼 때 config 객체를 활용하여 URL, HTTP 메서드, 헤더, 파라미터 등을 설정할 수 있다.

1. GET 요청 - @RequestParam 및 @PathVariable 사용

GET 요청은 데이터를 가져오는 용도로 사용되며, 본문(RequestBody)을 포함할 수 없다.

Spring Boot에서 사용할 수 있는 어노테이션:

• @RequestParam: 쿼리 파라미터를 받아서 처리 (ex: ?name=Alice&role=admin)
• @PathVariable: URL 경로의 변수를 받아서 처리 (ex: /users/1)
• @RequestBody 사용 불가: GET 요청은 본문을 가지지 않기 때문

import interceptor from '@/service/plugins/interceptors.js';

const axiosConfig = {
    url: '/api/v1/users',
    method: 'get'
};

export default {
    /**
     * 특정 사용자의 정보를 조회하는 요청
     * @param {number} userId 조회할 사용자 ID
     * @returns {Promise}
     */
    getUserById(userId) {
        const config = {
            url: `${axiosConfig.url}/${userId}`, // PathVariable 사용
            method: 'get',
        };
        return interceptor(config);
    },

    /**
     * 사용자 목록을 검색하는 요청
     * @param {object} params 검색 조건 (예: { name: 'Alice', role: 'admin' })
     * @returns {Promise}
     */
    getUsers(params) {
        const config = {
            url: axiosConfig.url,
            method: 'get',
            params: params, // Query Parameter 전달
        };
        return interceptor(config);
    }
};

 

2. POST 요청 - @RequestBody 사용

POST 요청은 새로운 데이터를 생성하는 용도로 사용되며, 본문에 JSON 데이터를 포함할 수 있다.

Spring Boot에서 사용할 수 있는 어노테이션:

• @RequestBody: 요청 본문을 JSON 형식으로 받아서 처리
• @RequestParam 및 @PathVariable 사용 가능하며, 보조적인 데이터 전달 용도로 유용할 수 있음

export default {
    /**
     * 새로운 사용자 정보를 등록하는 요청
     * @param {object} user 사용자 정보 (예: { name: 'Alice', role: 'admin' })
     * @returns {Promise}
     */
    createUser(user) {
        const config = {
            url: axiosConfig.url,
            method: 'post',
            data: user, // JSON 형식으로 RequestBody 전달
            headers: {
                'Content-Type': 'application/json'
            }
        };
        return interceptor(config);
    }
};

 

3. PUT 요청 - 데이터 업데이트

PUT 요청은 기존 데이터를 수정하는 용도로 사용되며, 일반적으로 본문(RequestBody)에 수정할 데이터를 포함한다.

Spring Boot에서 사용할 수 있는 어노테이션:

• @RequestBody: 수정할 데이터를 본문에 포함
• @PathVariable: 수정할 데이터의 식별자를 URL에서 받음 (ex: /users/{id})
• @RequestParam 사용 가능하지만 일반적이지 않음 (보조 데이터 전달용)

export default {
    /**
     * 사용자 정보를 업데이트하는 요청
     * @param {number} userId 업데이트할 사용자 ID
     * @param {object} updatedData 변경할 데이터
     * @returns {Promise}
     */
    updateUser(userId, updatedData) {
        const config = {
            url: `${axiosConfig.url}/${userId}`,
            method: 'put',
            data: updatedData, // 수정할 데이터 전달
            headers: {
                'Content-Type': 'application/json'
            }
        };
        return interceptor(config);
    }
};

4. DELETE 요청 - 데이터 삭제

DELETE 요청은 데이터를 삭제하는 용도로 사용되며, 일반적으로 본문을 포함하지 않는다.

Spring Boot에서 사용할 수 있는 어노테이션:

• @PathVariable: 삭제할 대상의 ID를 URL에서 받음 (ex: /users/{id})
• @RequestBody 사용 불가: DELETE 요청은 일반적으로 본문을 가지지 않지만, 일부 API에서는 본문 데이터를 허용할 수도 있음
• @RequestParam 사용 가능하지만 잘 사용되지 않음 (삭제 대상이 여러 개인 경우 사용할 수 있음)

export default {
    /**
     * 특정 사용자를 삭제하는 요청
     * @param {number} userId 삭제할 사용자 ID
     * @returns {Promise}
     */
    deleteUser(userId) {
        const config = {
            url: `${axiosConfig.url}/${userId}`,
            method: 'delete'
        };
        return interceptor(config);
    },
    
        /**
     * 여러 사용자 삭제 요청
     * @param {number[]} userIds 삭제할 사용자 ID 목록
     * @returns {Promise}
     */
    deleteUsers(userIds) {
        const config = {
            url: `/api/v1/users`,
            method: 'delete',
            params: { ids: userIds }, // Query Parameter로 전달
            headers: {
                'Content-Type': 'application/json'
            }
        };
        return interceptor(config);
    },
    
        /**
     * 특정 사용자를 삭제하는 요청 (본문 포함)
     * @param {number} userId 삭제할 사용자 ID
     * @param {object} data 추가 데이터 (예: { reason: "User requested deletion" })
     * @returns {Promise}
     */
    deleteUser(userId, data) {
        const config = {
            url: `/api/v1/users/${userId}`,
            method: 'delete',
            data: data, // 본문 포함
            headers: {
                'Content-Type': 'application/json'
            }
        };
        return interceptor(config);
    }
};

 

 

5. @RequestHeader를 포함한 요청

특정 요청에서 인증 토큰이나 사용자 정보를 헤더에 포함해야 할 때 사용한다.

Spring Boot에서 사용할 수 있는 어노테이션:

• @RequestHeader: 요청 헤더에서 특정 값을 가져올 때 사용

export default {
    /**
     * 인증 토큰을 포함하여 사용자 정보를 조회하는 요청
     * @param {number} userId 사용자 ID
     * @param {string} token 인증 토큰
     * @returns {Promise}
     */
    getUserWithAuth(userId, token) {
        const config = {
            url: `${axiosConfig.url}/${userId}`,
            method: 'get',
            headers: {
                Authorization: `Bearer ${token}`
            }
        };
        return interceptor(config);
    }
};

 

6. 파일 업로드 - @RequestPart 사용

파일 업로드 요청은 multipart/form-data 형식을 사용해야 한다.

Spring Boot에서 사용할 수 있는 어노테이션:

• @RequestPart: Multipart 요청에서 특정 파일을 처리할 때 사용하며, JSON 데이터와 함께 multipart 요청을 처리할 수도 있음

export default {
    /**
     * 파일 업로드 요청
     * @param {File} file 업로드할 파일 객체
     * @returns {Promise}
     */
    uploadFile(file) {
        const formData = new FormData();
        formData.append('file', file);

        const config = {
            url: `${axiosConfig.url}/upload`,
            method: 'post',
            data: formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        };
        return interceptor(config);
    }
};

 

7. 파일 다운로드 - HttpServletResponse 활용

파일 다운로드 요청은 responseType: 'blob'으로 설정해야 한다.

export default {
    /**
     * 파일 다운로드 요청
     * @returns {Promise}
     */
    downloadFile() {
        const config = {
            url: `${axiosConfig.url}/download`,
            method: 'get',
            responseType: 'blob' // 바이너리 데이터로 받기
        };

        return interceptor(config).then(response => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'file.pdf'); // 파일 이름 설정
            document.body.appendChild(link);
            link.click();
        });
    }
};

 

정리

요청 유형	Axios 설정 방법
@RequestParam (쿼리 파라미터)	params: { key: value }
@PathVariable (경로 변수)	url: \/api/{id}``
@RequestBody (JSON 본문)	data: { key: value }
@RequestHeader (헤더 데이터)	headers: { 'Authorization': 'Bearer token' }
@RequestPart (파일 업로드)	data: FormData, headers: { 'Content-Type': 'multipart/form-data' }
HttpServletResponse (파일 다운로드)	responseType: 'blob'