JavaScript에서 HTTP 상태 코드를 얻기 위한 실용적인 기술 습득

실용 팁: JavaScript에서 HTTP 상태 코드를 얻는 방법을 익히려면 특정 코드 예제가 필요합니다.

소개:
웹 개발에서는 백엔드와의 데이터 상호 작용이 필요한 경우가 많습니다. 이 프로세스에서는 요청이 성공했는지 확인하고 오류 조건을 처리하는 데 도움이 되는 HTTP 상태 코드를 이해하는 것이 매우 중요합니다. 이 기사에서는 JavaScript를 통해 HTTP 상태 코드를 얻는 방법을 소개하고 독자가 이 기술을 빠르게 익힐 수 있도록 구체적인 코드 예제를 제공합니다.

1. XMLHttpRequest 개체를 사용하여 HTTP 상태 코드를 가져옵니다.
XMLHttpRequest는 클라이언트와 서버 간의 비동기 통신에 사용되는 개체입니다. JavaScript에서는 XMLHttpRequest 객체를 사용하여 HTTP 요청을 보내고 해당 상태 코드를 얻을 수 있습니다.

코드 예:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) { // 请求完成
    let status = xhr.status;
    console.log('HTTP状态码：', status);
  }
}
xhr.send();

파싱:
먼저 XMLHttpRequest 객체 인스턴스 xhr을 생성합니다. 그런 다음 xhr.open() 메서드를 사용하여 요청 유형(GET, POST 등)과 요청된 URL을 지정합니다. 세 번째 매개변수는 비동기식 식별자입니다. true로 설정하면 요청을 비동기식으로 보내는 것입니다.

다음으로 xhr 객체의 onreadystatechange 이벤트에 콜백 함수를 바인딩합니다. 이 콜백 함수는 xhr 객체의 상태가 변경될 때 트리거됩니다. onreadystatechange 이벤트가 트리거되면 먼저 xhr 객체의 ReadyState가 4인지 확인합니다. 이는 요청이 완료되고 응답이 수신되었음을 의미합니다.

마지막으로 xhr.status 속성을 통해 HTTP 상태 코드를 가져와서 콘솔에 인쇄합니다.

2. fetch API를 사용하여 HTTP 상태 코드 가져오기
fetch API는 Promise를 기반으로 하는 최신 네트워크 요청 API로, 네트워크를 통해 보다 간결하고 유연한 통신 방법을 제공합니다. fetch API를 통해 HTTP 상태 코드도 쉽게 얻을 수 있습니다.

코드 예:

fetch('http://api.example.com/data')
  .then(response => {
    let status = response.status;
    console.log('HTTP状态码：', status);
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

분석:
먼저 가져오기 기능을 사용하여 GET 요청을 보내고 요청된 URL을 매개변수로 전달합니다. fetch 함수는 Promise 객체를 반환합니다.

다음으로 Promise 개체의 then 메서드를 사용하여 콜백 함수를 정의합니다. 요청이 반환되면 콜백 함수가 트리거되고 응답 개체를 매개변수로 받아들입니다.

콜백 함수에서는 response.status 속성을 통해 HTTP 상태 코드를 가져와서 콘솔에 인쇄합니다.

요청에 오류가 발생하면 catch 메소드를 통해 오류를 캡처하고 콘솔에 오류 정보를 인쇄할 수 있습니다.

3. axios 라이브러리를 사용하여 HTTP 상태 코드 얻기
axios는 브라우저와 Node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트입니다. HTTP 요청을 보내고 응답을 처리하기 위한 편리한 API를 제공합니다.

코드 예:

axios.get('http://api.example.com/data')
  .then(response => {
    let status = response.status;
    console.log('HTTP状态码：', status);
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

분석:
먼저 axios의 get 메소드를 사용하여 GET 요청을 보내고 요청된 URL을 매개변수로 전달합니다. get 메소드는 Promise 객체를 반환합니다.

다음으로 Promise 개체의 then 메서드를 사용하여 콜백 함수를 정의합니다. 요청이 반환되면 콜백 함수가 트리거되고 응답 개체를 매개변수로 받아들입니다.

콜백 함수에서는 response.status 속성을 통해 HTTP 상태 코드를 가져와서 콘솔에 인쇄합니다.

요청에 오류가 발생하면 catch 메소드를 통해 오류를 캡처하고 콘솔에 오류 정보를 인쇄할 수 있습니다.

결론:
이 기사에서는 HTTP 상태 코드를 가져오는 세 가지 일반적인 방법, 즉 XMLHttpRequest 객체 사용, API 가져오기 및 axios 라이브러리를 소개합니다. 이러한 방법을 익히고 유연하게 사용할 수 있게 되면 요청 상태를 보다 정확하게 파악하고 오류 상황을 처리할 수 있어 웹 개발의 효율성과 품질이 향상됩니다. 이 글이 독자들에게 도움이 되기를 바랍니다.

참조:

1. MDN 웹 문서: XMLHttpRequest - https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
2. MDN 웹 문서: Fetch API - https://developer. .org/en-US/docs/Web/API/Fetch_API
3. Axios - https://axios-http.com/

위 내용은 JavaScript에서 HTTP 상태 코드를 얻기 위한 실용적인 기술 습득의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!