当前位置：首页 > 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 文件，配置基础实例：

vue实现http拦截

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)
  }
)

响应拦截器

处理响应数据和错误：

vue实现http拦截

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 中全局挂载：

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

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

标签: vue http

分享给朋友：

vue实现tap

Vue 实现 Tap 事件在移动端开发中，Tap 事件比 Click 事件更常用，因为 Click 事件有 300ms 延迟。以下是几种在 Vue 中实现 Tap 事件的方法。使用第三方库安装…

vue实现通讯

Vue 组件通讯方法父子组件通讯父组件向子组件传递数据通过 props，子组件向父组件传递数据通过 $emit 事件。父组件模板： <child-component :message=…

vue实现listview

Vue 实现 ListView 的方法基础列表渲染使用 v-for 指令可以轻松实现基础列表渲染。在 Vue 中，v-for 用于遍历数组或对象，生成动态列表。 <template>…

vue实现幻灯

Vue实现幻灯片的基础方法使用Vue实现幻灯片功能可以通过多种方式完成，以下是几种常见方案：方案一：基于Vue的过渡动画通过Vue的<transition>或<transit…

vue实现单击

Vue 实现单击事件的方法在 Vue 中实现单击事件可以通过 v-on 指令或简写的 @ 符号绑定事件处理器。以下是几种常见的实现方式：基础用法通过 v-on:click 或 @click 绑…

mui实现vue

mui 实现 Vue 的步骤 mui 是一个轻量级的前端框架，常用于移动端开发。结合 Vue 可以实现高效的开发体验。以下是具体实现方法。安装 mui 和 Vue 通过 npm 或 yarn 安装…

vue实现http拦截