使用 Angular 通过 HTTP 发送 SOAP 请求

Question

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

有没有一种"简单"的方法可以使用 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，RxJS与Angular一起使用(，所以我真的不知道实现它的正确方法。

注意：GitHub 中有一个库可以发出 Angular SOAP 请求，但似乎在新的 Angular 版本中不再有效。

这是GitHub Autopulous SOAP链接...

Answer 1

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

下面是一个 Ionic Page 示例，发出 http 请求：

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;
  }