axios移除拦截器

最新推荐文章于 2025-04-29 02:45:00 发布

原创

最新推荐文章于 2025-04-29 02:45:00 发布

· 5k 阅读

6 ·

版权

文章标签：

#vue

本文介绍了在Vue项目中如何管理和移除Axios拦截器。通过示例代码展示了在main.js和home.vue中使用Axios，以及在发送请求前移除拦截器的问题。由于Vue的SPA特性，移除拦截器会影响所有页面，因此提出通过路由判断或导航守卫来实现特定页面不使用拦截器的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录结构如下：
在这里插入图片描述

axios实例有

/**
 *  Axios 实例, ajax请求底层方法
 *  官方文档 [https://github.com/axios/axios]{@link https://github.com/axios/axios}
 *  @module utils/axios
 */

import axios from 'axios'
// axios.defaults.withCredentials = true

/**
 * 取消请求
 * @type {CancelTokenSource}
 * @example
 *
 * import {source} from '@/utils/axios'
 * source.cancel('描述文字....')
 */
export const source = axios.CancelToken.source()

/**
 * Axios实例化参数选项对象
 * @const
 * @type {object}
 * @property {object} headers 请求头对象对象，默认：null
 * @property {number} timeout 超时时间，默认：0， 不限制
 * @property {boolean} withCredentials 是否带上验证信息， 默认：true
 * @property {number} maxContentLength 限制最大发送内容长度，默认：-1 不限制
 */
const config = {
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  baseURL:'https://www.abc.com/api',
  timeout: 0,
  responseType: 'json',
  maxContentLength: -1,
  cancelToken: source.token,
  withCredentials:true
}

const service = axios.create(config)


/**
 * Axios 实例
 * @example
 *
 *  // 基础用法
 *  import axios from '@/utils/axios'
 *  axios({
 *    method: 'post',
 *    url: '/user/123',
 *    data: {
 *      firstName: 'Fred',
 *      lastName: 'Flintstone'
 *    }
 *  })
 *
 *  @example
 *
 *  // 实例方法
 *  axios.request(config)
 *  axios.get(url[, config])
 *  axios.delete(url[, config])
 *  axios.head(url[, config])
 *  axios.options(url[, config])
 *  axios.post(url[, data[, config]])
 *  axios.put(url[, data[, config]])
 *  axios.patch(url[, data[, config]])
 *
 * @example config
 * {
*   // `url` is the server URL that will be used for the request
*   url: '/user',
*
*   // `method` is the request method to be used when making the request
*   method: 'get', // default
*
*   // `baseURL` will be prepended to `url` unless `url` is absolute.
*   // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
*   // to methods of that instance.
*   baseURL: 'https://some-domain.com/api/',
*   // `transformRequest` allows changes to the request data before it is sent to the server
*   // This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
*   // The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
*

最低0.47元/天解锁文章