Vue.js Axios FormData 데이터 여러개 보내기

나의 문제 상황 

구독 모집글이 진행중으로 변경되면 캘린더에 구독 일정 추가하기 버튼이 활성화되어야 한다. 시작일 ~ 끝일을 한번에 추가하려다 보니 아래와 같은 상황이 발생. 구독 일정이 이렇게까지 필요없기도 하고 시작날짜, 끝날짜만 있으면 된다고 생각했다. 

한마디로, 구독 일정 추가하기 버튼 클릭 ➡️ 구독 시작일 일정, 구독 종료일 일정 두개 추가

 

 

 

 

내 지식수준에서는 formdata를 두번 작성해서 Axios 를 두번 보내는 방법을 생각했다. 그런데, 코드 길이도 길어지고 가독성도 떨어져서..

 

아래와 같이 보내면된다. 그러면 createEvent 개수에 맞게 코드를 보낸다.

1. 공통 부분들은 내버려두고, 달라지는 부분들에 넣을 값들을 오른편에 넣어준다. 
2. createEvent 밑에 넣을 값들을 순서대로 넣어준다.

 

주의점으로는 title, start, end 의 순서는 createEvent() 순서랑 맞게 신경써서 작성해준다.

 

 

addSchedule() {
            const self = this;
            const createEvent = (title, start, end) => {
                const form = new FormData();
                form.append('email', sessionStorage.getItem('loginId'));
                form.append('title', title);
                form.append('start', start);
                form.append('end', end);
                form.append('info', '구독글 제목: ' + this.list[0].subscribe_num.title)
                form.append('day', null);

                self.$axios.post("http://localhost:8181/schedules", form)
                    .then(response => {
                        const savedEvent = response.data.dto;
                        self.calendarOptions.events.push({
                            title: savedEvent.title,
                            start: savedEvent.start,
                            end: dayjs(savedEvent.end).format('YYYY-MM-DD'),
                            daysOfWeek: savedEvent.day,
                            display: 'block',
                        });
                        alert('일정이 추가되었습니다.');
                    });
            };

            createEvent(
                this.list[0].subscribe_num.site + '구독 시작일',
                this.list[0].subscribe_num.subscribe_startdate,
                this.list[0].subscribe_num.subscribe_startdate
            );

            createEvent(
                this.list[0].subscribe_num.site + '구독 종료일',
                this.list[0].subscribe_num.subscribe_enddate,
                this.list[0].subscribe_num.subscribe_enddate
            );

 

 

그럼 이렇게 완성 ~