从TMDB API获取total_pages及解决调用时返回undefined问题

导致getTotalPages()返回undefined的核心问题 #

1. 请求URL格式错误 #

你的requestParams开头没有加?，导致API路径和参数直接拼接成了类似/discover/movieapi_key=xxx的错误格式，TMDB服务器无法识别该请求，返回的响应状态非ok，函数未进入if(response.ok)分支，最终无返回值，自然返回undefined。

2. 无效的请求参数 #

total_pages=True是多余参数，TMDB的/discover/movie接口默认会在返回结果中包含total_pages字段，该参数会被服务器忽略，无需添加。

3. 异步函数调用未使用await #

即便getTotalPages()修复正确，在getMovies()里直接调用getTotalPages()会返回一个Promise对象而非实际页码数值，导致Math.ceil(Math.random()*getTotalPages())计算出NaN，进一步引发请求错误。

修复后的代码 #

修复getTotalPages()函数 #

const getTotalPages = async () => {
  const selectedGenre = getSelectedGenre();
  const discoverMovieEndpoint = '/discover/movie';
  // 参数开头加?，移除无效的total_pages参数
  const requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}`;
  const urlToFetch = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`;
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json();
      return jsonResponse.total_pages; 
    }
    // 处理响应失败的情况，避免无返回值
    throw new Error(`请求失败：${response.status}`);
  } catch(error) {
     console.log(error);
     // 错误时返回默认页码，避免后续逻辑异常
     return 1;
  }
 }

修复getMovies()函数 #

const getMovies = async () => {
  const selectedGenre = getSelectedGenre();
  const discoverMovieEndpoint = '/discover/movie';
  // 用await等待异步函数返回实际页码值
  const totalPages = await getTotalPages();
  const randomPage = Math.ceil(Math.random() * totalPages);
  const requestParams = `?api_key=${tmdbKey}&with_genres=${selectedGenre}&page=${randomPage}`;
  const urlToFetch = `${tmdbBaseUrl}${discoverMovieEndpoint}${requestParams}`;
  try {
    const response = await fetch(urlToFetch);
    if (response.ok) {
      const jsonResponse = await response.json();
      return jsonResponse.results; 
    }
    throw new Error(`请求失败：${response.status}`);
  } catch(error) {
    console.log(error);
    // 错误时返回空数组，避免后续逻辑异常
    return [];
  }
};

额外说明 #

• 处理响应失败分支时，建议抛出错误或返回默认值，避免函数无返回值导致后续逻辑异常。
• 如果getSelectedGenre()可能返回空值，建议添加校验逻辑，避免with_genres参数为空导致API返回不符合预期的结果。

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