AJAX请求中List参数的高效处理：从新手入门到生产实践

1次阅读

共计 1716 个字符，预计需要花费 5 分钟才能阅读完成。

记得刚入行时，我遇到过这样一个 Bug：前端传递的数组参数直接拼接到 URL 上，导致后端接口爆出 500 错误。当时排查了半天才发现，原来未序列化的数组参数在 GET 请求中变成了?ids=1,2,3，而后端期望的是标准查询字符串格式?ids[]=1&ids[]=2。这个教训让我意识到，正确处理 List 参数绝非小事。

JSON.stringify 方案（适合复杂数据结构）

// 适用于 POST/PUT 请求体
const payload = {items: JSON.stringify([{id: 1}, {id: 2}])
};

优点：保持数据结构完整，支持嵌套对象
缺点：需要手动处理反序列化，URL 长度受限

URLSearchParams 方案（适合简单列表）

// 适用于 GET 请求或 x -www-form-urlencoded
const params = new URLSearchParams();
['a', 'b'].forEach(v => params.append('chars', v));

优点：自动处理 URL 编码，符合标准表单格式
缺点：不支持复杂对象结构

/**
 * 分页获取商品列表
 * @param ids 商品 ID 数组
 * @param page 当前页码
 */
async function fetchProducts(ids: string[], 
  page = 1
): Promise<Product[]> {
  try {const { data} = await axios.post('/api/products', {ids: JSON.stringify(ids),
      page
    }, {
      headers: {'Content-Type': 'application/json'},
      timeout: 5000
    });
    return data;
  } catch (err) {if (axios.isAxiosError(err)) {console.error(` 请求失败: ${err.response?.status || err.code}`);
    }
    throw new Error('获取商品列表失败');
  }
}

// 使用 FormData 处理文件 + 列表混合上传
const formData = new FormData();
files.forEach(file => formData.append('attachments', file));
params.forEach((value, key) => formData.append(key, value));

// 添加请求中断能力
const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);

fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
}).then(handleResponse);

使用 encodeURIComponent 处理单个值
避免手动拼接 URL，优先使用URLSearchParams

// 每 100 条数据分一个批次
const chunkSize = 100;
for (let i = 0; i < bigArray.length; i += chunkSize) {const chunk = bigArray.slice(i, i + chunkSize);
  await processBatch(chunk);
}