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

场景需求:用户将自己的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身上,每次发起请求前都调用前一次请求的取消方法。

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

相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
倔强青铜三1 天前
苦练Python第46天:文件写入与上下文管理器
人工智能·python·面试
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts