使用 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，在 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 中。

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