Fetch API를 사용하여 GET 요청에 쿼리 문자열을 추가하려면 어떻게 해야 합니까?

Fetch API를 사용한 쿼리 문자열 조작

Fetch API를 사용하여 사용자 정의 쿼리 매개변수가 포함된 GET 요청을 생성하려고 하면 다음과 같은 관련 질문이 발생합니다. 내 요청에 대한 쿼리 문자열이 있나요?" 'http://myapi.com/orders?order_id=1'과 같은 GET 요청을 맞춤화해야 하는 긴급한 필요성에서 시작된 쿼리는 남아 있습니다. Fetch 내에 jQuery의 {order_id: 1} 데이터 매개변수에 해당하는 것이 있습니까?

현대적이고 간결한 해결 방법

URLSearchParams의 잠재력을 활용한 현대적인 솔루션이 등장합니다. toString() 메서드를 사용하면 인스턴스를 인코딩된 쿼리 문자열로 쉽게 변환하여 요청 URL에 원활하게 추가할 수 있습니다.

<code class="javascript">fetch('https://example.com?' + new URLSearchParams({
  foo: 'value',
  bar: 2,
}).toString())</code>

URLSearchParams는 개체를 원하는 쿼리 문자열 형식으로 꼼꼼하게 변환하여 수동 인코딩이 필요합니다. 또는 문자열 연결 시 JavaScript의 자동 변환을 활용하여 toString() 호출을 생략할 수 있습니다. 그러나 이 접근 방식을 사용하려면 JavaScript의 내부 작동 방식을 더 깊이 이해할 필요가 있습니다.

포괄적인 가져오기 예

전체 설명을 보려면 사용자 정의된 쿼리 매개변수를 사용하여 가져오기 요청을 수행하는 다음 예를 고려하세요.

<code class="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();</code>

쿼리 문자열 매개변수 활용

이제 이러한 기술을 마음대로 사용하면 Fetch API를 사용하여 GET 요청에 쿼리 문자열을 쉽게 추가할 수 있으므로 데이터 검색을 구성할 수 있습니다. 정확하고 효율적으로 운영됩니다.

위 내용은 Fetch API를 사용하여 GET 요청에 쿼리 문자열을 추가하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!