[JavaScript] api 요청 시 필요 없는 params 값 안 보내는 방법

api 요청 시 필수 값이 아닌 값이 있을 수 있습니다.

데이터 조회로 예를 들면 page, pageSize, searchKeyword 등 페이지네이션과 검색 시 검색어가 있을 수 있습니다.

여기서 검색어가 없다면 전체 값이 조회되기 때문에 필수 값이 아닙니다.

searchKeyword에 빈 값을 보내주어도 api는 잘 동작하지만 url에는 필요 없는 searchKeyword가 들어가게 됩니다.

http://localhost:3333/api/getData?page=1&pageSize=10&searchkeyword=

 

 

이 것을 방지하기 위해서 아래와 같은 방법을 사용할 수 있습니다.

const pageOption = {
  page: 1,
  pageSize: 10,
}
const searchKeyword = ''

const params = {
  ...pageOption,
  ...(searchKeyword && { searchKeyword })
}

axios({
  method: 'get',
  url: '/api/getData',
  params,
})

 

 

비슷한 방법으로 router 이동 시 url에 query를 넣어야 할 때에도 사용할 수 있습니다.

router.push({
  path: '/board',
  query: {
    ...(searchKeyword.value && { searchKeyword: searchKeyword.value }),
    ...(page !== 1 && { page }),
  },
})

// 검색어가 있을 때에만 searchKeyword query 생성
// 페이지가 1페이지가 아니면 page query 생성