Development Tip

JSONP를 사용할 때 jQuery $ .getJSON (또는 데이터 유형이 'jsonp'로 설정된 $ .ajax) 오류를 어떻게 포착합니까?

yourdevel 2020. 10. 16. 08:08
반응형

JSONP를 사용할 때 jQuery $ .getJSON (또는 데이터 유형이 'jsonp'로 설정된 $ .ajax) 오류를 어떻게 포착합니까?


jQuery와 함께 JSONP를 사용할 때 오류를 포착 할 수 있습니까? $ .getJSON 및 $ .ajax 메서드를 모두 시도했지만 둘 다 테스트중인 404 오류를 포착하지 않습니다. 다음은 내가 시도한 것입니다 (이 모든 것이 성공적으로 작동하지만 실패 할 경우 케이스를 처리하고 싶습니다).

jQuery.ajax({
    type: "GET",
    url: handlerURL,
    dataType: "jsonp",
    success: function(results){
        alert("Success!");
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
        alert("Error");
    }
});

그리고 또한:

jQuery.getJSON(handlerURL + "&callback=?", 
    function(jsonResult){
        alert("Success!");
    });

또한 $ .ajaxError 추가를 시도했지만 작동하지 않았습니다.

jQuery(document).ajaxError(function(event, request, settings){
   alert("Error");
});

답변에 미리 감사드립니다!


성공적인 결과를 반환하지 않는 JSONP 요청은 이벤트, 성공 또는 실패를 트리거하지 않으며, 더 좋든 나쁘 든 디자인에 의한 것 같습니다.

버그 추적기를 검색 한 후 타임 아웃 콜백을 사용하여 가능한 해결책이 될 수있는 패치 가 있습니다. 버그 보고서 # 3442를 참조하십시오 . 오류를 캡처 할 수없는 경우 성공을 위해 적절한 시간을 기다린 후 최소한 시간 초과 할 수 있습니다.


여기에 '비슷한 질문에 내 광범위한 대답이야.

코드는 다음과 같습니다.

jQuery.getJSON(handlerURL + "&callback=?", 
    function(jsonResult){
        alert("Success!");
    })
.done(function() { alert('getJSON request succeeded!'); })
.fail(function(jqXHR, textStatus, errorThrown) { alert('getJSON request failed! ' + textStatus); })
.always(function() { alert('getJSON request ended!'); });

JSONP 문제 감지

종속성을 다운로드하지 않으려면 직접 오류 상태를 감지 할 수 있습니다. 그것은 간단합니다.

일종의 시간 제한을 사용해야 만 JSONP 오류를 감지 할 수 있습니다. 특정 시간에 유효한 응답이 없으면 오류를 가정합니다. 기본적으로 오류는 무엇이든 될 수 있습니다.

다음은 오류를 확인하는 간단한 방법입니다. success플래그를 사용하십시오 .

var success = false;

$.getJSON(url, function(json) {
    success = true;
    // ... whatever else your callback needs to do ...
});

// Set a 5-second (or however long you want) timeout to check for errors
setTimeout(function() {
    if (!success)
    {
        // Handle error accordingly
        alert("Houston, we have a problem.");
    }
}, 5000);

thedawnrider가 주석에서 언급했듯이, 대신 clearTimeout을 사용할 수도 있습니다.

var errorTimeout = setTimeout(function() {
    if (!success)
    {
        // Handle error accordingly
        alert("Houston, we have a problem.");
    }
}, 5000);

$.getJSON(url, function(json) {
    clearTimeout(errorTimeout);
    // ... whatever else your callback needs to do ...
});

왜? 읽어...


간단히 말해서 JSONP가 작동하는 방식은 다음과 같습니다.

JSONP는 일반 AJAX 요청처럼 XMLHttpRequest를 사용하지 않습니다. 대신 <script>"src"속성이 요청의 URL 인 페이지에 태그를 삽입합니다 . 응답의 내용은 다운로드시 실행되는 Javascript 함수로 래핑됩니다.

예를 들면.

JSONP 요청 : https://api.site.com/endpoint?this=that&callback=myFunc

Javascript는이 스크립트 태그를 DOM에 삽입합니다.

<script src="https://api.site.com/endpoint?this=that&callback=myFunc"></script>

<script>태그가 DOM에 추가 되면 어떻게됩니까 ? 분명히 실행됩니다.

따라서이 쿼리에 대한 응답이 다음과 같은 JSON 결과를 산출했다고 가정합니다.

{"answer":42}

브라우저에게 이것은 스크립트의 소스와 동일하므로 실행됩니다. 그러나 이것을 실행하면 어떻게됩니까?

<script>{"answer":42}</script>

글쎄, 아무것도. 그것은 단지 개체 일뿐입니다. 저장, 저장되지 않고 아무 일도 일어나지 않습니다.

