jquery jsonp请求错误处理

Posted 2020-09-18 开尔

jQuery将ajax方法进行了封装，jsonp可以轻松实现跨域请求。

$.ajax({type: ‘GET‘, url: "<%= SysUtils::TASK_CENTER_URL %>/all_tasks_h/verbose",
          async: false,
          dataType: "jsonp",
          jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
          timeout: 10,
          jsonpCallback:"flightHandler",
          success: function (msg) {
          if(msg){
              $(‘#main-content‘).text(JSON.stringify(msg));
          }else{
              $("#main-content").text("未返回数据，请勿频繁刷新"); } },
          error: function(jqXHR,textStatus){
         var error_info = $(‘<div class="alert alert-danger">连接失败，请勿频繁刷新，如需帮助请联系管理员</div>‘); 
        $("#main-content").empty().append(error_info); }
});

上面的方法正常的情况下可以执行，但是虽然浏览器终端报出错误(404或其他网络错误)，但你的error回调却没有被执行!?如果出错的情况下，error回调确没有执行。

我们仔细看看ajax方法的文档，在它error回调说明的最后有一句话：

Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax Event.

这就说明在调用跨域的脚本及jsonp请求时，这个错误将不会被执行，并强调指出这个error是一个 Ajax Event.

 其实，严格而讲jsonp不是ajax,ajax是通过XMLHttpRequest对象发送异步请求，而jsonp则是利用js标签天生具备的跨域能力来实现跨域资源访问。也就是说，虽然它的名字叫JSONP（JSON with Padding），但它底层是通过js标签实现的，它跟json以及普通异步请求关系都不大，jquery之所以把jsonp请求放到ajax方法里面，只是为了让api更方便调用而已。 （JSONP的详细描述可以查看WIKI，或者google）

那怎么做才能使JSONP的error回调被执行呢？

有两个方法，方法一：添加timeout参数。

$.ajax({
  url: ‘<%= SysUtils::TASK_CENTER_URL%>/all_tasks_h/verbose‘, 
  type: ‘GET‘,
  dataType: ‘jsonp‘, // dataType为jsonp 
  timeout: 5000, // 添加timeout参数  
  success: function(data) { $(‘.result‘).text(JSON.stringify(data)); }, 
  error: function(jqXHR, textStatus) { 
   // 此时textStatus为‘timeout’ 
   $(‘#main-content‘).text(‘error‘); alert(‘JSONP error!‘); 
  } 
});

 

添加timeout参数后，虽然JSONP请求本身的错误没有被捕获，但是最终会因为超时而执行error回调。

---

 

那还有没有方法使error回调在JSONP错误发生时就执行呢？

方法二出场：使用jquery jsonp插件 - https://github.com/jaubourg/jquery-jsonp

以下为常见的jqeury jsonp插件调用代码:

$.jsonp({

url: ‘<%= SysUtils::TASK_CENTER_URL%>/all_tasks_h/verbose‘, 
callbackParameter: "callback", 
timeout: 5000, 
error: function(xOptions, textStatus) { 
// 错误发生时，立即执行 
$(‘.result‘).text(‘error‘); 
alert(‘JSONP error!‘); 
}, 
success: function(data) { 
   $(‘#main-content‘).text(JSON.stringify(data)); 
  }
});

 

使用jsonp插件，能够在错误发生时立即执行error回调，并且还附带如’数据过滤’等功能，更多详细介绍请查看它的主页。

以上。