jQuery에서 $.ajax 실패 처리

오늘의 게시물은 jQuery의 AJAX에서 실패 요청을 처리하는 방법에 대해 설명합니다.

jQuery에서 $.ajax 실패 처리

jQuery의 AJAX 게시 요청은 AJAX(비동기 HTTP) 요청을 수행합니다.

통사론:

jQuery.ajax([settings]).fail((jqXHR, textStatus) => {});
jQuery.ajax(url[, settings]).fail((jqXHR, textStatus) => {});

어디에:

1. URL은 요청을 보낼 URL이 포함된 문자열입니다.
2. settings는 AJAX 요청을 구성하는 키/값 쌍 개체입니다. 모든 설정은 선택 사항입니다. $.ajaxSetup()을 사용하여 각 옵션에 대한 기본값을 설정할 수 있습니다.

.fail() 접근 방식은 더 이상 사용되지 않는 .error() 접근 방식을 대체합니다. 이것은 오류 콜백 옵션에 대한 대체 구성입니다.

요청이 실패하면 AJAX 구성 내에서 error 콜백 옵션이 호출됩니다. 오류 유형을 나타내는 문자열인 jqXHR과 예외 객체가 있는 경우 이를 수신합니다.

일부 내장 오류는 abort, timeout, no transport와 같은 예외 개체로 문자열을 반환합니다.

$.ajax()는 브라우저의 기본 XMLHttpRequest 객체의 상위 집합인 jQuery XMLHttpRequest(jqXHR) 객체를 반환합니다.

다음 예를 통해 이해해 봅시다.

참고: 다음 코드는 있는 그대로 실행할 수 없으며 출력이 없습니다. 출력을 보려면 기존 코드에 추가해야 합니다.

HTML 코드:

<form id="myForm">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" value="Smith" />
  <input type="submit" value="Send" />
</form>

자바스크립트 코드:

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
     method: 'POST',
     url: '/open/hello-world',
     data: {name: 'Smith', location: 'United State'},
     error: function(jqXHR, thrownError) {
       alert(jqXHR.status);
       alert(thrownError);
     }
   })
      .done(function(msg) {
        alert('Data Saved: ' + msg);
      })
      .fail((jqXHR, errorMsg) => {alert(jqXHR.responseText, errorMsg)});
})

위의 예에서 사용자가 양식을 제출하면 지정된 URL 및 매개변수를 사용하여 AJAX 호출이 서버로 전송됩니다. 서버가 성공적인 메시지와 함께 반환되면 콘솔에 메시지를 인쇄하거나 적절한 메시지로 사용자에게 알릴 수 있습니다.

서버가 오류 메시지와 함께 반환하면 오류 핸들러 또는 .fail()을 사용하여 오류를 포착하고 적절한 오류 메시지로 사용자에게 알릴 수 있습니다.