axios请求重试_核心原理

点击查看代码

<script setup lang="ts">
import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:3000',
  // 设置请求超时时间为5秒
  timeout: 2000,
  retries: 3, // 设置重试次数为3次
  retryDelay: 1000 // 设置重试的间隔时间
} as any)

// 添加响应拦截器
request.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return Promise.resolve(response.data)
  },
  (error) => {
    const config = error.config

    // 如果config不存在或未设置重试选项，则拒绝
    if (!config || !config.retries) {
      return Promise.reject(error)
    }

    // 设置变量来跟踪重试次数
    config.__retryCount = config.__retryCount || 0

    // 检查是否达到最大重试次数
    if (config.__retryCount >= config.retries) {
      return Promise.reject(error)
    }

    // 增加重试计数器
    config.__retryCount += 1

    // 创建一个新的Promise来处理每次重试之前等待一段时间
    const backoff = new Promise((resolve) => {
      setTimeout(() => {
        resolve('重新请求：' + config.__retryCount)
      }, config.retryDelay || 1)
    })

    // 返回Promise，以便Axios知道我们已经处理了错误
    return backoff.then((txt) => {
      console.log(txt)
      return request(config)
    })
  }
)

// 发送请求
const getData = () => {
  request({
    method: 'get',
    url: '/delay_3s_data'
  })
}
</script>

<template>
  <h1>请求重试</h1>
  <button @click="getData">发送请求</button>
</template>