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 Requests的库，但它似乎不再适用于新的Angular版本。

This is the GitHub Autopulous SOAP link...

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 - ＆GT; XML很慢，特别是在Javascript中。

话虽如此，这里有一个very popular library来转换这两种类型。

Answer 2

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

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

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

请求SOAP资源为文本：

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

     // ...

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

使用JSON字符串构建XML文档

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

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

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

2 个答案: