如何在Axios请求拦截器中终止请求并直接返回空数组？

完全可以在Axios请求拦截器里拦截这类请求，直接返回模拟的空数组响应，不用发起实际网络请求。下面是具体的修改方案，我会标注关键改动：

核心思路 #

Axios的请求拦截器不仅可以修改请求配置，还可以返回一个已resolve的Promise——当你返回这个Promise时，Axios会直接把它作为响应结果返回给调用方，跳过实际的网络请求流程。同时我们还要处理好请求计数和加载状态，避免页面一直显示加载中。

修改后的完整代码 #

import Axios from 'axios'
import store from '@/store'
const AxiosConfig = Axios.create({ baseURL: process.env.VUE_APP_BASE_API_URL })
const addToken = (config) => {
  const token = store.getters['AuthModule/getAuthToken']
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
}
let numOfRequests = 0
AxiosConfig.interceptors.request.use(
  (config) => {
    addToken(config)
    
    // 关键改动1：判断autocomplete参数是否符合拦截条件
    // 用可选链避免没有params或autocomplete时报错
    if (config.params?.autocomplete?.length < 2) {
      // 直接返回模拟的响应结构，和正常Axios响应格式一致
      return Promise.resolve({ data: [] })
    }
    
    // 只有不拦截的请求才执行加载状态和计数逻辑
    store.commit('SET_LOADER_TO_STATE', true)
    numOfRequests++
    return config
  },
  (error) => {
    store.commit('SET_LOADER_TO_STATE', false)
    numOfRequests--
    return Promise.reject(error)
  }
)
AxiosConfig.interceptors.response.use(
  (response) => {
    numOfRequests--
    if (numOfRequests === 0) {
      store.commit('SET_LOADER_TO_STATE', false)
    }
    return response
  },
  (error) => {
    store.commit('SET_LOADER_TO_STATE', false)
    numOfRequests--
    if (numOfRequests === 0) {
      store.commit('SET_LOADER_TO_STATE', false)
    }
    if (
      error.response.status === 401 &&
      error?.response?.data?.error?.message === 'Unauthenticated.'
    ) {
      store.dispatch('AuthModule/logoutUser')
      return
    }
    if (error?.response?.data?.error) {
      throw new Error(
        error?.response?.data?.error.message ||
          error.response.data.error ||
          error.response.data
      )
    } else if (error?.response?.data?.errors) {
      const errors = {}
      const errorsList = error?.response?.data?.errors
      for (const key in errorsList) {
        if (Object.prototype.hasOwnProperty.call(errorsList, key)) {
          errors[key] = errorsList[key][0]
        }
      }
      throw new Error(JSON.stringify(errors))
    } else if (error) {
      throw new Error(error.response.data.message)
    } else {
      throw new Error('Network Error')
    }
  }
)
export default AxiosConfig

关键细节说明 #

1. 可选链判断：用config.params?.autocomplete?.length避免当请求没有params或者params里没有autocomplete字段时抛出Cannot read properties of undefined错误。
2. 模拟响应结构：返回的Promise.resolve({ data: [] })完全符合Axios的响应格式，调用方用response.data就能拿到空数组，和正常请求的使用方式完全一致，不需要修改业务代码。
3. 加载状态处理：把加载状态和请求计数的逻辑放在拦截判断之后，这样被拦截的请求不会触发加载状态，也不会影响请求计数的准确性。

内容的提问来源于stack exchange，提问作者Riza Khan