前端如何性能优化之取消请求

场景需求:用户将自己的Google Photo关联设备后,设备可以根据google提供的开发API进行资源请求。由于不限制用户关联影集资源的总数量,必然会存在分页请求。存在一个问题就是当用户选择不同的影集的时候,上一个影集的请求还没请求完成就要请求当前影集的资源。此时我们可以取消上个影集资源的请求,这样既可以加快当前影集请求也可以提高应用程序的性能和用户体验。

Fetch方式

当我们使用 fetch 或其他HTTP库发送请求时,你可以存储请求的引用,并在发送新请求前取消之前的请求。例如,使用 AbortController 来取消 fetch 请求:

js 复制代码
let controller = new AbortController();
let currentAlbumId = null;

function fetchSearchResults(albumId) {
  if(currentAlbumId && currentAlbumId != albumId){
      controller.abort(); // 取消之前的请求
      controller = new AbortController();
      currentAlbumId = albumId;
  }
  
 
  fetch('https://photoslibrary.googleapis.com/v1/mediaItems:search', { signal: controller.signal })
    .then(response => response.json())
    .then(data => {
      // 处理搜索结果
    });
}

Axios方式

js 复制代码
// 全局封装axios请求

import axios from "axios"

let request = axios.create({
  baseURL: 'https://photoslibrary.googleapis.com/',
})

request.interceptors.request.use((config) => {
  // token
  const { url, headers } = config
  headers["Content-Type"] = "application/json";
  headers.token = 'Bear Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis libero assumenda sit cumque natus quasi reiciendis. Quam vitae qui rerum cupiditate expedita dicta deserunt? Quaerat aliquid tempora laudantium quisquam dicta?'
  return config
}, error => {
  return Promise.reject(new Error(error))
})


request.interceptors.response.use(
  // 响应的统一处理
  (res) => {
    const { status } = res.data
    if(status !== 200) {
      return Promise.reject(new Error('请求错误'))
    }
    return Promise.resolve(res)
  },
  // 错误处理
  error => {
    return Promise.reject(new Error(error))
  }
)

export { request }

封装业务端请求api

js 复制代码
import { request } from "@/request";
let currentAlbumId = null;

let cancelCallback = () => {}
const getGooglePhotodAlbumLists = (albumId) => {
 
  if(currentAlbumId && currentAlbumId != albumId){
       cancelCallback()
       currentAlbumId = albumId;
  }
  return request({
    url: '/v1/mediaItems:search',
    cancelToken: new axios.CancelToken(c => cancelCallback = c )
  })
}

export { getGooglePhotodAlbumLists }

使用new axios.CancelToken() 中将取消方法c 缓存到了 cancelCallback身上,每次发起请求前都调用前一次请求的取消方法。

暂时只想到这两种方案,大家肯定有更好的方式,希望可以分享给俺呀。老规矩,看过的同学麻烦动动小手点赞呀。

相关推荐
关键帧-Keyframe1 小时前
音视频面试题集锦第 38 期
macos·面试·音视频·cocoa
IT_陈寒1 小时前
Python异步编程的7个致命误区:90%开发者踩过的坑及高效解决方案
前端·人工智能·后端
猫猫村晨总1 小时前
整理了几道前端面试题
前端·vue.js·面试
绝无仅有1 小时前
三方系统callback回调MySQL 报错排查与解决:mysql context cancel
后端·面试·github
绝无仅有1 小时前
项目三方合同提交失败的MySQL 错误排查与解决:`context deadline exceeded`
后端·面试·github
江拥羡橙1 小时前
【目录-多选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
你的电影很有趣1 小时前
lesson55:CSS导航组件全攻略:从基础导航条到动态三级菜单与伸缩菜单实现
前端·css
蔗理苦1 小时前
2025-09-05 CSS4——浮动与定位
开发语言·前端·css·html·css3
浊浪载清辉2 小时前
《Html泛型魔法学院:用霍格沃茨风格网页教授集合框架》
前端·javascript·学习·html
Want5953 小时前
HTML元素周期表
前端·html