如何在Angular 17项目中全局配置Axios并免重复导入

需求背景 #

之前在 Vue 项目中，通过修改 axios.defaults.baseURL 实现了全项目 API 请求无需填写完整 URL。现在在 Angular 17 项目中已创建 src/axios.ts 配置了 baseURL，希望全局复用这个配置后的 Axios 实例，无需在每个服务/组件中单独导入，直接使用 axios.get('/card') 这类简化写法。

方案一：依赖注入实现全局复用（Angular 推荐方案） #

这种方式符合 Angular 依赖注入的设计理念，类型提示友好且便于测试。

1. 修改 src/axios.ts，创建独立 Axios 实例
   用 create 方法创建专属实例，避免污染全局 Axios：

import axios from 'axios';
import { InjectionToken } from '@angular/core';

// 创建配置好 baseURL 的 Axios 实例
export const axiosInstance = axios.create({
  baseURL: 'http://localhost:3000/api/v1'
});

// 创建注入令牌，用于全局提供实例
export const AXIOS_INSTANCE = new InjectionToken('AxiosInstance', {
  providedIn: 'root',
  factory: () => axiosInstance
});

2. 在组件/服务中注入使用
   无需额外全局注册，直接通过注入令牌获取实例：

import { Inject, Injectable } from '@angular/core';
import { AXIOS_INSTANCE } from '../axios';
import type { AxiosInstance } from 'axios';

@Injectable({ providedIn: 'root' })
export class CardService {
  // 注入配置好的 Axios 实例
  constructor(@Inject(AXIOS_INSTANCE) private axios: AxiosInstance) {}

  async getCardList() {
    // 直接使用简化路径请求
    const res = await this.axios.get('/card');
    return res.data;
  }
}

方案二：全局挂载到 Window 对象（不推荐） #

这种方式可以实现无需导入直接使用，但不符合 Angular 最佳实践，不利于后续维护和测试。

1. 修改 src/axios.ts，挂载实例到 Window

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3000/api/v1'
});

// 扩展 Window 类型，避免类型报错
declare global {
  interface Window {
    axios: typeof axiosInstance;
  }
}

// 将实例挂载到全局 Window
window.axios = axiosInstance;
export default axiosInstance;

2. 在 main.ts 中导入确保全局生效

// 先导入配置文件，保证实例挂载完成
import './axios';
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

3. 直接在组件/服务中使用

async getCardList() {
  const res = await window.axios.get('/card');
  return res.data;
}

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