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

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

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

相关推荐
前端小趴菜0511 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
小兵张健4 小时前
武汉拿下 23k offer 经历
java·面试·ai编程
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端