이것이 JSONP 요청이 결과를 함수로 래핑하는 이유입니다. JSONP 직렬화를 지원해야하는 서버는 callback지정한 매개 변수를 확인하고 대신 다음을 반환합니다.

myFunc({"answer":42})

그런 다음 대신 실행됩니다.

<script>myFunc({"answer":42})</script>

... 훨씬 더 유용합니다. 이 경우 코드의 어딘가에 다음과 같은 전역 함수가 있습니다 myFunc.

myFunc(data)
{
    alert("The answer to life, the universe, and everything is: " + data.answer);
}

그게 다야. 이것이 바로 JSONP의 "마법"입니다. 그런 다음 위와 같이 시간 초과 검사를 작성하는 것은 매우 간단합니다. 요청을하고 즉시 시간 초과를 시작하십시오. X 초 후에도 플래그가 설정되지 않은 경우 요청 시간이 초과되었습니다.


이 질문이 조금 오래되었다는 것을 알고 있지만 문제에 대한 간단한 해결책을 제공하는 답을 보지 못했기 때문에 '간단한'해결책을 공유 할 것이라고 생각했습니다.

$.getJSON("example.json", function() {
      console.log( "success" );
}).fail(function() { 
      console.log( "error" ); 
}); 

.fail()콜백을 사용하여 오류가 발생했는지 확인할 수 있습니다.

도움이 되었기를 바랍니다 :)


공급자와 협력하는 경우 오류가있을 때 콜백 할 함수 인 다른 쿼리 문자열 매개 변수를 보낼 수 있습니다.

? 콜백 =? & 오류 =?

이것을 JSONPE라고하지만 사실상의 표준은 아닙니다.

그런 다음 공급자는 진단에 도움이되는 정보를 오류 기능에 전달합니다.

하지만 통신 오류에는 도움이되지 않습니다. Adam Bellaire의 답변과 같이 시간 초과시 오류 함수를 콜백하도록 jQuery를 업데이트해야합니다.


이것이 지금 작동하는 것처럼 보입니다.

jQuery(document).ajaxError(function(event, request, settings){
   alert("Error");
});

이것을 사용하여 JSON 오류를 잡습니다.

try {
   $.getJSON(ajaxURL,callback).ajaxError();
} catch(err) {
   alert("wow");
   alert("Error : "+ err);
}

Edit: Alternatively you can get the error message also. This will let you know what the error is exactly. Try following syntax in catch block

alert("Error : " + err);

Mayby this works?

.complete(function(response, status) {
    if (response.status == "404")
        alert("404 Error");
    else{
        //Do something
    }   
    if(status == "error")
        alert("Error");
    else{
        //Do something
    }
});

I dont know whenever the status goes in "error" mode. But i tested it with 404 and it responded


you ca explicitly handle any error number by adding this attribute in the ajax request:

statusCode: {
        404: function() {
          alert("page not found");
        }
    }

so, your code should be like this:

jQuery.ajax({
type: "GET",
statusCode: {
        404: function() {
          alert("page not found");
        }
},
url: handlerURL,
dataType: "jsonp",
success: function(results){
    alert("Success!");
},
error: function(XMLHttpRequest, textStatus, errorThrown){
    alert("Error");
}
});

hope this helps you :)


I also posted this answer in stackoverflow - Error handling in getJSON calls

I know it's been a while since someone answerd here and the poster probably already got his answer either from here or from somewhere else. I do however think that this post will help anyone looking for a way to keep track of errors and timeouts while doing getJSON requests. Therefore below my answer to the question

The getJSON structure is as follows (found on http://api.jqueri.com):

$(selector).getJSON(url,data,success(data,status,xhr))

most people implement that using

$.getJSON(url, datatosend, function(data){
    //do something with the data
});

where they use the url var to provide a link to the JSON data, the datatosend as a place to add the "?callback=?" and other variables that have to be send to get the correct JSON data returned, and the success funcion as a function for processing the data.

You can however add the status and xhr variables in your success function. The status variable contains one of the following strings : "success", "notmodified", "error", "timeout", or "parsererror", and the xhr variable contains the returned XMLHttpRequest object (found on w3schools)

$.getJSON(url, datatosend, function(data, status, xhr){
    if (status == "success"){
        //do something with the data
    }else if (status == "timeout"){
        alert("Something is wrong with the connection");
    }else if (status == "error" || status == "parsererror" ){
        alert("An error occured");
    }else{
        alert("datatosend did not change");
    }         
});

This way it is easy to keep track of timeouts and errors without having to implement a custom timeout tracker that is started once a request is done.

Hope this helps someone still looking for an answer to this question.

참고URL : https://stackoverflow.com/questions/309953/how-do-i-catch-jquery-getjson-or-ajax-with-datatype-set-to-jsonp-error-w

반응형