如果你去了解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只能设置全局的事件监听器。

精彩链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: