当前位置：首页 > VUE

vue实现http拦截

2026-01-08 07:32:37VUE

Vue 实现 HTTP 拦截

在 Vue 项目中，通常通过 Axios 实现 HTTP 拦截功能，用于统一处理请求和响应。以下是具体实现方法：

安装 Axios

通过 npm 或 yarn 安装 Axios：

npm install axios
# 或
yarn add axios

创建 Axios 实例

在 src 目录下创建 utils/request.js 文件，配置基础实例：

import axios from 'axios'

const service = axios.create({
  baseURL: 'https://api.example.com', // 基础地址
  timeout: 5000 // 请求超时时间
})

请求拦截器

在发送请求前统一添加 token 或修改配置：

service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

响应拦截器

处理响应数据和错误：

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      alert(res.message || 'Error')
      return Promise.reject(new Error(res.message || 'Error'))
    }
    return res
  },
  error => {
    if (error.response.status === 401) {
      alert('登录过期，请重新登录')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

导出实例

export default service

在组件中使用

在 Vue 组件中导入并使用：

import request from '@/utils/request'

export default {
  methods: {
    fetchData() {
      request.get('/user/info').then(response => {
        console.log(response)
      })
    }
  }
}

全局挂载（可选）

在 main.js 中全局挂载：

vue实现http拦截

import request from './utils/request'
Vue.prototype.$http = request

通过以上步骤可以实现请求和响应的统一拦截处理，适用于 token 验证、错误处理等场景。拦截器逻辑可根据实际需求调整。

标签: vue http

分享给朋友：

vue聊天实现

Vue 聊天应用实现步骤创建 Vue 项目使用 Vue CLI 或 Vite 初始化项目，安装必要依赖（如 Vue 3、Element UI 或 Vuetify 用于 UI 组件）。 npm c…

vue的实现

Vue 的实现原理 Vue 是一个渐进式 JavaScript 框架，其核心实现主要包括响应式系统、虚拟 DOM、模板编译和组件化机制。以下是 Vue 实现的主要技术细节。响应式系统 Vue 的响…

vue 实现搜索

实现 Vue 搜索功能在 Vue 中实现搜索功能通常涉及以下几个关键步骤：数据绑定与输入监听使用 v-model 双向绑定搜索输入框的值，监听用户输入： <template>…

vue 菜单实现

Vue 菜单实现方法在Vue中实现菜单功能可以通过多种方式完成，以下是几种常见的实现方法：使用v-for动态生成菜单通过数据驱动的方式动态渲染菜单项，适合菜单内容可能变化的场景： <t…

vue实现注册

Vue 实现注册功能注册功能通常涉及前端表单、数据验证、与后端 API 的交互等步骤。以下是一个完整的 Vue 实现注册功能的方案。创建注册表单使用 Vue 的模板语法创建注册表单，包含用户名…

vue实现computed

Vue 中 computed 的实现原理 computed 属性是 Vue 的一个核心特性，它基于响应式依赖进行缓存，仅在依赖发生变化时重新计算。以下是 computed 的实现方式：基本用法在…

vue实现http拦截