>  기사  >  웹 프론트엔드  >  JavaScript 튜토리얼: 처음부터 HTTP 상태 코드를 얻는 방법 알아보기

JavaScript 튜토리얼: 처음부터 HTTP 상태 코드를 얻는 방법 알아보기

WBOY
WBOY원래의
2024-01-05 20:20:351184검색

JavaScript 튜토리얼: 처음부터 HTTP 상태 코드를 얻는 방법 알아보기

처음부터 시작: JavaScript는 HTTP 상태 코드를 얻는 방법을 가르쳐줍니다.

웹 개발에서는 종종 서버와 통신해야 하며, HTTP 상태 코드를 이해하는 것은 매우 중요한 부분입니다. HTTP 상태 코드는 HTTP 요청에 대한 서버 응답의 식별자입니다. 서버는 상태 코드를 사용하여 클라이언트에게 요청 처리 결과를 알려줍니다.

이 기사에서는 JavaScript를 사용하여 프런트 엔드에서 HTTP 상태 코드를 얻는 방법을 알려주는 코드 예제를 작성합니다.

1. XMLHttpRequest 객체를 사용하여 HTTP 상태 코드 얻기

XMLHttpRequest 객체는 프런트 엔드와 서버 간의 데이터 교환의 핵심입니다. 이를 사용하여 HTTP 요청을 보내고 응답 상태 코드를 얻을 수 있습니다.

먼저 XMLHttpRequest 개체를 만듭니다.

var xhr = new XMLHttpRequest();

다음으로 XMLHttpRequest 개체의 open() 메서드를 사용하여 요청된 URL과 요청 메서드(GET, POST, PUT 등)를 지정할 수 있습니다.

xhr.open('GET', 'http://www.example.com', true);

We setRequestHeader() 메서드를 사용하여 요청 헤더를 설정할 수도 있습니다. 이는 특정 요청 헤더를 전달해야 할 때 매우 유용합니다.

xhr.setRequestHeader('Content-Type', 'application/json');

그런 다음 send() 메서드를 사용하여 요청을 보냅니다.

xhr.send();

요청 상태가 변경되면 이벤트가 트리거되는 XMLHttpRequest 객체의 Readystatechange 이벤트를 수신합니다. 수신 기능에서 상태 속성을 통해 HTTP 상태 코드를 얻을 수 있습니다:

xhr.onreadystatechange = function() {
   if(xhr.readyState === 4) {
      console.log('HTTP状态码:', xhr.status);
   }
};

2. fetch API를 사용하여 HTTP 상태 코드 가져오기

fetch API는 JavaScript의 최신 네트워크 요청 방법이며 이를 사용할 수도 있습니다. HTTP 상태 코드를 가져옵니다.

가져오기 메서드를 사용하여 GET 요청을 보내고 HTTP 상태 코드를 가져옵니다. 코드는 다음과 같습니다.

fetch('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码:', response.status);
   });

가져오기 메서드는 Promise 개체를 반환하므로 .then()을 사용해야 합니다. 비동기 요청의 응답을 처리합니다.

3. Axios 라이브러리를 사용하여 HTTP 상태 코드 얻기

Axios는 네트워크 요청을 보다 간결하게 보낼 수 있고 보다 친숙한 API를 제공하는 매우 인기 있는 JavaScript 라이브러리입니다. Axios를 사용하여 HTTP 상태 코드를 얻을 수도 있습니다.

먼저 Axios 라이브러리를 소개해야 합니다.

<script src="https://cdn.jsdelivr.net/npm/axios"></script>

그런 다음 GET 요청을 보내고 HTTP 상태 코드를 가져오는 코드는 다음과 같습니다.

axios.get('http://www.example.com')
   .then(response => {
      console.log('HTTP状态码:', response.status);
   });

Axios의 간결한 API와 우아한 체인 호출을 통해 네트워크 요청을 보낼 수 있습니다. 더 편리하게 .

위의 세 가지 방법을 사용하면 프런트 엔드에서 HTTP 상태 코드를 쉽게 얻을 수 있습니다. HTTP 상태 코드를 이해하면 네트워크 요청을 더 효과적으로 디버깅 및 처리하고 사용자 경험을 개선하는 데 도움이 될 수 있습니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 JavaScript 튜토리얼: 처음부터 HTTP 상태 코드를 얻는 방법 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.