08月16, 2015

异步请求回调的研究

是指在写ajax异步请求时该如果写回调呢?写啥回调呢?错误时触发哪个回调呢?

常见的有:

$.post(url, {}, function(res){
}, 'json');

殊不知这种在出错的时候没有任何的处理。。。

通常我这样写:

$.ajax({
 url: '',
 data: {},
 dataType: 'json',
 type: 'POST',
 success: function(res){},
 error: function(){},
 complete: function(){}
});

你可能在说,代码可能有点多,其实我感觉只要业余清晰,代码多点也是能接受的,当然你可以用伟大的promise处理回调。。。在jquery里她转换成了deferred

一定要考虑的

  • 缓存问题,这个通常发生在ie低版本,如ie7,一般使用时间缀解决
  • loading的状态,一定要让用户知道当前处理正在请求过程中
  • 返回值出错,通常给予友好提示
  • 服务器出错,其中包括404,500等状态
  • 网络超时,一般有个时间限制
  • 用户主动中断请求,如:abort
  • timeout请求超时 - 默认是0ms

比如我的代码片断:

// 判断逻辑,如果成功才发请求
// 给出loading状态
// 发送请求,并所当前请求存放起来,以方便用户主动清除
XHR = $.ajax({
 url: '',
 data: {},
 dataType: 'json',
 type: 'POST',
 success: function(res){
 if(res && res.errcode === 0){
 // 成功
 } else {
 // 返回值不理想
 }
 },
 error: function(xhr, status){
 // status => timeout,parsererror,error,abort
 if(xhr && status !== 'abort'){
 // 如果不是用户主动中断
 }
 },
 complete: function(){
 // 关闭loading
 }
});

注:不管成功或者失败都会执行complete回调,且是在errorsuccess后执行

回调触发的类型

error

错误回调,相当于fail

当后端出错,或者服务器状态码不为200,会触发error,第二参数为error

当返回值解析错误时触发error,第二个参数为parsererror

当响应超时时触发error,第二个参数为timeout

当用户主动中断请求时触发error,第二个参数为abort

以上是在jqueryzepto中测试

success

成功回调,相当于done

jquery中当返回状态为200且内容正常解析后触发

zepto中当返回值状态为200内容不为空时触发,这是一个坑啊。。。

complete

完成回调,相当于always

不管成功还是失败,该事件总会执行,顺序在successerror之后

下面贴2个测试:

本文链接:https://xuexb.com/post/testajaxcallback.html

-- EOF --

发表于 2015年08月16日 00:17:00 ,添加在分类 前端技术 下 ,并被添加「 异步请求 容错 」标签 ,最后修改于 2017年03月29日 21:16:22

提醒: 本文最后更新于 3209 天前,文中所描述的信息可能已发生改变,请谨慎使用。

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。

AltStyle によって変換されたページ (->オリジナル) /