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

Posted 2023-03-13

【中文标题】Angular httpclient 查询参数作为来自数组的批处理请求

【英文标题】：Angular httpclient query parameters as batch request from an array

【发布时间】：2020-09-13 20:38:45

【问题描述】：

我有一个场景，我需要从数组中传递由 分号(;) 分隔的 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 文件中。

感谢任何帮助。谢谢你

【问题讨论】：

您可以创建多个请求列表，每个请求列表包含 145 lat long as searchParams，然后使用 forkjoin 组合响应。此链接可以帮助您实现这一目标 - ***.com/a/43166302/7051329

谢谢@KishorKunal。我一定会尝试 forkjoin。关于如何在一个请求中仅迭代 145 个参数的任何想法。

【参考方案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;
  ;

【讨论】：

对不起，我有点困惑。我的 http 调用在服务文件中。 MimicHttpcall 发出多个请求，但在每个请求中，我的所有地理编码都通过了。为了使这项工作正常进行，我做错了。

为了您的方便：Openweather 地图 api 提供免费的 API 密钥，以防万一尝试真正的 API。 openweathermap.org。请帮忙。谢谢