[javascript] axios get통신 시 params 붙여서 set 하기

서론

api 호출할때 request를 길게 셋팅하던 기존 소스를 보고 수정하고자 정리한다.

* vue.js 기준

기존 소스

data(){
	return{
		searchParam : {
			test1: '',
			test2: '',
			test3: '',
			test4: '',
			test5: '',
			test6: '',
			test7: '',
			test8: '',
		}
	}
}
methods:{
	search(){
		let params = `test1=${this.searchParam.test1}&test2=${this.searchParam.test2}` +
			`test3=${this.searchParam.test3}&test4=${this.searchParam.test4}` +
			`test5=${this.searchParam.test5}&test6=${this.searchParam.test6}` +
			`test7=${this.searchParam.test7}&test8=${this.searchParam.test8}`;
            
		// api 호출
     }
 }

 

수정 소스

data(){
	return{
		searchParam : {
			test1: '',
			test2: '',
			test3: '',
			test4: '',
			test5: '',
			test6: '',
			test7: '',
			test8: '',
		}
	}
}
methods:{
	search(){
		let params = Object.entries(this.searchParam).map(item => item.join('=').join('&');
		// api 호출
 	}
 }

 

결론

 

get request가 길어지면 소스가 지저분해지고 오타가 날수 있는 경우를 줄일수 있어서 추천합니다.