使用 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);
             })
        );
    }

但是，在这种情况下，我无法传入参数'params'。你们能帮我解决这个问题吗？当涉及到 fetch 函数的部分时，应该如何构建代码？

Answer 1

要使用 fetch 将 URL 参数添加到请求中，您需要将它们附加到提取 url 中（并设置正确的 header 名称）：

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())
  // ...

使用 fetch api 传递参数

Passing parameters using fetch api

httpclient

fetch

web-frontend

typescript

angular