1. 前言
在实际开发中，我们经常需要对一些请求进行拦截处理，比如加入请求头、请求体，对返回结果进行统一处理等。而在 Vue.js 中，我们可以通过拦截器（Interceptor）来进行这些操作。但是在拦截器的使用过程中，我们经常会遇到一些兼容性问题，本文将介绍如何处理这些兼容性问题。
2. Vue的拦截器
在 Vue.js 中，我们可以通过 Axios 或者 Vue-resource 等插件来进行网络请求。这些插件都提供了拦截器的支持，用于对请求和响应进行处理。
以 Axios 为例，Axios 提供了 axios.interceptors.request 和 axios.interceptors.response 两个属性，分别用于请求和响应拦截。
axios.interceptors.request.use(config => {
// 在请求发送之前做一些处理
return config
}, error => {
return Promise.reject(error)
})
axios.interceptors.response.use(response => {
// 对响应数据进行处理
return response
}, error => {
return Promise.reject(error)
})
2.1 请求拦截器
请求拦截器 在请求发送之前执行，可以对请求头、请求体进行处理。
在拦截器函数中，我们可以通过参数 config 来访问请求相关的信息， config.headers 存储了请求头信息，config.data 存储了请求体信息。
我们可以通过 config.headers 对请求的头部进行处理，比如加入 token：
axios.interceptors.request.use(config => {
config.headers.authorization = window.localStorage.getItem('token')
return config
}, error => {
return Promise.reject(error)
})
另外，我们也可以对请求的参数进行加密处理，比如对请求体进行加密，不过这需要服务端一起协作来完成。
2.2 响应拦截器
响应拦截器 在接收到响应后执行，可以对响应结果进行处理。
拦截器函数的第一个参数 response 存储了响应的相关信息，比如响应头、响应数据。
我们可以通过 response.headers 来获取响应头信息，通过 response.data 来获取响应的数据。
在响应处理中，我们可以判断响应状态码，对成功或失败的响应进行不同的处理：
axios.interceptors.response.use(response => {
if (response.status === 200) {
handleSuccess(response.data)
} else {
handleError(response.statusText)
}
return response
}, error => {
handleError(error.message)
return Promise.reject(error)
})
3. 兼容性问题
虽然 Vue.js 提供了拦截器的支持，但是在一些浏览器上，比如 IE 等低版本浏览器，可能不支持 ES6 的 Promise 对象，从而导致拦截器无法正常使用。
为了解决这个问题，我们需要引入 Polyfill 来实现 Promise 对象的兼容。
3.1 Polyfill
Polyfill 是一种代码补丁，用于在不支持某个新特性的环境中实现该特性。
在 Vue.js 中，我们可以使用 babel-polyfill 来实现 Promise 对象的兼容。
首先，我们需要安装 babel-polyfill：
npm install --save babel-polyfill然后，我们在入口文件中引入 babel-polyfill：
import 'babel-polyfill'这样就可以在所有脚本中使用 Promise 了。
3.2 IE兼容性问题
除了 Promise 兼容性问题外，在 IE 上还会有一些其他的兼容性问题。比如在 IE 上，请求和响应的头信息可能会丢失。
为了解决这个问题，我们需要手动设置请求头的 Content-Type 属性，并在响应拦截器中手动获取响应头信息。
axios.interceptors.request.use(config => {
if (/Trident/.test(navigator.userAgent)) {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
}
config.transformRequest = [data => {
return qs.stringify(data)
}]
return config
}, error => {
return Promise.reject(error)
})
axios.interceptors.response.use(response => {
let headers = {}
response.headers.replace(/\b(\w+-\w+)\s*:\s*([^\r\n]+)/g, function (matched, key, value) {
headers[key.toLowerCase()] = value
})
response.headers = headers
return response
}, error => {
return Promise.reject(error)
})
在上述代码中，我们通过正则表达式来解析响应头信息，并将响应头信息存储在 response.headers 中。
4. 总结
拦截器是 Vue.js 中非常有用的工具，可以帮助我们对请求和响应进行统一处理，从而简化开发的复杂度。但是在使用拦截器时，我们需要注意兼容性问题，特别是在 IE 上，可能会出现一些问题需要手动解决。