vue 前端写过滤器 interceptors用法

vue 前端写过滤器 interceptors用法
在Vue前端开发中，可以使用过滤器（filters）或拦截器（interceptors）来对数据进行处理和格式化。

1. Vue过滤器（filters）：
过滤器可以用来对数据进行处理和格式化，并在模板中使用。

可以定义全局过滤器或局部过滤器。

全局过滤器的定义：
```js
// 在Vue的创建之前定义全局过滤器
Vue.filter('uppercase', function(value) {
if (!value) return ''
return value.toUpperCase()
})
```
在模板中使用全局过滤器：
```html
<p>{{ message | uppercase }}</p>
```
局部过滤器的定义：
```js
// 在Vue组件的filters选项中定义局部过滤器
filters: {
uppercase(value) {
if (!value) return ''
return value.toUpperCase()
}
```
在模板中使用局部过滤器：
```html
<p>{{ message | uppercase }}</p>
```
2. Vue拦截器（interceptors）：
拦截器可以用来对HTTP请求或响应进行拦截和处理。

可以定义全局拦截器或局部拦截器。

全局拦截器的定义：
```js
// 在Vue的创建之前定义全局拦截器
e(function (config) {
// 在发送请求前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
e(function (response) {
// 对响应数据进行处理
return response;
}, function (error) {
// 对响应错误进行处理
return Promise.reject(error);
});
局部拦截器的定义：
```js
// 在Vue组件中定义局部拦截器
methods: {
fetchData() {
e(function (config) {
// 在发送请求前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
e(function (response) { // 对响应数据进行处理
return response;
}, function (error) {
// 对响应错误进行处理
return Promise.reject(error);
});
// 发起请求
axios.get('/api/data').then((response) => {
// 处理响应数据
}).catch((error) => {
// 处理错误
});
}
```
拦截器可以在请求发送前和响应返回后进行一些额外的处理，例如添加请求头、处理错误等。

通过拦截器，可以在项目的多个地方共享统一的处理逻辑，提高开发效率。