使用 Angular 通过 HTTP 发送 SOAP 请求？

Question

我正在使用简单的 HTML、CSS 和 Angular 开始一个新的 Web 应用程序项目。我们正在使用现有的 Web 服务从某些服务器检索数据，我们尝试使用的一项服务是公共服务：Global Weather SOAP Service

有没有一种“简单”的方法来用 Angular 发出请求？实际上我们的“测试”代码是这样的（使用 JQuery，仍然不起作用），但是使用 HTTP 或 RxJS 实现 Angular 方法会更好......

import { Injectable } from '@angular/core';
import * as $ from 'jquery';

@Injectable()
export class SoapServiceProvider {

    constructor() { }

    testingSoapRequest() {

        $.ajax({
            url: 'http://www.webservicex.net/globalweather.asmx?op=GetCitiesByCountry',
            data: { CountryName: 'Spain' },
            success: (data) => {
                console.log('Hey, we got a success response', data);
            },
            error: (err) => {
                console.error('We got an error :(', err);
            }
        });

    }

}

我从未使用过 JQuery 发出任何类型的请求（我只是在 AngularJS 中使用 $http 以及在 Angular 中使用 RxJS），所以我真的不知道实现它的正确方法。

注意：GitHub 中有一个用于发出 Angular SOAP 请求的库，但似乎不再适用于新的 Angular 版本。

这是 GitHub Autopulous SOAP 链接...

Answer 1

首先，不要使用 jQuery，Angular 为您提供了开箱即用所需的一切，而且速度更快，通常也更强大。

这是一个发出 http 请求的 Ionic Page 示例：

import {Page, Alert, NavController} from 'ionic/ionic';
import {Http} from 'angular2/http';

@Page({
    templateUrl: 'build/pages/home/home.html',
})

export class HomePage {
    constructor(http: Http, nav: NavController) {
        this.http = http;
        this.nav = nav;
    }

    makeGetRequest() {
        this.http.get("https://httpbin.org/ip")
        .subscribe(data => {
            var alert = Alert.create({
                title: "Your IP Address",
                subTitle: data.json().origin,
                buttons: ["close"]
            });
            this.nav.present(alert);
        }, error => {
            console.log(JSON.stringify(error.json()));
        });
    }

    makePostRequest() {
        this.http.post("https://httpbin.org/post", "firstname=Nic")
        .subscribe(data => {
            var alert = Alert.create({
                title: "Data String",
                subTitle: data.json().data,
                buttons: ["close"]
            });
            this.nav.present(alert);
        }, error => {
            console.log(JSON.stringify(error.json()));
        });
    }
}

该逻辑可以连接到像这样的简单模板：

<ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <button (click)="makeGetRequest()">GET Request</button>
    <button (click)="makePostRequest()">POST Request</button>
</ion-content>

现在，由于您使用的是 SOAP 消息传递，因此您需要将 JSON 转换为 SOAP 兼容的 XML，并在收到响应时以类似方式解构它。

我强烈建议您不要使用 SOAP，因为尽管它是一种较旧的技术，但由于注释相同数据需要更详细的代码，消息要大得多，最重要的是，转换 JSON -> XML 很慢，尤其是在 JavaScript 中。

话虽如此，这里有一个非常流行的库可以在两种类型之间进行转换。

Answer 2

是的 - 有一种方法可以在 Angular 中使用 SOAP 服务；不需要第三方包或库。 简而言之，您将响应类型设置为文本，从 XML 文本构造 XML 文档，然后（如果需要）将 XML 文档解析为 JSON 格式。

工作演示： https://stackblitz.com/edit/angular-soap-test

以下是使用 Angular 8 的步骤，尽管它们也应该适用于 Angular 2+（或几乎相同）：

1. 请求 SOAP 资源作为文本：

     import { HttpClient, HttpParams } from '@angular/common/http';
     import { map } from 'rxjs/operators';

     // ...
     const params = new HttpParams();
     params.set('firstName', 'Peter');
     params.set('lastName', 'Parker');        

     this.http.get(YOUR_SOAP_SERVICE_URL, {responseType: 'text', params })
         .pipe(
           map((xmlString: string)=>{
             const asJson = this.xmlStringToJson(xmlString);
             return asJson;
           }),
           catchError((err)=> {
             console.warn('INT ERR:', err);
             return err;     
           })
         );

2. 从 JSON 字符串构建 XML 文档

    xmlStringToJson(xml: string)
    {
      const oParser = new DOMParser();
      const xmlDoc = oParser.parseFromString(xml, "application/xml");

3. 将 XML 文档转换为 JSON

    /* xmlStringToJson(xml: string) */
    // ...
    return this.xmlToJson(xmlDoc);
  }

  // ...

  /**
   * REF: https://davidwalsh.name/convert-xml-json
   */
  xmlToJson(xml)
  {
    // Create the return object
    var obj = {};

    if (xml.nodeType == 1) { // element
      // do attributes
      if (xml.attributes.length > 0) {
      obj["@attributes"] = {};
        for (var j = 0; j < xml.attributes.length; j++) {
          var attribute = xml.attributes.item(j);
          obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
        }
      }
    } else if (xml.nodeType == 3) { // text
      obj = xml.nodeValue;
    }

    // do children
    if (xml.hasChildNodes()) {
      for(var i = 0; i < xml.childNodes.length; i++) {
        var item = xml.childNodes.item(i);
        var nodeName = item.nodeName;
        if (typeof(obj[nodeName]) == "undefined") {
          obj[nodeName] = this.xmlToJson(item);
        } else {
          if (typeof(obj[nodeName].push) == "undefined") {
            var old = obj[nodeName];
            obj[nodeName] = [];
            obj[nodeName].push(old);
          }
          obj[nodeName].push(this.xmlToJson(item));
        }
      }
    }
    return obj;
  }