如何设置Angular http请求中的重复参数名

在Angular中，如果你需要在HTTP请求中设置重复的参数名，可以通过以下几种方法实现：

基础概念

HTTP请求中的参数通常是通过查询字符串（query string）传递的。标准的查询字符串不允许重复的参数名，但某些情况下（如批量上传文件），你可能需要发送重复的参数。

方法一：使用`HttpParams`

HttpParams类本身不支持重复的参数名，但你可以通过手动构建查询字符串来实现。

import { HttpClient, HttpParams } from '@angular/common/http';

const http = new HttpClient();

const params = new HttpParams()
  .set('param1', 'value1')
  .append('param2', 'value2') // 这里会覆盖之前的值
  .append('param2', 'value3'); // 再次添加相同的参数名

http.get('/api/data', { params }).subscribe(response => {
  console.log(response);
});

方法二：手动构建查询字符串

你可以手动构建查询字符串，然后将其作为请求的一部分发送。

import { HttpClient } from '@angular/common/http';

const http = new HttpClient();

const params = {
  param1: 'value1',
  param2: ['value2', 'value3'] // 使用数组来表示重复的参数
};

const queryString = Object.keys(params).map(key => {
  return params[key] instanceof Array
    ? params[key].map(value => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&')
    : `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`;
}).join('&');

http.get(`/api/data?${queryString}`).subscribe(response => {
  console.log(response);
});

方法三：使用`FormData`

如果你需要发送文件或其他复杂的数据结构，可以使用FormData对象。

import { HttpClient } from '@angular/common/http';

const http = new HttpClient();

const formData = new FormData();
formData.append('param1', 'value1');
formData.append('param2', 'value2');
formData.append('param2', 'value3'); // 可以重复添加相同的参数名

http.post('/api/data', formData).subscribe(response => {
  console.log(response);
});