프론트엔드/JS
URLSearchParams
journey-dev
2023. 10. 31. 19:07
axios로 params를 붙여 get요청한 url을 unity팀에 그대로 보내줘야 했다.
api호출시 url의 쿼리스트링은 내가 직접 작성한게 아니라 axios라이브러리가 처리해주었고,
게다가 url안에 특수문자가 있어서 인코딩한 url을 보내야 하는게 어떻게 할지 고민이였다.
그 해결 방법은 URLSearchParams
1. 필요성
- URL 쿼리스트링 문자열을 쉽게 만들수 있음.
- 쿼리스트링 형식의 URL에서 쉽게 키,값을 조회할 수 있음.
- (url에서 특수 문자나 공백을) 자동으로 인코딩해줌.
2. 쿼리스트링 url 만들기
✅ 생성자 함수 new URLSearchParams
: url에서 쿼리파라미터 관련 정보를 파싱한 인스턴스 객체를 리턴함
new URLSearchParams(); // URLSearchParams {size: 0}
new URLSearchParams([
["format", "dxf"],
["layerName", "line_layer"]
]); // URLSearchParams {size: 2}
✅ 메서드 append() : 인스턴스 객체에 키-값을 넣음
URLSearchParams.append()
params.append("format", dxf);
params.append("layerName", line_layer); // URLSearchParams {size: 2}
✅ 메서드 toString() : 인스턴스 객체를 쿼리스트링 문자화, 인코딩된 url 주소가 문자로 나온다
URLSearchParams.toString()
// format=dxf&layerName=line_layer&testparams=a_id%3A1%3Bb_id%3A9%5C%2C13%5C%2C
3. 쿼리스트링 url 조회하기
✅ 프로퍼티 size : 쿼리스트링 파라미터 수 조회
new URLSearchParams().size; // 2
✅ 메서드 get() : 쿼리스트링 값 조회
{}.get("format") // dxf
{}.get("layerName") // line_layer
✅ 메서드 entries() : 쿼리스트링 키-값을 순회하기 위한 iterator 반환
const entries = params.entries();
for (const entry of entries) {
console.log(entry); // ['format', 'dxf'], ['layerName', 'line_layer']
}
4. 관련 URL 프로퍼티
✅ url.SearchParams
: URLSearchParams 객체를 반환함.
: 읽기전용 프로퍼티
// https://example.com/?name=Jonathan%20Smith&age=18
let params = new URL(document.location).searchParams; // {}
params.get("name"); // 'Jonathan'
parseInt(params.get("age")); // 18
✅ url.Search
: url에 있는 쿼리스트링을 문자열로 반환함
: 읽기,쓰기 가능 프로퍼티
const url = new URL("https://example.com/?name=Jonathan%20Smith&age=18",);
// <읽기>
url.search; // "?name=Jonathan%20Smith&age=18"
// <쓰기>
url.search = new URLSearchParams("format=dxf&layerName&r=line_layer").toString();
// "?format=dxg&layerName=line_layer"
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams