vue拦截器都有什么

Vue拦截器（Interceptors）是用来在请求发送或响应返回之前，对请求或响应进行全局处理的机制。Vue提供了两种拦截器：请求拦截器和响应拦截器。

一、请求拦截器

1. request拦截器：用于在发送请求之前对请求进行处理。包括以下功能：

• 修改请求配置：如添加请求头、设置请求超时时间等。
• 验证用户登录状态：如判断是否携带token等。
• 添加全局loading效果：如在发送请求时显示loading提示。

二、响应拦截器

1. response拦截器：用于在接收到响应之后对响应进行处理。包括以下功能：

• 统一处理错误信息：如根据状态码给出对应的错误提示。
• 进行数据转换：如将响应数据进行统一格式化。
• 在接收到响应之后进行全局loading关闭等操作。

三、使用方法
通过Vue的实例方法，可以使用拦截器来拦截请求和响应：

1. Vue.prototype.$http.interceptors.request.use(config => {…}): 添加请求拦截器。
2. Vue.prototype.$http.interceptors.response.use(response => {…}): 添加响应拦截器。

四、示例代码
以下是一个使用axios库进行网络请求时的拦截器示例：

import axios from 'axios';

axios.interceptors.request.use(
  config => {
    // 在请求发送之前对config进行处理
    // 添加请求头、设置请求超时时间等等
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  response => {
    // 对响应进行处理
    // 统一处理错误信息、数据转换等等
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);

export default axios;

以上就是Vue拦截器的基本内容，通过拦截器可以实现对请求和响应的全局处理，提高代码的复用性和可维护性。

Vue拦截器（Interceptors）提供了一种在请求发送之前或响应返回之后，执行预处理或后处理的机制。这可以用于在发出请求或接收响应时，对请求或响应进行全局的处理、修改或日志记录。在Vue中，主要有以下四种类型的拦截器：

1. 请求拦截器（request interceptor）：在请求被发送之前拦截请求。可以用于添加请求头、修改请求数据等操作。可以通过axios.interceptors.request.use()方法添加请求拦截器。

2. 响应拦截器（response interceptor）：在接收响应之后拦截响应。可以用于对响应数据进行处理、错误处理等操作。可以通过axios.interceptors.response.use()方法添加响应拦截器。

3. 请求错误拦截器（request error interceptor）：当发送请求时出现错误，如网络错误或请求超时等，可以通过请求错误拦截器进行处理。可以通过axios.interceptors.request.use(null, error => {})方法添加请求错误拦截器。

4. 响应错误拦截器（response error interceptor）：当接收响应时发生错误，如请求被服务器拒绝、响应状态码非正常等，可以通过响应错误拦截器进行处理。可以通过axios.interceptors.response.use(response => {}, error => {})方法添加响应错误拦截器。

使用拦截器可以很方便地对请求和响应进行处理。比如，可以在请求头中添加认证信息、在请求发送前添加loading动画、在响应返回后进行统一的错误处理等。拦截器提供了灵活而强大的机制，能够对整个应用的请求和响应进行全局的管理和处理。

Vue拦截器主要有路由拦截器和HTTP请求拦截器两种。

一、路由拦截器

在Vue中，可以使用路由守卫进行路由拦截器的操作。路由守卫主要包括三种类型：全局前置守卫、全局后置守卫和路由独享的守卫。

1. 全局前置守卫

全局前置守卫会在路由切换之前被调用，可以用于进行权限校验、登录状态检查等操作。常用的全局前置守卫有beforeEach和beforeResolve。

// router.js
import router from 'vue-router'

router.beforeEach((to, from, next) => {
  // 在进入路由前进行权限校验、登录状态检查等操作
  next()
})

router.beforeResolve((to, from, next) => {
  // 在解析完异步路由组件后，进入路由前的最后一道关卡
  next()
})

2. 全局后置守卫

全局后置守卫会在路由切换之后被调用。常用的全局后置守卫有afterEach。

// router.js
import router from 'vue-router'

router.afterEach((to, from) => {
  // 在路由切换之后进行一些操作，比如页面滚动、埋点等
})

3. 路由独享的守卫

路由独享的守卫会在单个路由配置中进行声明，只对当前路由有效。常用的路由独享的守卫有beforeEnter。

// router.js
import router from 'vue-router'

const routes = [
  {
    path: '/home',
    component: Home,
    beforeEnter: (to, from, next) => {
      // 在进入当前路由前进行一些操作
      next()
    }
  }
]

二、HTTP请求拦截器

在Vue中，可以使用axios进行HTTP请求的拦截。axios提供了interceptors属性，可以对请求和响应进行拦截器的配置。常用的拦截器有request和response。

1. 请求拦截器

// axios.js
import axios from 'axios'

axios.interceptors.request.use(config => {
  // 在发送请求之前对config进行处理，比如添加token、处理请求参数等
  return config
}, error => {
  // 请求错误处理
  return Promise.reject(error)
})

2. 响应拦截器

// axios.js
import axios from 'axios'

axios.interceptors.response.use(response => {
  // 对响应数据进行处理，比如统一处理错误、处理返回结果等
  return response
}, error => {
  // 请求错误处理
  return Promise.reject(error)
})

拦截器的操作流程是：请求拦截器 -> 发送请求 -> 响应拦截器。拦截器可以用于统一处理请求头、处理错误、添加全局loading等操作，提高代码的复用性和可维护性。