Angular2:动态同步http请求

Question

目标: 创建一系列同步http请求,并能够将它们作为一个可观察流进行订阅.

样品(不工作):

let query_arr = ['test1','test2','test3']

function make_request(query_arr){

    if (query_arr.length){

        let payload = JSON.stringify(query_arr[0]);
        let headers = new Headers();

        query_arr.splice(0,1);

        this.http.post('https://endpoint/post',payload,{headers:headers})
            .map((res:Response) => {make_request(query_arr)})

    }

}.subscribe(
    data => console.log('finished http request, moving on to next http request'),
    err => console.error(err),
    () => console.log('all http requests have been finished')
);

make_request(query_arr)

目标功能:

• 需要知道每个回复何时返回
• 必须知道所有回复何时返回

Answer 1

您需要利用flatMap运算符来串行执行请求(一个接一个).为此,您需要递归地构建数据处理链.这里的要点是在前一个observable(前一个请求返回的一个)上调用操作符.

这样,请求将在执行之前等待前一个请求完成.订阅时提供的回调将在执行所有请求时被调用.

以下是此方法的示例实现:

makeRequest(queryArr, previousObservable){
  if (queryArr.length) {
    let payload = JSON.stringify(queryArr[0]);
    let headers = new Headers();
    (...)

    queryArr.splice(0,1);

    var observable = null;
    if (previousObservable) {
      observable = previousObservable.flatMap(() => {
        return this.http.post('https://testsoapi.apispark.net/v1/entities', payload,{
            headers:headers
          })
          .map((res:Response) => res.json())
          .do(() => {
            console.log('request finished');
          });
      });
    } else {
      observable = this.http.post('https://testsoapi.apispark.net/v1/entities', payload, {
        headers:headers
      })
        .map((res:Response) => res.json())
        .do(() => {
          console.log('request finished');
        });
    }

    return this.makeRequest(queryArr, observable);
  } else {
    return previousObservable;
  }
}

这个方法最初可以这样调用:

test() {
  let queryArr = [
    { val: 'test1' },
    { val: 'test2' },
    { val: 'test3' }
  ];

  this.makeRequest(queryArr).subscribe(
    () => {
      console.log('all requests finished');
    });
}

请参阅此plunkr:https://plnkr.co/edit/adtWwckvhwXJgPDgCurQ ？ p = preview .