uniapp中怎么封装拦截器

在 Uniapp 中，可以通过封装拦截器来实现全局的请求拦截、响应拦截等功能。下面是一个简单的拦截器封装示例：

1. 在项目的 common 目录下新建一个 interceptor.js 文件，用于存放拦截器的代码。

2. 在 interceptor.js 中定义一个拦截器对象，包含请求拦截和响应拦截两个函数：

const interceptor = {
  // 请求拦截
  request: function(config) {
    // 在请求被发送之前做些什么
    // 可以在这里添加全局的请求参数、请求头等配置
    return config;
  },

  // 响应拦截
  response: function(response) {
    // 在这里对响应数据做些什么
    // 可以在这里添加全局的响应处理逻辑
    return response;
  }
};

export default interceptor;

3. 在 main.js 中引入 interceptor.js，并将其挂载到 Vue.prototype 上，使其成为全局可用的插件：

import interceptor from './common/interceptor';

Vue.prototype.$interceptor = interceptor;

4. 在需要使用拦截器的地方，如 http.js 文件中，通过以下方式使用拦截器：

import Vue from 'vue';
import axios from 'axios';

Vue.prototype.$http = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000
});

// 请求拦截
Vue.prototype.$http.interceptors.request.use(config => {
  // 在请求被发送之前做些什么
  // 可以在这里添加全局的请求参数、请求头等配置
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截
Vue.prototype.$http.interceptors.response.use(response => {
  // 在这里对响应数据做些什么
  // 可以在这里添加全局的响应处理逻辑
  return response;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

这样就完成了一个简单的拦截器封装。在实际使用中，可以根据项目需求添加更多的拦截器功能，如：错误处理、权限验证等。