JavaScript에서 fetch 메소드를 사용하는 방법

JavaScript에서 가져오기 메서드 사용

현대 웹 개발에서 서버와의 데이터 상호 작용은 매우 일반적인 요구 사항입니다. 이러한 요구를 충족하기 위해 JavaScript는 HTTP 요청을 보내고 받는 데 도움이 되는 강력하고 사용하기 쉬운 API인 fetch 메서드를 제공합니다.

fetch 메서드의 기본 사용법은 다음과 같습니다.

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    // 对返回的数据进行处理
  })
  .catch(error => {
    // 处理请求错误
  });

이 예에서 fetch 메서드는 url과 options라는 두 가지 매개변수를 허용합니다. url은 요청을 보낼 주소이고, options는 요청 방법, 요청 헤더 등과 같은 요청의 세부 정보를 구성하는 데 사용되는 선택적 매개변수입니다.

fetch 메소드는 Promise 객체를 반환합니다. .then() 메소드를 통해 성공적인 응답을 처리하고 .catch() 메소드를 통해 오류를 처리할 수 있습니다. 성공적인 응답에서는 response.json() 메서드를 사용하여 반환된 데이터를 JSON 형식으로 구문 분석하고 구문 분석된 데이터를 다음 .then() 메서드에 전달할 수 있습니다.

fetch 메서드를 사용하여 서버에서 데이터를 가져와 웹 페이지에 표시하는 전체 예를 살펴보겠습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('data-container');
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.innerText = item.title;
      container.appendChild(listItem);
    });
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

이 예에서는 https://api.example.com/data GET 요청을 보냅니다. , response.json() 메서드를 사용하여 응답 데이터를 JSON 형식으로 구문 분석합니다. 다음으로, 데이터 배열을 반복하고 각 항목의 제목을 li 요소로 생성하고 ID가 data-container인 컨테이너에 추가합니다.

GET 요청 외에도 가져오기 메서드는 POST, PUT 및 DELETE와 같은 다른 HTTP 요청 메서드도 지원합니다. 옵션 매개변수의 메소드 필드를 설정하여 요청 방법을 지정할 수 있습니다. 예를 들어 POST 요청을 보내려면 다음과 같이 작성할 수 있습니다.

const options = {
  method: 'POST',
  body: JSON.stringify({ username: 'admin', password: '123456' }),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('https://api.example.com/login', options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理请求错误
  });

이 예에서는 옵션 매개변수에 요청 방법을 POST로 지정하고 본문 필드에 JSON 형식으로 데이터를 보내도록 설정합니다. 또한 headers 필드를 설정하여 요청 헤더를 지정할 수도 있습니다.

가져오기 메서드는 네트워크 요청에 오류가 발생한 경우에만 거부된다는 점에 유의하세요. 즉, HTTP 오류 상태 코드(예: 404)를 자동으로 오류로 처리하지 않습니다. 특정 HTTP 상태 코드를 처리해야 하는 경우 성공적인 응답에서 이를 확인할 수 있습니다.

요약하자면, fetch 메소드는 JavaScript에서 HTTP 요청을 보내고 받는 매우 편리한 방법입니다. 다양한 HTTP 요청 방법을 지원하고, 요청의 세부 사항을 설정할 수 있으며, Promise 메커니즘을 사용하여 코드를 더욱 간결하고 읽기 쉽게 만듭니다. fetch 메서드의 사용법을 익히면 서버와 더욱 유연하게 상호 작용하고 웹 애플리케이션에 더 많은 기능과 대화형 경험을 추가할 수 있습니다.

(총 801단어)

위 내용은 JavaScript에서 fetch 메소드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!