如果你去了解jQuery的全局拦截器、异常处理器的话,大概会了解到这三个函数:$.ajaxSetup、$.ajaxPrefilter、$.ajaxError
但网上网上目前关于上面这几个函数的介绍感觉都比较杂乱,这里系统地梳理一遍,这三个的函数是干嘛的,又有哪些差异。
省流:全局拦截器是用$.ajaxPrefilter,异常处理器是用$.ajaxError。 该函数的用法可以点进上面的官方文档链接,也可以直接划到本文的相关标题。
1 $.ajax
在讲解上面提到的那三个函数之前,有必要先理清一下$.ajax这个函数。
如官网描述,这个函数共有两种重载形式,第一种其实就是把url选项单独从settings中提出来罢了。
这里重点要关注的是settings这个参数,其中包含了此次ajax请求的各个方面的参数。其中有两个配置就和我们要讲的上面三个函数有关,分别是:
beforeSend、success 、error这些事件的回调函数global 布尔类型选项,决定此次ajax请求是否触发全局的事件监听器
1.1 Ajax Events
这里涉及到jQuery的Ajax Events这一概念:
如官网描述,我们用jQuery发出的ajax请求总共依次触发上述几种事件,其中有我们经常写的success事件,注意到它标注为Global Event,表明它不仅能触发我们自己写的ajax请求中的回调,还能触发在document上订阅success事件的事件监听器。
同理,如果标注为Local Event,表明这个事件只会触发我们在ajax请求中写的回调。
同时这也就引出了我们上面介绍的$.ajax中global选项,如果配置其为false,那么将不会触发在document上订阅的全局事件监听器。
2 $.ajaxError
在了解了上面提到的概念,$.ajaxError这个函数就好理解了,它其实是下面代码的语法糖:
$(document).on('error', (event, jqXHR, settings, thrownError) => {
// 业务代码写在这里
})
表明在全局注册一个监听ajax请求error事件的监听器。
注意到回调函数共有四个参数:
event:事件jqXHR:jQuery帮我们封装的XMLHttpRequest对象。拥有更多功能,比如支持Promise异步编程,这里不具体介绍了,详情可见官方文档settings:就是我们发送ajax请求时,创建的settingsthrowError:就是响应的错误状态码的文本部分。比如Not Found之类的
3 $.ajaxSetup
$.ajaxSetup的作用是为所有ajax请求设置默认值。其函数签名为:
ajaxSetup(options)
// 其中options就相当于我们在$.ajax中设置的settings。
这个函数会在我们发出的ajax请求之前执行,为我们的ajax请求附上默认值,如果我们自己写的ajax请求中的选项与$.ajaxSetup中设置的选项重合,那么就会覆盖默认选项。
值得注意的options中也可以添加上默认的success、error这些事件的回调函数,但需要注意的是这和我们上面的$.ajaxError不同,在options中设置事件回调函数并不是全局的,而是局部的,因为本来我们也是为发出的ajax请求写默认值,而这些写在ajax请求内的监听器就是局部的。
见官网:
4 $.ajaxPrefilter
$.ajaxPrefilter会在我们写的ajax请求发出前拦截下来,其函数签名为:
ajaxPrefilter([dataTypes], (options, originalOptions, jqXHR) => {
// 业务代码写在这里
})
第一个参数dataTypes是可选参数。包含一个或多个字符串,用空格分隔,表示要拦截的请求的dataTypes(这也是我们发送ajax请求时settings中的一个选项)。比如下面代码表示只拦截响应为json或者script类型的请求。
$.ajaxPrefilter( "json script", function( options, originalOptions, jqXHR ) {
// 业务代码写在这里
})
第二个参数是一个回调函数,表明我们想如何处理即将发出的ajax请求。其中的四个参数意义分别为:
options:我们发送ajax请求时的settingsoriginalOptions :我们写在$.ajax()方法中的settings。这个与第一个参数的区别是,不包括默认的配置,比如通过$.ajaxSetup配置的选项,是不会出现这个参数中,只会出现在第一个参数中jqXHR :上面介绍过了,就是jQuery帮我们封装的XMLHttpRequest对象
5 总结
讲完这三个函数的用法,不难发现其实三个函数的功能是有些重合的,比如异常处理器硬要说的话,三个函数都能做到。
关键点在于$.ajaxSetup设定的是请求默认值,而$.ajaxPrefilter是直接能改写我们写在$.ajax()中的内容,而$.ajaxError只能设置全局的事件监听器。
精彩链接
发表评论