两个相似服务请求存在代码冗余，如何优化前端请求代码？

你这两段请求代码冗余度很高，核心逻辑几乎一致，只需要把重复的请求和数据处理逻辑封装成通用函数就能搞定，具体优化步骤如下：

1. 封装通用请求函数 #

把重复的fetch调用、响应处理、数据更新逻辑抽成一个可复用的函数，根据传入的页码参数拼接不同的请求URL：

// 通用新闻请求函数，page参数可选，默认对应初始请求
const fetchNews = (page = '') => {
  // 根据是否传page拼接请求地址
  const requestUrl = page ? `${BASE_URL}/${page}/` : BASE_URL;
  
  fetch(requestUrl)
    .then(response => {
      // 新增响应状态校验，避免无效响应继续处理
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      allNews.value = data.items;
      totalPages.value = data.nav.total;
    })
    .catch(err => console.error(err));
};

2. 简化原有的两个调用函数 #

原来的初始化请求和加载更多请求，只需要调用这个通用函数即可，代码量大幅减少：

// 页面初始渲染请求
const getAllNews = () => {
  fetchNews(); // 不传page，使用默认空值，对应初始请求地址
};

// 「显示更多」按钮触发的请求
const fetchMore = () => {
  currentPage.value += 1;
  fetchNews(currentPage.value); // 传入递增后的页码
};

额外优化建议 #

• 修复加载更多的逻辑问题：原代码中加载更多是直接替换allNews.value，实际场景应该是追加数据，可改成allNews.value = [...allNews.value, ...data.items]
• 防止重复请求：可以添加一个isLoading状态，请求发起时设为true，请求完成后设为false，避免用户重复点击按钮触发多次请求
• 边界处理：当currentPage.value等于totalPages.value时，禁用「显示更多」按钮或者提示“没有更多数据”

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