TypeScript中GET请求如何传递批量查询参数？

问题原因 #

HTTP协议规范中，GET请求不应该携带请求体，大多数浏览器和服务器会直接忽略GET请求的body内容，这就是你遇到错误的核心原因。

解决方案一：将批量参数放入查询字符串 #

把component_ids数组作为查询参数附加到URL上，后端需要支持解析URL中的数组参数（常见格式为component_ids=1&component_ids=2或component_ids=1,2）。

修改后的代码：

getBatchBlobsList(componentId: number): Promise<any> {
    let activeUrl = new URL(this.serverAddress);
    let targetUrl = new URL(activeUrl.origin + environment.apiBasePath + '/get_batch_blob_list');

    // 添加原有自定义参数
    if (this.customLookupAddress !== '') {
        targetUrl.searchParams.append('lookup', this.customLookupAddress);
    }
    if (this.customGatewayAddress !== '') {
        targetUrl.searchParams.append('gateway', this.customGatewayAddress);
    }

    // 添加批量component_id参数（若为多个id，循环append即可）
    targetUrl.searchParams.append('component_ids', componentId.toString());
    // 多id场景示例：componentIds.forEach(id => targetUrl.searchParams.append('component_ids', id.toString()));

    return fetch(targetUrl.toString(), {
        headers: { 'Content-Type': 'application/json' },
        method: 'GET'
        // 移除body参数
    });
}

解决方案二：改用POST请求传递JSON体 #

如果批量参数数量较多，或后端更适配JSON格式的批量请求，推荐将请求方法改为POST，这样就能合法地在请求体中传递JSON参数：

修改后的代码：

getBatchBlobsList(componentId: number): Promise<any> {
    let activeUrl = new URL(this.serverAddress);
    let targetUrl = new URL(activeUrl.origin + environment.apiBasePath + '/get_batch_blob_list');

    // 添加原有自定义查询参数
    if (this.customLookupAddress !== '') {
        targetUrl.searchParams.append('lookup', this.customLookupAddress);
    }
    if (this.customGatewayAddress !== '') {
        targetUrl.searchParams.append('gateway', this.customGatewayAddress);
    }

    let requestBody = { component_ids: [componentId] };

    return fetch(targetUrl.toString(), {
        headers: { 'Content-Type': 'application/json' },
        method: 'POST',
        body: JSON.stringify(requestBody)
    });
}

注意事项 #

• 方案一需确认后端支持的数组参数解析格式（重复key还是逗号分隔）；
• 方案二需同步修改后端接口的请求方法为POST，并确保其能正确解析JSON请求体。

内容的提问来源于stack exchange，提问作者GeekAndNerd223