vuejs该如何请求拦截

发布时间：2021-09-24 11:18:47 作者：柒染
来源：亿速云阅读：214

# Vue.js该如何请求拦截

## 引言

在现代前端开发中，网络请求是应用与后端交互的核心环节。Vue.js作为主流前端框架，通常需要配合axios等HTTP库实现请求拦截功能。本文将深入探讨在Vue.js中实现请求拦截的完整方案，涵盖以下关键内容：

1. 拦截器的核心概念与应用场景
2. axios拦截器的实现详解
3. 原生fetch API的拦截方案
4. 拦截器在Vue生态中的最佳实践
5. 常见问题与解决方案

## 一、请求拦截的核心概念

### 1.1 什么是请求拦截

请求拦截是指在HTTP请求发送前或响应返回后，对请求/响应进行统一处理的机制。典型应用场景包括：

- 自动添加认证token
- 统一错误处理
- 请求/响应数据格式化
- 加载状态管理
- 日志记录

### 1.2 拦截器的工作流程

[发起请求] → [请求拦截器] → [服务器] → [响应拦截器] → [处理响应]


## 二、axios拦截器实现方案

axios是Vue社区最常用的HTTP库，其拦截器系统非常完善。

### 2.1 基础拦截器配置

```javascript
// axios实例创建
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求前处理
    if (store.getters.token) {
      config.headers['Authorization'] = `Bearer ${getToken()}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    
    if (res.code !== 200) {
      // 处理业务错误
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // 处理HTTP错误
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error)
  }
)

2.2 高级拦截技巧

2.2.1 重试机制实现

const MAX_RETRY = 3
let retryCount = 0

service.interceptors.response.use(null, (error) => {
  const config = error.config
  if (!config || !config.retry) return Promise.reject(error)
  
  retryCount++
  if (retryCount >= MAX_RETRY) {
    retryCount = 0
    return Promise.reject(error)
  }
  
  return new Promise(resolve => {
    setTimeout(() => resolve(service(config)), 1000)
  })
})

2.2.2 请求取消

const CancelToken = axios.CancelToken
const source = CancelToken.source()

// 在请求配置中添加
{
  cancelToken: source.token
}

// 取消请求
source.cancel('Operation canceled by user')

三、原生fetch拦截方案

虽然axios更流行，但了解fetch的拦截实现也很重要。

3.1 封装fetch实现拦截

async function request(url, options = {}) {
  // 请求拦截
  const headers = new Headers(options.headers || {})
  headers.append('Authorization', getToken())
  
  // 发起请求
  const response = await fetch(url, {
    ...options,
    headers
  })
  
  // 响应拦截
  if (!response.ok) {
    throw new Error(response.statusText)
  }
  
  const data = await response.json()
  return data
}

3.2 使用Proxy高级封装

const fetchProxy = new Proxy(fetch, {
  apply(target, thisArg, args) {
    const [url, options] = args
    
    // 请求前处理
    const modifiedOptions = {
      ...options,
      headers: {
        ...options.headers,
        'X-Requested-With': 'FetchProxy'
      }
    }
    
    return target(url, modifiedOptions)
      .then(response => {
        // 响应后处理
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        return response.json()
      })
  }
})

四、Vue生态中的最佳实践

4.1 与Vuex配合使用

// 在请求拦截中提交loading状态
service.interceptors.request.use(config => {
  store.commit('SET_LOADING', true)
  return config
})

// 在响应拦截中清除loading
service.interceptors.response.use(
  response => {
    store.commit('SET_LOADING', false)
    return response
  },
  error => {
    store.commit('SET_LOADING', false)
    return Promise.reject(error)
  }
)

4.2 与Vue Router集成

// 响应拦截处理401错误
service.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

4.3 组合式API封装

// useRequest.js
import { ref } from 'vue'
import axios from 'axios'

export function useRequest() {
  const loading = ref(false)
  const error = ref(null)
  
  const request = async (config) => {
    loading.value = true
    try {
      const response = await axios(config)
      return response.data
    } catch (err) {
      error.value = err
      throw err
    } finally {
      loading.value = false
    }
  }
  
  return { loading, error, request }
}

五、常见问题与解决方案

5.1 拦截器执行顺序问题

axios拦截器按照注册顺序执行，但需要注意：

请求拦截器：先添加的后执行（栈结构）
响应拦截器：先添加的先执行（队列结构）

5.2 拦截器内存泄漏

在Vue组件中直接添加拦截器需在unmounted时移除：

onMounted(() => {
  const interceptor = axios.interceptors.request.use(...)
  
  onUnmounted(() => {
    axios.interceptors.request.eject(interceptor)
  })
})

5.3 多实例拦截器管理

当使用多个axios实例时，应为每个实例单独配置拦截器：

const api1 = axios.create()
const api2 = axios.create()

api1.interceptors.request.use(...)
api2.interceptors.request.use(...)

六、性能优化建议

精简拦截逻辑：避免在拦截器中执行复杂计算
按需加载拦截器：根据路由动态注册拦截器
使用缓存：对重复请求进行缓存处理
节流控制：高频请求进行节流处理

结语

请求拦截是Vue.js应用开发中的关键技术点，良好的拦截器设计可以显著提升代码维护性和开发效率。本文介绍了从基础到高级的各种实现方案，开发者可以根据项目需求选择合适的实现方式。随着Vue3的普及，组合式API为拦截器管理提供了更灵活的方案，值得深入探索。

最佳实践提示：对于大型项目，建议将拦截器逻辑封装为独立模块，并通过插件机制集成到Vue应用中，保持业务代码的简洁性。 “`

本文共计约2250字，涵盖了Vue.js请求拦截的完整技术方案，从基础实现到高级技巧，并提供了多种场景下的代码示例。文章采用标准的Markdown格式，包含代码块、列表、强调等元素，便于阅读和技术文档的维护。