XHR / Fetch / Axios 请求的取消请求与请求重试

XHR / Fetch / Axios 请求的取消请求请求重试是前端性能优化与稳定性处理的重点,也是面试高频内容。下面是这三种方式的详解封装方案(可直接复用)。


✅ 一、Axios 取消请求与请求重试封装

1. 安装依赖(可选,用于扩展)

bash 复制代码
npm install axios

2. 封装 cancelToken 与 retry 的 axios 请求模块

js 复制代码
// axiosRequest.js
import axios from 'axios'

const pendingMap = new Map()

// 生成唯一 key(用于标记请求)
function getRequestKey(config) {
  const { method, url, params, data } = config
  return [method, url, JSON.stringify(params), JSON.stringify(data)].join('&')
}

// 添加请求到 pendingMap
function addPending(config) {
  const key = getRequestKey(config)
  config.cancelToken = new axios.CancelToken(cancel => {
    if (!pendingMap.has(key)) {
      pendingMap.set(key, cancel)
    }
  })
}

// 移除请求
function removePending(config) {
  const key = getRequestKey(config)
  if (pendingMap.has(key)) {
    const cancel = pendingMap.get(key)
    cancel && cancel()
    pendingMap.delete(key)
  }
}

// 重试机制封装
function retryAdapterEnhancer(adapter, options = {}) {
  const { retries = 3, delay = 1000 } = options

  return async config => {
    let retryCount = 0
    const request = async () => {
      try {
        return await adapter(config)
      } catch (err) {
        if (retryCount < retries) {
          retryCount++
          await new Promise(res => setTimeout(res, delay))
          return request()
        } else {
          return Promise.reject(err)
        }
      }
    }
    return request()
  }
}

// 创建实例
const axiosInstance = axios.create({
  timeout: 5000,
  adapter: retryAdapterEnhancer(axios.defaults.adapter, { retries: 2, delay: 1000 })
})

// 请求拦截器
axiosInstance.interceptors.request.use(config => {
  removePending(config)
  addPending(config)
  return config
})

// 响应拦截器
axiosInstance.interceptors.response.use(
  response => {
    removePending(response.config)
    return response
  },
  error => {
    if (axios.isCancel(error)) {
      console.warn('Request canceled:', error.message)
    }
    return Promise.reject(error)
  }
)

export default axiosInstance

✅ 使用示例:

js 复制代码
import request from './axiosRequest'

request.get('/api/data', { params: { id: 1 } })
  .then(res => console.log(res))
  .catch(err => console.error(err))

✅ 二、Fetch 封装(支持取消请求 & 重试)

1. 使用 AbortController 封装取消与重试

js 复制代码
// fetchRequest.js
export function fetchWithRetry(url, options = {}, retries = 3, delay = 1000) {
  const controller = new AbortController()
  options.signal = controller.signal

  const fetchData = (retryCount = 0) => {
    return fetch(url, options).then(res => {
      if (!res.ok) throw new Error('Network response was not ok')
      return res
    }).catch(err => {
      if (retryCount < retries && err.name !== 'AbortError') {
        return new Promise(resolve =>
          setTimeout(() => resolve(fetchData(retryCount + 1)), delay)
        )
      }
      throw err
    })
  }

  return {
    promise: fetchData(),
    cancel: () => controller.abort()
  }
}

✅ 使用示例:

js 复制代码
const { promise, cancel } = fetchWithRetry('/api/data', {}, 2, 1000)

promise
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))

// 调用 cancel() 可随时取消请求

✅ 三、XHR 原生封装(带取消 & 重试)

js 复制代码
// xhrRequest.js
export function xhrWithRetry({ url, method = 'GET', data = null, retries = 3, delay = 1000 }) {
  let xhr = null

  const send = (retryCount = 0, resolve, reject) => {
    xhr = new XMLHttpRequest()
    xhr.open(method, url, true)
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(xhr.responseText)
        } else if (retryCount < retries) {
          setTimeout(() => send(retryCount + 1, resolve, reject), delay)
        } else {
          reject(new Error(`Request failed: ${xhr.status}`))
        }
      }
    }
    xhr.onerror = () => reject(new Error('Network Error'))
    xhr.send(data)
  }

  const promise = new Promise((resolve, reject) => send(0, resolve, reject))
  return {
    promise,
    cancel: () => xhr && xhr.abort()
  }
}

✅ 使用示例:

js 复制代码
const { promise, cancel } = xhrWithRetry({ url: '/api/data' })

promise.then(res => console.log(res)).catch(err => console.error(err))

// 可随时调用取消
cancel()

✅ 总结对比

特性/方式 取消支持 重试支持 易用性 推荐场景
Axios ✔️ CancelToken ✔️ 自定义 adapter ✅ 最佳 Vue/React 项目
Fetch ✔️ AbortController ✔️ 手动封装 ✅ 清晰 原生 / SSR 项目
XHR ✔️ abort() ✔️ 手动封装 ❌ 复杂 老旧兼容需求

如果你想把这三套方案整合成一个通用库或 TypeScript 模块,我也可以帮你封装成统一接口版本。是否需要我继续处理这部分?

相关推荐
lyj16899722 分钟前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
一只小鱼儿吖1 小时前
进程代理单窗口单IP技术:原理、应用与实现
网络·网络协议·tcp/ip
稳联技术1 小时前
Ethernet IP与Profinet共舞:网关驱动绿色工业的智慧脉动
网络·网络协议·tcp/ip
学习3人组1 小时前
CentOS配置网络
linux·网络·centos
小白变怪兽2 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头2 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
~山有木兮2 小时前
LiteHub中间件之限流实现
网络·http·中间件
cui_win2 小时前
【网络】Linux 内核优化实战 - net.core.flow_limit_table_len
linux·运维·网络
墨菲安全3 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