向Spotify播放列表添加曲目：未按顺序添加问题排查

核心原因 #

Spotify API的批量添加接口确实会严格按请求体中uris数组的顺序追加曲目，但你遇到的乱序问题几乎都是因为拆分请求时的异步处理不当，或是误解了接口参数的用法。

常见问题与修复方案 #

1. 单次请求超过曲目数量限制 #

Spotify的POST /playlists/{id}/tracks接口单次最多支持添加100条曲目。如果你的trackIdArr长度超过100，直接拆分后用异步循环发送请求会导致服务器处理顺序不确定，最终曲目乱序。

修复代码：拆分数组为100条一组，用同步循环逐个发送请求：

const addTracksInOrder = async (playlistId, token, trackUris) => {
  const batchSize = 100;
  for (let i = 0; i < trackUris.length; i += batchSize) {
    const currentBatch = trackUris.slice(i, i + batchSize);
    // 等待当前批次请求完成后再发送下一批
    await fetch(
      `https://api.spotify.com/v1/playlists/${playlistId}/tracks`,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ uris: currentBatch }),
      }
    );
    // 可选：添加短延迟避免触发速率限制
    await new Promise(resolve => setTimeout(resolve, 100));
  }
};

2. 异步循环写法错误 #

如果之前用forEach/map这类不支持await的循环发送请求，所有请求会同时触发，服务器处理顺序无法保证，导致曲目乱序。

❌ 错误写法：

trackIdArr.forEach(async uri => {
  await fetch(/* 请求配置 */);
});

✅ 正确写法（适合小数量曲目）：

for (const uri of trackIdArr) {
  await fetch(
    `https://api.spotify.com/v1/playlists/${playlistId}/tracks`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({ uris: [uri] }),
    }
  );
}

3. 误用position参数 #

如果你尝试手动指定position参数，错误的用法会打乱顺序：比如给所有批次设置同一个position，后续批次的曲目会插入到指定位置，覆盖之前的顺序。

正确做法：如果是追加曲目，完全不需要position参数，Spotify会自动按请求顺序追加到播放列表末尾。如果需要插入到指定位置，每次批次的position应该是初始位置 + 已添加的曲目数，但这种场景建议按顺序逐个批次发送请求。

4. API速率限制导致的处理延迟 #

如果请求发送过于频繁，Spotify可能会延迟处理部分请求，导致顺序错乱。此时可以添加短延迟（100-200ms），同时注意响应头中的Retry-After字段，遵循速率限制规则。

文档说明的正确性 #

Spotify API文档的描述是准确的：单次请求中的uris数组会严格按顺序添加。只要你在一个请求中传入的数组顺序正确，且数量不超过100条，曲目就会按请求顺序出现在播放列表中。乱序问题都是因为多请求异步处理时的顺序失控。

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