angular - Angular httpclient 查询参数作为来自数组的批处理请求

Question

我有一个场景，我需要从数组中传递用分号（;）分隔的 lat 和 long 。API 最多只能在一个请求中接受 145 lat long。我总共有 100K lat long 作为批处理请求传递，并将所有响应保存/附加到一个 json 文件中。

这是我到目前为止尝试过的步骤。

这是我的地理编码示例数组。（总共 100K）

  this.geocodes = [
            '-39.32939098,173.80391646',
            '-35.13188244,173.43837148',
            '-35.96790802,174.22052708',
            '-39.60085901,174.27450675',
            '-46.89935626,168.12957415',
            '-40.94922683,175.66038897',
            '-40.57392064,175.39045103',
            '-37.67488205,175.06674793',
            '-37.77800560,175.22295017',
        ];

我想在一个GET请求中传递每个nth(145) lat long查询参数，用分号分隔。

  getOneDayWeatherData() {
        let searchParams = new HttpParams();
        this.geocodes = [
            '-39.32939098,173.80391646',
            '-35.13188244,173.43837148',
            '-35.96790802,174.22052708',
            '-39.60085901,174.27450675',
            '-46.89935626,168.12957415',
            '-40.94922683,175.66038897',
            '-40.57392064,175.39045103',
            '-37.67488205,175.06674793',
            '-37.77800560,175.22295017',
        ];
        const output = [];
        let j = 2;
        for (let i = 0; i < this.geocodes.length; i++) {
            output.push(this.geocodes.slice(i, j));
            i++;
            j = j + 2;
        }
        console.log('output', output);
        searchParams = searchParams.append('geocodes', output.join(';')); //separated by semi colon 
        searchParams = searchParams.append('language', 'en-US');
        searchParams = searchParams.append('format', 'json');
        searchParams = searchParams.append(
            'apiKey',
            'yourAPIKey'
        );

        return this.http
            .get<{ [key: string]: Weather }>(
                `https://api.weather.com/v3/aggcommon/v3-wx-observations-current?`,
                { params: searchParams }
            )
            .pipe(
                catchError((errorRes) => {
                    // send to Analytics server
                    return throwError(errorRes);
                })
            );

        // .tap((data) => console.log('All :' + JSON.stringify(data))),
    }

作为测试，我试图every 2 elements从我的地理编码数组中传递，但没有运气。

在我订阅此服务的组件中，我想将所有响应附加到一个 JSON 文件中。

任何帮助表示赞赏。谢谢

标签： angulartypescriptparametersangular-httpclient

Answer 1

您可以参考下面的组件逻辑进行分组和批量请求。

component.ts 示例

import { Component , OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs/observable/forkJoin';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  response = [];

  items : any[] =[];

  constructor() {
  }

  ngOnInit(){
    this.InitializeData();
    this.makeMultipleCall();
  }

//this is to mimic your lat long array
  InitializeData(){
    var range = 1000;
    for(var i = 0 ; i<=range ;i++)
    {
      this.items.push("item_"+i);
    };
  }

//this will group your data and make a fork join to the request.
  makeMultipleCall(){
    const requestArray = [];
    //make call for 145 items each:
    var groupedItems = this.groupByN(145 , this.items);
    groupedItems.forEach(s=>{
      requestArray.push(this.mimicHttpCall(s));
    });

    forkJoin(requestArray).subscribe(results => {
      var i = 0;
      results.forEach(s=>{
        console.log("Response " +i)
        console.log(s);
        i++
      })
      this.response = results;
    });
  }

//mimicing your http call : suppose its joins with '|'
  mimicHttpCall(list : any[]): Observable<any> 
  {
    return Observable.of(list.join("|"));
  }

  groupByN(n, data):any[]{
    let result = [];
    for (var i = 0; i < data.length; i += n) result.push(data.slice(i, i + n));
    return result;
  };
}