如何使用Angular 2与TypeScript 2发送带WSDL的SOAP请求？

架构老林

2026-5-26

在Angular 2 + TypeScript 2中调用带WSDL的SOAP服务的实现方法

当然可以实现！在Angular 2 + TypeScript 2环境下调用带WSDL的SOAP服务，有两种比较实用的方案，我给你详细拆解下：

方案一：手动构造SOAP请求（适合简单服务场景）

如果你的SOAP服务操作不多、参数结构简单，手动构造请求体是最直接的方式，借助Angular 2自带的Http模块就能完成：

先在模块中导入Http模块
打开你的根模块（比如AppModule），引入并导入HttpModule：

import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [HttpModule]
})
export class AppModule { }

创建SOAP服务封装类
新建一个服务类（比如SoapService），注入Http，构造符合WSDL要求的SOAP信封（Envelope），并发送请求：

import { Http, Headers } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class SoapService {
  // 替换成你的SOAP服务实际地址
  private soapEndpoint = 'http://your-service-domain.com/soap-service';

  constructor(private http: Http) { }

  // 示例：调用名为GetUserInfo的SOAP操作
  getUserInfo(userId: string): Observable<string> {
    // 根据WSDL定义的命名空间和操作，构造SOAP请求体
    const soapBody = `
      <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:user="http://your-service-namespace/user">
        <soapenv:Header/>
        <soapenv:Body>
          <user:GetUserInfo>
            <user:UserId>${userId}</user:UserId>
          </user:GetUserInfo>
        </soapenv:Body>
      </soapenv:Envelope>
    `;

    // 设置SOAP请求必须的请求头
    const headers = new Headers({
      'Content-Type': 'text/xml;charset=UTF-8',
      // 替换成对应操作的SOAPAction，可从WSDL中找到
      'SOAPAction': 'http://your-service-namespace/user/GetUserInfo'
    });

    // 发送POST请求并解析XML响应
    return this.http.post(this.soapEndpoint, soapBody, { headers })
      .map(response => {
        // 用DOMParser解析XML响应
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(response.text(), 'text/xml');
        // 提取响应中的目标节点值，这里假设响应节点是UserInfoResult
        return xmlDoc.getElementsByTagName('UserInfoResult')[0].textContent;
      });
  }
}

在组件中调用服务
在你的业务组件中注入SoapService，调用封装好的方法：

import { Component } from '@angular/core';
import { SoapService } from './soap.service';

@Component({
  selector: 'app-user',
  template: '<button (click)="fetchUser()">获取用户信息</button>'
})
export class UserComponent {
  constructor(private soapService: SoapService) { }

  fetchUser() {
    this.soapService.getUserInfo('123').subscribe(
      userData => console.log('用户信息:', userData),
      error => console.error('请求失败:', error)
    );
  }
}

如果XML响应结构复杂，手动解析太麻烦，可以安装xml2js库（npm install xml2js --save），用它把XML转换成JSON对象，处理起来更方便。

方案二：用工具生成TypeScript客户端代码（复杂服务首选）

如果你的SOAP服务有很多操作、参数结构复杂，手动写SOAP信封容易出错，推荐用工具根据WSDL自动生成TypeScript客户端代码，这样能直接调用类型化的方法，效率更高：

安装代码生成工具
比如用wsdl2ts，先全局安装：
```
npm install -g wsdl2ts
```
根据WSDL生成代码
执行命令，指定WSDL地址和输出目录：
```
wsdl2ts -o ./src/app/soap-client http://your-service-domain.com/soap-service?wsdl
```
执行后，会在指定目录生成对应的TypeScript类，包含服务操作、请求/响应模型等。
使用生成的客户端代码
在你的Angular服务中，导入生成的服务类，结合Http模块调用即可。比如生成的类可能叫UserService，里面有getUserInfo方法，直接实例化调用就行，不用再手动写SOAP信封。

额外注意：跨域问题处理

如果你的Angular应用和SOAP服务不在同一个域名下，开发阶段会遇到跨域问题，解决方法有两种：

让SOAP服务端配置CORS，允许你的应用域名访问；
用Angular的代理配置：新建proxy.conf.json文件：
```
{
  "/soap-service": {
    "target": "http://your-service-domain.com",
    "secure": false,
    "changeOrigin": true
  }
}
```
然后启动项目时加上代理参数：ng serve --proxy-config proxy.conf.json

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

如何使用Angular 2与TypeScript 2发送带WSDL的SOAP请求？

方案一：手动构造SOAP请求（适合简单服务场景） #

方案二：用工具生成TypeScript客户端代码（复杂服务首选） #

额外注意：跨域问题处理 #

方案一：手动构造SOAP请求（适合简单服务场景）

方案二：用工具生成TypeScript客户端代码（复杂服务首选）

额外注意：跨域问题处理