AngularJS中如何快速处理Promise调用解决API响应慢导致的路由跳转延迟

针对API调用延迟导致路由跳转受阻的问题，可以从以下几个方向落地优化：

• 前端请求缓存
  针对相同搜索参数的重复请求，直接复用历史返回结果，避免重复发起网络请求。可以在搜索服务中新增缓存逻辑：

  // 搜索请求缓存池
  const searchCache = new Map();
  // 重写原有search方法新增缓存能力
  const originalSearch = restfulService.search;
  restfulService.search = function (keyword, facets, customFilterQuery) {
    // 用请求参数生成唯一缓存键
    const cacheKey = JSON.stringify([keyword, facets, customFilterQuery]);
    // 命中缓存直接返回
    if (searchCache.has(cacheKey)) {
      return Promise.resolve(searchCache.get(cacheKey));
    }
    // 未命中则发起真实请求
    return originalSearch.call(this, keyword, facets, customFilterQuery).then((searchResult) => {
      // 缓存结果，设置5分钟过期时间避免数据过时
      searchCache.set(cacheKey, searchResult);
      setTimeout(() => searchCache.delete(cacheKey), 5 * 60 * 1000);
      return searchResult;
    });
  };
  

• 调整路由跳转逻辑
  目前卡顿的核心原因是将搜索请求放在了路由跳转前执行，逻辑可以改为：用户点击搜索后直接跳转到结果页，在结果页内发起搜索请求，请求过程中展示加载骨架屏或者Loading提示，用户无需在原页面等待，感知延迟会大幅降低。
• 搜索请求预加载
  监听用户搜索输入行为，当用户输入停顿超过300ms时，提前发起预搜索请求，用户点击搜索按钮时如果预请求已经返回，直接复用结果即可。
• 后端接口优化
  如果是接口本身响应耗时过长，可以配合后端做如下优化：
  • 给热门搜索词加服务端缓存，直接返回缓存结果
  • 优化检索逻辑，给查询字段加数据库索引，必要时改用Elasticsearch等专业全文检索引擎
  • 接口返回裁剪非必要字段，降低响应包体积

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