Spotify API 上传封面总是 404 错误？试试这个方法！

2024-08-01 18:00:04

Spotify API 上传歌单封面失败？解决 404 错误的正确姿势

你是否也曾抓耳挠腮，对着 Spotify API 返回的 404 错误束手无策？明明歌单 ID 正确无误，却始终无法上传心仪的封面图片，这种 frustrating 的感觉实在让人抓狂。

别担心，你不是一个人！本文将带你一步步揭开 Spotify API 上传歌单封面的神秘面纱，并提供详细的代码示例，帮你彻底摆脱 404 错误的困扰，从此上传封面一帆风顺。

异步操作：404 错误背后的“罪魁祸首”

在使用 Spotify API 创建歌单、添加歌曲和修改封面图片的过程中，我们实际上是在与一系列的异步操作打交道。想象一下，你兴致勃勃地调用 changePicture() 函数准备上传封面，殊不知，创建歌单的 createPlaylist() 函数可能还在慢悠悠地执行，导致你获取的歌单 ID 实际上并不存在，最终只能无奈地面对 404 错误的“嘲讽”。

async/await 与 Promise：异步操作的“救星”

想要解决异步操作带来的问题，我们需要一种机制来确保每个操作都在前一个操作完成后再执行。这时，JavaScript 的 async/await 语法和 Promise 对象就如同“救星”般降临，为我们提供了一种优雅且有效的解决方案。

代码示例：告别 404 错误，上传封面so easy!

1. 改造 savePlaylist 函数，让异步操作井然有序：

export const savePlaylist = async (token, spotifyUserId, body) => {
  try {
    // 使用 await ，耐心等待 createPlaylist 函数执行完毕
    const playlistInfo = await createPlaylist(token, spotifyUserId, body);

    console.log("Playlist created with ID:", playlistInfo.id);

    // 使用 await 关键字，再次耐心等待 populatePlaylist 函数执行完毕
    await populatePlaylist(token, playlistInfo.id, body.tracks);

    // 只有在 createPlaylist 和 populatePlaylist 都完成后，才开始执行 changePicture 函数
    const changePictureResult = await changePicture(
      playlistInfo.id,
      token
    );

    if (!changePictureResult) {
      console.error("Failed to change playlist picture.");
    } else {
      console.log("Playlist picture changed.");
    }

    return playlistInfo;
  } catch (error) {
    console.error("An error occurred while saving the playlist:", error);
    throw error; // 将错误抛出，以便进行后续处理
  }
};

2. 改造 changePicture 函数，返回 Promise 对象，与 async/await 无缝衔接：

const changePicture = async (playlistId, token) => {
  try {
    const base64Image = await convertBase64("Playlistcover_1.jpg");
    const url = `https://api.spotify.com/v1/playlists/${playlistId}/images`;

    const result = await axios.put(url, base64Image, {
      headers: {
        "Content-Type": "image/jpeg",
        "Authorization": `Bearer ${token}`,
      },
    });

    return result.data;
  } catch (error) {
    console.error("Error changing playlist picture:", error);
    return null; // 返回 null 表示修改失败
  }
};

代码解读：

在 savePlaylist 函数中，我们使用 await 关键字就像设定了一个个“关卡”，确保每个异步操作都必须在前一个“关卡”完成后才能继续执行，避免了异步操作带来的混乱。
changePicture 函数现在返回一个 Promise 对象，就如同异步操作完成后的“承诺”，允许我们在 savePlaylist 函数中使用 await 关键字 “静候佳音”，等待其完成。