Fetch API를 사용하여 GET 요청에 쿼리 문자열 매개변수를 추가하는 방법은 무엇입니까?

Fetch API를 사용하여 GET 요청에서 쿼리 문자열 조작

최신 웹 개발에서 Fetch API는 HTTP 요청을 생성하기 위한 강력한 메커니즘을 제공합니다. 일반적인 시나리오 중 하나는 쿼리 문자열과 함께 GET 요청을 보내는 것입니다. 그러나 쿼리 문자열 매개변수를 추가하는 의미는 널리 사용되는 jQuery $.ajax() 메서드와 다릅니다.

질문:

쿼리 문자열을 쿼리 문자열에 어떻게 추가할 수 있나요? Fetch API를 사용하여 GET 요청을 하시겠습니까? 예를 들어 다음 URL을 고려해보세요.

http://myapi.com/orders?order_id=1

답변:

Fetch API는 쿼리 문자열 매개변수를 추가하는 두 가지 기본 방법인 URLSearchParams와 URL을 제공합니다.

URLSearchParams 사용:

URLSearchParams를 사용하면 URL 쿼리 문자열을 조작할 수 있습니다. 매개변수 추가, 제거, 쿼리를 위한 직관적인 인터페이스를 제공합니다. 쿼리 문자열을 구성하려면 URLSearchParams 인스턴스를 생성하고 원하는 매개변수를 추가한 후 문자열로 변환하세요.

// Using URLSearchParams
var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
var params = new URLSearchParams();
params.append('order_id', 1);
request.url += '?' + params.toString();

URL 사용:

또는 URL 클래스를 활용하여 URL을 직접 조작할 수 있습니다. 매개변수를 추가하고 검색하는 방법을 제공합니다.

// Using URL
var request = new Request({
  url: new URL('http://myapi.com/orders'),
  method: 'GET'
});
request.url.searchParams.append('order_id', 1);

자세한 예:

다음 시나리오를 고려하십시오. RESTful API의 특정 게시물에서 댓글 가져오기 . 다음은 URLSearchParams 접근 방식을 사용하는 완전한 예입니다.

// Fetch comments for a specific post using URLSearchParams
async function fetchComments() {
  const postId = 1;
  const url = 'https://jsonplaceholder.typicode.com/comments?' +
    new URLSearchParams({ postId }).toString();
  const response = await fetch(url);
  const comments = await response.json();
  console.log(comments);
}

fetchComments();

이러한 기술을 활용하여 개발자는 Fetch API로 수행된 GET 요청에 쿼리 문자열을 효과적으로 추가하여 추가 매개변수를 서버측 엔드포인트에 전달할 수 있으며 필터링된 결과를 검색합니다.

위 내용은 Fetch API를 사용하여 GET 요청에 쿼리 문자열 매개변수를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!