如何在Angular服务中直接添加运行POST AJAX调用的方案咨询

直接运行原生 AJAX 代码的方法 #

Angular 运行在浏览器环境中，原生支持 XMLHttpRequest 标准接口，你不需要引入任何额外模块，就可以直接把旧的 AJAX 代码放到 Angular 服务中运行。
普通客户端场景下不需要安装第三方 Node 模块即可实现需求，如果涉及服务端渲染场景，可以安装 xhr2 作为 XMLHttpRequest 的 polyfill 适配 Node 环境。
举个封装示例：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LegacyAjaxService {
  // 直接复用原有AJAX逻辑，仅需做简单的TS适配即可
  fetchUser(userId: number, callback: (err: Error|null, data?: any) => void) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `/api/users/${userId}`);
    xhr.onload = () => {
      if (xhr.status === 200) {
        callback(null, JSON.parse(xhr.responseText));
      } else {
        callback(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => {
      callback(new Error('网络请求失败'));
    };
    xhr.send();
  }

  // 如果需要适配Angular的RxJS异步习惯，也可以封装为Observable返回
  fetchUserAsObservable(userId: number) {
    return new Observable(observer => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', `/api/users/${userId}`);
      xhr.onload = () => {
        if (xhr.status === 200) {
          observer.next(JSON.parse(xhr.responseText));
          observer.complete();
        } else {
          observer.error(new Error(xhr.statusText));
        }
      };
      xhr.onerror = () => {
        observer.error(new Error('网络请求失败'));
      };
      xhr.send();
    });
  }
}

如果你的旧 AJAX 代码是基于 jQuery 的 $.ajax 实现，只需要引入 jQuery 依赖即可直接运行：

• 执行npm install jquery安装依赖
• 在服务顶部添加import * as $ from 'jquery'，就可以直接复用原有$.ajax的全部逻辑，不需要修改核心代码。

可选的适配优化方案 #

如果后续要逐步迭代代码，你可以直接使用 Angular 自带的 HttpClient 模块替换旧 AJAX 逻辑，原有请求地址、参数处理、响应解析的逻辑都可以直接复用，迁移成本很低，同时可以天然和 Angular 的变更检测、RxJS 生态适配。

注意事项 #

• 直接使用原生 AJAX 或 jQuery AJAX 时，如果出现视图更新不及时的问题，可以注入NgZone服务，在回调中调用ngZone.run()触发变更检测即可
• 原有 AJAX 逻辑中的跨域配置、请求头设置、错误处理规则都可以直接复用，不需要额外调整

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