axios实例配置和使用

一.vite项目中引入axios

1.1.安装axios

pnpm add axios --save

二.配置axios实例

2.1实例配置

import axios from ‘axios’

import router from ‘@/router’

const instance = axios.create({

baseURL:“http://127.0.0.1:8080”,

timeout:10*1000, //最长响应时间

})

instance.interceptors.request.use(function (config) {

//如果有token则携带

// if(userStore.token)

// {

// config.headers.token = userStore.token

// }

return config;

}, function (error) {

// 对请求错误做些什么

return Promise.reject(error);

});

// 添加响应拦截器

instance.interceptors.response.use(function (response) {

//正常响应

console.log(response)

if(response.data.code===200)

### Vite 配置代理失效与 Axios 实例重写解决方案 在使用 Vite 开发时,如果配置了代理但仍然遇到请求未被正确代理的问题,可能是因为 Axios 的请求实例绕过了 Vite 的开发服务器代理。以下是解决此问题的详细方法: #### 1. 确保 Vite 代理配置正确 Vite 的代理配置通过 `vite.config.ts` 中的 `server.proxy` 属性完成。以下是一个典型的配置示例[^1]: ```typescript import { defineConfig, loadEnv } from "vite"; export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd()); return { server: { proxy: { [env.VITE_APP_BASE_API]: { target: "https://vue.youlai.tech", // 目标接口地址 changeOrigin: true, // 支持跨域 rewrite: (path) => path.replace(new RegExp(`^${env.VITE_APP_BASE_API}`), "/prod-api"), // 重写路径 }, }, }, }; }); ``` 确保 `target` 地址 `rewrite` 方法逻辑无误,并且环境变量 `VITE_APP_BASE_API` 已正确定义。 #### 2. Axios 请求基础路径设置 Axios 默认不会自动使用 Vite 的代理配置。需要通过设置 Axios 的 `baseURL` 来匹配 Vite 的代理前缀[^2]。例如: ```javascript import axios from "axios"; const instance = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, // 使用环境变量设置基础路径 }); export default instance; ``` 确保 `baseURL` 与 Vite 配置中的代理前缀一致(如 `/api` 或其他自定义值)。 #### 3. 检查 Axios 请求路径 当 Axios 发起请求时,路径必须以代理前缀开头。例如,如果代理前缀为 `/api`,请求路径应为 `/api/some-endpoint` 而不是 `/some-endpoint`。否则,Vite 的代理规则将无法匹配到该请求[^3]。 #### 4. 解决 Axios 实例重写导致的问题 如果对 Axios 实例进行了二次封装(如拦截器配置),需确保封装后的实例仍保留正确的 `baseURL` 路径规则。以下是一个常见的封装示例[^5]: ```typescript import axios from "axios"; import Interceptors from "./interceptors"; class HttpServer { axios: any; constructor() { this.axios = new Interceptors().getInterceptors(); this.axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_API; // 设置基础路径 } request(config: AxiosRequestConfig) { return this.axios.request(config); } } export default new HttpServer(); ``` #### 5. 环境变量支持 确保项目中正确加载了环境变量。可以通过 `loadEnv` 方法加载 `.env` 文件中的变量。例如: ```typescript const env = loadEnv(mode, process.cwd()); console.log(env.VITE_APP_BASE_API); // 输出环境变量值 ``` #### 6. TypeScript 类型扩展 如果使用 TypeScript 并遇到类型错误(如 `duplicateRequestValidation` 未定义),可以扩展 Axios 的类型定义[^4]。创建一个 `shims.axios.d.ts` 文件: ```typescript import { AxiosRequestConfig } from "axios"; declare module "axios" { export interface AxiosRequestConfig { duplicateRequestValidation?: boolean; // 是否启动接口重复请求校验 duplicateRequestValidationTime?: number; // 限制接口多少时间内只能请求一次 } } ``` #### 7. 测试与验证 - 启动开发服务器后,检查网络请求是否正确代理到目标地址。 - 如果代理仍然不生效,尝试清除浏览器缓存或切换到无痕模式测试。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1无名之辈1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值