使用JQuery和Angular2进行多个Ajax调用的简洁方法

Question

I have the following angular2 component, which makes an ajax call (with Jquery) and sets the template html to the value of the result:

NB: I am using Typescript

import { Component, Input } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import {SafeResourceUrl} from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
declare var $: any; //Jquery declare

@Component({
    selector: 'codestep',
    template: `<div class="codestep" [innerHTML]="content"></div>`
})
export class codeStepComponent {
    @Input() step: string;
    private sub: Subscription;
    private content: string = '';
    private url: SafeResourceUrl;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            this.content = this.step;
            var that = this;
            var _url = './diff/' + this.step + '.html';
            $.ajax({
                url: _url,
                success: function (result) {
                    that.content = result;
                    console.log("content: " + result);
                }
            });
        });
    }
    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

How can I neatly modify this to make an additional ajax call (to a different url) and set a different property to this? I could create a different sub and then have a complete set of new class properties and then set a new subscription etc. ie twice the number of lines I currently have. This isn't a nice way of doing it if I have to make 5+ calls, can I reuse some of the logic and tidy this proposal up?

Answer 1

You can create an array of URL's to request, use $.when() , $.map() , .then() , $.each() to process returned response

var urls = ["a", "b", "c", "d", "e"];

$.when.apply($, $.map(urls, function(curr) {
  return $.ajax("./diff/" + curr + ".html")
}))
.then(function(...response) {
  $.each(response, function(key, value) {
    var result = value.shift();
    // do stuff with returned `result` here
    // e.g., `that.content = result`
  })
});

plnkr http://plnkr.co/edit/VYwE9Xo4LQh352MlH2yW?p=preview