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

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

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

相关推荐
百事老饼干6 分钟前
Java[面试题]-真实面试
java·开发语言·面试
理想不理想v26 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我27 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记40 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜41 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=41 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck1 小时前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui