使用Fetch API传递参数

Question

从Angular HTTPClient转换代码后，我正在尝试使用fetch传递参数（这是任务的一部分）。在我对其进行更改之前，这是代码的一部分。

let activeUrl = new URL(this.serverAddress);
        let targetUrl = activeUrl.origin + environment.apiBasePath + '/named_selection/' + componentId;
        let params = new HttpParams().set('name', name);

        if (this.customLookupAddress != "") {
            params.set('lookup', this.customLookupAddress);
        }

        if (this.customGatewayAddress != "") {
            params.set('gateway', this.customGatewayAddress);
        }

        return this.httpClient.get(targetUrl, { headers: { 'responseType': 'json' }, params: params }).pipe(
            map((namedSelection) => {
                this.namedSelections.set(componentId.toString() + '.' + name, namedSelection);

我将整个代码转换为fetch api的用法。此处的外观：

let activeUrl = new URL(this.serverAddress);
        let targetUrl = activeUrl.origin + environment.apiBasePath + '/named_selection/' + componentId;
        let params = new HttpParams().set('name', name);

        if (this.customLookupAddress != "") {
            params.set('lookup', this.customLookupAddress);
        }

        if (this.customGatewayAddress != "") {
            params.set('gateway', this.customGatewayAddress);
        }
        const data$ = new Observable(observer => {
            fetch(targetUrl, { headers: { 'responseType': 'json'}, method: 'GET'})
              .then(response => response.json()) 
              .then(namedSelection => {
                observer.next(namedSelection);
                observer.complete();
              })
              .catch(err => observer.error(err));
          });
               
        return data$.pipe(
             tap((namedSelection) => {
                this.namedSelections.set(componentId.toString() + '.' + name, namedSelection);
             })
        );
    }

但是，在这种情况下，我无法传递参数“参数”。你们能否帮助我了解如何进行操作？在获取功能的一部分方面应该如何构建代码？

Answer 1

要使用fetch将URL参数添加到请求中，您需要将它们附加到fetch url（还设置了正确的标题名称）：

const params = new URLSearchParams({ name });

if (this.customLookupAddress) {
  params.set('lookup', this.customLookupAddress);
}
if (this.customGatewayAddress) {
  params.set('gateway', this.customGatewayAddress);
}
fetch(`${targetUrl}?${params}`, { headers: { 'Accept': 'application/json' } })
  .then(res => res.json())
  // ...