目录

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

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

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
陈随易15 分钟前
对不起,我还是不推荐你用express和koa
前端·后端·程序员
独立开阀者_FwtCoder27 分钟前
基于 MCP Http SSE模式的天气助手智能体开发实战(一文带你了解MCP两种开发模式)
前端·javascript·后端
强了一点34 分钟前
计算机视觉五大技术——深度学习在图像处理中的应用
面试
月亮慢慢圆39 分钟前
表格单元行合并方法
前端
方阿森40 分钟前
MasterGo + MCP,借助 AI 实现设计稿转代码
前端·ai编程·mcp
逆袭的小黄鸭41 分钟前
一文读懂 JavaScript 的各类继承方式
前端·javascript·面试
谎言西西里43 分钟前
深入浅出 Pinia:革新 Vue 状态管理的利器 ⚡
前端
loooseFish44 分钟前
带分页的docx编辑器 vue3集成canvas-editor
前端
雷渊44 分钟前
springBoot是如何实现自动配置的?
java·后端·面试
敲代码的玉米C44 分钟前
深入探讨 JavaScript 中的 setTimeout 精确性问题
前端·javascript