>  기사  >  웹 프론트엔드  >  간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

WBOY
WBOY원래의
2024-01-05 18:08:42915검색

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다.

머리말:
웹 개발에서는 서버와의 데이터 상호 작용 시나리오가 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다.

  1. XMLHttpRequest 개체를 사용하여 상태 코드 가져오기

XMLHttpRequest는 서버와 상호 작용하기 위해 JavaScript에서 사용할 수 있는 HTTP 요청 개체입니다. 다음은 HTTP 상태 코드를 얻기 위한 샘플 코드입니다.

let xhr = new XMLHttpRequest();

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

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log('请求成功');
    } else {
      console.log('请求失败,状态码为:' + xhr.status);
    }
  }
};

xhr.send();

위 코드에서는 먼저 XMLHttpRequest 객체를 생성한 다음 xhr.open 메서드를 사용하여 요청 방법과 주소를 지정합니다. xhr.onreadystatechange 메소드는 요청 상태의 변경 사항을 모니터링합니다. xhr.readyStateXMLHttpRequest.DONE이면 요청이 완료된 것입니다. xhr.open方法指定了请求的方式和地址,再通过xhr.onreadystatechange方法监听请求状态的变化。当xhr.readyStateXMLHttpRequest.DONE时,说明请求已完成。

接着,我们通过xhr.status获取到了服务器返回的HTTP状态码。如果状态码等于200,表示请求成功;否则,表示请求失败。

  1. 使用Fetch API获取状态码

Fetch API是JavaScript的新特性,提供了更加现代化和强大的与服务器进行数据交互的方式。下面是一个使用Fetch API获取HTTP状态码的示例代码:

fetch('http://example.com/api')
  .then(response => {
    if (response.ok) {
      console.log('请求成功');
    } else {
      console.log('请求失败,状态码为:' + response.status);
    }
  })
  .catch(error => {
    console.log('请求发生错误:', error);
  });

在以上代码中,我们使用了Fetch API的fetch函数发起了一个GET请求。然后通过.then方法处理服务器的响应结果。如果response.oktrue,表示请求成功;否则,表示请求失败。可以通过response.status获取到HTTP状态码。

此外,我们还可以使用.catch

다음으로 xhr.status를 통해 서버에서 반환된 HTTP 상태 코드를 얻었습니다. 상태 코드가 200이면 요청이 성공했음을 의미하고, 그렇지 않으면 요청이 실패했음을 의미합니다.
    1. Fetch API를 사용하여 상태 코드 가져오기

    Fetch API는 서버와 상호 작용하는 보다 현대적이고 강력한 방법을 제공하는 JavaScript의 새로운 기능입니다. 다음은 Fetch API를 사용하여 HTTP 상태 코드를 얻는 샘플 코드입니다.

    if (xhr.status === 301) {
      console.log('请求被永久重定向');
    }
    위 코드에서는 Fetch API의 fetch 함수를 사용하여 GET 요청을 시작합니다. 그런 다음 .then 메소드를 통해 서버의 응답 결과를 처리합니다. response.oktrue이면 요청이 성공했음을 의미하고, 그렇지 않으면 요청이 실패했음을 의미합니다. HTTP 상태 코드는 response.status를 통해 얻을 수 있습니다.
  • 또한 .catch 메서드를 사용하여 요청 프로세스 중에 오류를 잡을 수도 있습니다.
  • 기타 일반적인 HTTP 상태 코드 처리 예
    HTTP 상태 코드에는 200 외에도 많은 값이 있으며 각 값은 다른 의미를 나타냅니다. 다음은 몇 가지 일반적인 HTTP 상태 코드 처리 예입니다.
301 영구 리디렉션:
  • if (xhr.status === 404) {
      console.log('请求的页面不存在');
    }
404 페이지를 찾을 수 없음:

if (xhr.status === 500) {
  console.log('服务器发生错误');
}


500 서버 오류:

🎜
if (xhr.status === 503) {
  console.log('服务当前不可用');
}
🎜🎜503 사용할 수 없는 서비스: 🎜 🎜rrreee 🎜작가 이에 따라 다양한 상태 코드를 처리하면 다양한 오류 상황을 더 잘 처리할 수 있습니다. 🎜🎜결론: 🎜이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. 이 지식을 익히면 서버와의 상호 작용 중 오류를 더 잘 처리하고 웹 개발 효율성을 향상시킬 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜

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

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