Angular httpclient从一个数组中以批量请求的方式查询参数。

Posted 2023-02-04

我有一个场景，我需要通过纬度和经度相隔的 从数组中取出分号(;). 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',
        ];

我想通过每一个 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 从我的geocodes数组中获取信息，但没有成功。

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

任何帮助是感激的。谢谢你的帮助

答案

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

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