在Angular中使用Axios发起HTTP请求是否为不良实践？

我正在学习Angular，当前使用Axios向服务器发起HTTP请求，功能可正常运行，但不确定该做法是否属于不良实践。我想了解：是否可以继续使用Axios，还是应改用Angular自带的HttpClient与订阅模式？该方案存在哪些弊端？我发现多数教程采用HttpClient与订阅模式，但作为初学者，我觉得Axios更容易理解。

以下是我的实现代码：

import { Injectable } from '@angular/core';
import { Student } from './models/Student';
import { students } from './models/StudentList';
import axios from 'axios';

@Injectable({
    providedIn: 'root'
})

export class StudentService {
    students: Student[] = students;

    // adding a new student
    public addStudent(name: string) {
        const addStudent = async (name: string) => {
            try {
                const response = await axios({
                    method: 'POST',
                    url: 'http://localhost:8080/student/add',
                    data: {
                        'name': name
                    }
                });
                if (response.status === 201) {
                    alert('student added');
                }
            }
            catch (err) {
                console.log(err);
            }
        }
        addStudent(name);
    }

    // getting list of all the students
    public getAllStudents(): Student[] {
        const studentList: Student[] = [];
        const getAllStudentsAxios = async () => {
            try {
                const response = await axios({
                    method: 'GET',
                    url: 'http://localhost:8080/student/all'
                });
                // console.log(response.data);
                for (let responseObject of response.data) {
                    const student: Student = new Student();
                    student.id = responseObject.id;
                    student.name = responseObject.name;
                    studentList.push(student);
                }
            }
            catch (err) {
                console.log(err);
            }
        }
        getAllStudentsAxios();
        return studentList;
    }

    // getting student by id
    public getStudentById(id: number): Student {
        const student : Student = new Student();
        const getStudentByIdAxios = async () => {
            try {
                const url = 'http://localhost:8080/student/' + id;
                const response = await axios({
                    method: 'GET',
                    url: url
                });
                student.id = response.data.id;
                student.name = response.data.name;
            }
            catch (err) {
                console.log(err);
            }
        }
        getStudentByIdAxios();
        return student;
    }

    // student registering a course
    public registerCourse(student_id: Number, course_id: number): void {
        alert('course registered ' + student_id + course_id);
    }

    public submitReview(student_id: Number, course_id: Number, rating: Number, review: string) {
        alert(student_id + ' ' + rating + ' ' + review + ' ' + course_id);
    }

    public deleteCourse(student_id: Number, course_id: Number) {
        alert(student_id + ' ' + course_id);
    }

    constructor() { }
}

一、能不能继续用Axios？ #

可以用，但并非Angular生态的首选方案。Axios是通用HTTP客户端，能在Angular项目正常运行，但会错过Angular原生工具的核心优势。

二、用Axios的主要弊端 #

• 生态集成缺失：
  HttpClient与Angular的依赖注入、变更检测无缝配合，Axios需要额外处理异步操作和视图更新的同步问题（比如你代码里getAllStudents直接返回空数组，因为async请求还没完成就return了，组件拿不到真实数据）；同时无法直接使用Angular的HttpInterceptor做全局请求拦截（统一加token、错误处理等），Axios自己写的拦截器和Angular生命周期整合成本更高。
• 异步处理逻辑错误：
  你的getAllStudents和getStudentById存在致命问题：调用异步函数后直接返回初始空值，异步请求完成时数据已经返回给组件，导致组件永远拿不到服务器返回的真实数据。
• 额外依赖体积：
  Angular自带HttpClient，无需额外安装包，引入Axios会增加不必要的打包体积。
• 团队协作成本：
  多数Angular项目采用HttpClient，用Axios会提高新人接手的学习成本，不符合社区通用实践。

三、为什么教程都用HttpClient？ #

• 原生适配：和Angular的DI、RxJS、变更检测完美融合，请求完成后自动触发视图更新。
• 异步能力更强：基于RxJS的订阅模式，可以轻松实现取消请求、重试、合并请求等复杂操作，比Axios的Promise模式更灵活（RxJS有学习门槛，但掌握后是Angular开发的核心技能）。
• 全局统一处理：HttpInterceptor可以一次性搞定请求头添加、错误捕获、loading状态管理等，无需在每个请求里重复写逻辑。
• 类型安全更便捷：配合泛型可以直接将响应数据转换为指定类型，比Axios手动转换更简洁。

四、给你的建议 #

1. 个人练手阶段：可以先用Axios熟悉HTTP请求逻辑，但必须修正异步问题，比如把getAllStudents改成返回Promise：

   public async getAllStudents(): Promise<Student[]> {
       try {
           const response = await axios({
               method: 'GET',
               url: 'http://localhost:8080/student/all'
           });
           return response.data.map(item => {
               const student = new Student();
               student.id = item.id;
               student.name = item.name;
               return student;
           });
       } catch (err) {
           console.log(err);
           return [];
       }
   }
   

   组件里调用时要等待异步完成：

   async ngOnInit() {
       this.students = await this.studentService.getAllStudents();
   }
   

2. 长期学习/团队项目：建议尽快切换到HttpClient，虽然RxJS订阅模式一开始有点绕，但掌握后会大幅提升开发效率。比如用HttpClient重写addStudent：

   import { HttpClient } from '@angular/common/http';
   
   // 构造函数注入HttpClient
   constructor(private http: HttpClient) { }
   
   public addStudent(name: string) {
       this.http.post('http://localhost:8080/student/add', { name })
           .subscribe({
               next: () => alert('student added'),
               error: (err) => console.log(err)
           });
   }
   

3. RxJS入门技巧：可以先把Observable理解成“能多次触发的Promise”，订阅就是监听这个异步事件，先掌握map、catchError等基础操作符，逐步熟悉其优势。

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