jQuery全局拦截器 | 异常处理器

如果你去了解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请求时，创建的settings
• throwError：就是响应的错误状态码的文本部分。比如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请求时的settings
• originalOptions ：我们写在$.ajax()方法中的settings。这个与第一个参数的区别是，不包括默认的配置，比如通过$.ajaxSetup配置的选项，是不会出现这个参数中，只会出现在第一个参数中
• jqXHR ：上面介绍过了，就是jQuery帮我们封装的XMLHttpRequest对象

5 总结

讲完这三个函数的用法，不难发现其实三个函数的功能是有些重合的，比如异常处理器硬要说的话，三个函数都能做到。

关键点在于$.ajaxSetup设定的是请求默认值，而$.ajaxPrefilter是直接能改写我们写在$.ajax()中的内容，而$.ajaxError只能设置全局的事件监听器。