Fetch GET 요청에 쿼리 문자열 추가

Fetch API의 쿼리 문자열 기능을 탐색하는 동안 개발자는 jQuery의 $와 유사한 메서드를 사용하여 GET 요청에 매개변수를 전달하는 것을 목표로 합니다. .ajax().

솔루션

새로운 Fetch API는 URLSearchParams를 사용하여 문제를 해결합니다. 쿼리 문자열 추가. 이 객체는 쿼리 문자열 매개변수를 작성하고 수정하는 편리한 방법을 제공합니다.

fetch('https://example.com?'   new URLSearchParams({
    foo: 'value',
    bar: 2,
}).toString())

URLSearchParams.toString() 메소드는 매개변수 객체를 적절한 형식의 쿼리 문자열로 인코딩합니다.

또는 다음과 같이 .toString() 호출을 생략할 수 있습니다. JavaScript는 문자열과 연결될 때 문자열이 아닌 객체를 자동으로 문자열로 강제 변환합니다. 이 접근 방식을 사용하려면 JavaScript에 대한 더 깊은 이해가 필요합니다.

전체 예

다음은 쿼리 매개변수가 포함된 포괄적인 예입니다.

async function doAsyncTask() {
  const url = (
    'https://jsonplaceholder.typicode.com/comments?'  
    new URLSearchParams({ postId: 1 }).toString()
  );

  const result = await fetch(url)
    .then(response => response.json());

  console.log('Fetched from: '   url);
  console.log(result);
}

doAsyncTask();