JavaScript中API分页失效问题及有效写法原理咨询

核心原因是字符串拼接的时机不同：

第一段代码的问题所在 #

你定义的const API_URL是在代码初始化阶段就完成了字符串拼接：

const API_URL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=xxxxxxxxxxxxxxxxxxxx&page=" + index;

此时index的值是1，所以API_URL会被直接赋值为xxx&page=1，并且因为它是const常量，后续即使你修改了index变量，API_URL的内容也不会自动更新。点击下一页时调用getMovies(API_URL)，传的始终是第一页的地址，自然加载不了后续页面。

第二段代码有效的原因 #

第二段代码在每次点击事件触发时，实时拼接URL：

getMovies("https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=xxxxxxxxxxxxxxxxxxxxx&page=" + index);

这里的+ index是在点击事件执行时才求值的，此时index已经是更新后的数值（比如点击下一页后index变为2），所以拼接出来的URL会带上最新的page参数，能正确请求对应页码的数据。

优化建议（更简洁的写法） #

可以把URL生成逻辑封装成一个函数，避免重复写完整URL：

var index = 1;
const main = document.getElementById("main");

// 动态生成带最新page参数的API地址
const getApiUrl = () => {
  return "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=xxxxxxxxxxxxxxxxxxxx&page=" + index;
};

next.addEventListener("click", () => {
  index++;
  getMovies(getApiUrl());
});

prev.addEventListener("click", () => {
  if (index <= 1) {
    alert("已经是第一页了");
  } else {
    index--;
    getMovies(getApiUrl());
  }
});

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