params
- axios의 두 번째 인자에 {params}를 담을 수 있다.
이상하게 쿼리는 없다. 뭐임 통일 좀 하셈
const params = {userId: [1, 2]};
axios.get('https://api.com', {params});- 이런 식으로 적용 가능하다.
- 근데 이 나사빠진 params는 이상하게 저걸 이상하게 갖다 붙인다.
// http://api.com?userIds=1,2
// http://api.com?userIds[]=1&userIds[]=2- 여기서는 암튼 작동은 한다.
개발자 마인드상 합격 - 근데 params가 중첩되기 시작하는 순간 stringify를 제대로 못 하는 대환장 파티가 펼쳐진다.
const params = { search:{keyword:"안녕"} };
axios.get("http://api.com", {params});
// http://api.com?search=[object+Object]- 또한 query-params에서 배열과 객체를 대입시 아래와 같은 컨벤션을 갖는다.
const arr = [1,2];
'http://api.com?arr=1,2'
'http://api.com?arr[]=1&arr[]=2'
'http://api.com?arr[0]=1&arr[1]=2'
const obj = {name: '123', age: 20};
'http://api.com?obj[name]=123&obj[age]=20'
const comb = {cat: ['고', '양', '이'], name: '이름'};
'http://api.com?comb[cat][]=고&comb[cat][]=양&comb[cat][]=이&comb[name]=이름'해결 방법
stringify 해주는 qs 모듈 필수!!!!!
import qs from "qs";
qs.stringify(params, option)
// arrayFormat 종류
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'- option에는 {arryFormat: 'brackets'} 등 사용
axios.defaults.paramsSerializer 사용
import qs from "qs";
axios.defaults.paramsSerializer = params => {
return qs.stringify(params);
}
const params = { search:{keyword:"안녕"} };
axios.get("http://api.com", {params});
// http://api.com?search[keyword]=안녕- axios의 paramsSerializer를 사용하여 기본 serializer를 내가 짠 코드대로 바꿔줄 수 있다.
- 여기서는 qs를 이요하여 params를 stringify 해줬다.
axios 인자에서 paramsSerializer 사용
import qs from "qs";
/**
* [GET] 백엔드 서버에서 태그로 게시글 조회
* @param {int} tagList - 태그 리스트
* @param {function} success - 게시글 조회 성공
* @param {function} fail - 게시글 조회 실패
*/
function getPostsByTags(tagList, success, fail) {
api.get(`/board/hashtags`, {
params: tagList,
paramsSerializer: params => {
return qs.stringify(params, { arrayFormat : 'brackets' })
}
})
.then(success).catch(fail);
}
// "http://happyhouse/board/hashtag/tag[0]=apt&tag[1]=rent"- 여기서는 params를 넘겨주고, 다음에 paramsSerializer를 지정해줬다.
- 이러면 각각 지정해줄 수 있어서 더 유연하다.
참고 사이트
쿼카에요