vuejs該如何請求攔截

# 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(...)

六、性能優化建議

1. 精簡攔截邏輯：避免在攔截器中執行復雜計算
2. 按需加載攔截器：根據路由動態注冊攔截器
3. 使用緩存：對重復請求進行緩存處理
4. 節流控制：高頻請求進行節流處理

結語

請求攔截是Vue.js應用開發中的關鍵技術點，良好的攔截器設計可以顯著提升代碼維護性和開發效率。本文介紹了從基礎到高級的各種實現方案，開發者可以根據項目需求選擇合適的實現方式。隨著Vue3的普及，組合式API為攔截器管理提供了更靈活的方案，值得深入探索。

最佳實踐提示：對于大型項目，建議將攔截器邏輯封裝為獨立模塊，并通過插件機制集成到Vue應用中，保持業務代碼的簡潔性。 “`

本文共計約2250字，涵蓋了Vue.js請求攔截的完整技術方案，從基礎實現到高級技巧，并提供了多種場景下的代碼示例。文章采用標準的Markdown格式，包含代碼塊、列表、強調等元素，便于閱讀和技術文檔的維護。