js实现接口请求重试

方法封装

首先新建 haveload.js ，文件中对Ajax请求进行二次封装，代码如下

import request from '@/utils/request'

// 可以重试的请求方法-get方法
export function retryServerGet(url, maxCount = 1, params = {
     
     }) {
    
    
  return new Promise((resolve, reject) => {
    
    
    request
      .get(url, {
    
     params })
      .then(res => {
    
    
        resolve(res)
      })
      .catch(err => {
    
    
        maxCount <= 1 ? reject(err) : retryServerGet(url, maxCount - 1, params)
      })
  })
}

// 可以重试的请求方法-post方法
export function retryServerPost(url, maxCount = 1, data = null) {
    
    
  return new Promise((resolve, reject) => {
    
    
    request
      .post(url, data)
      .then(res => {
    
    
        console.log(res)
        resolve(res)
      })
      .catch(err => {
    
    
        maxCount <= 1 ? reject(err) : retryServerPost(url, maxCount - 1, data)
      })
  })
}

上面代码中有两个方法，分别对 get 请求和 post 请求做处理，这两个方法都接收三个参数：

• 第一个参数url：表示请求接口的地址
• 第二个参数maxCount：最大请求次数，比如接口想请求5次，如果5次请求中有一次成功了，则不会继续往后请求，会把成功的结果返回
• 第三个参数：接口请求所携带的参数

使用方法

在文件中引入上面的文件，然后编写自定义方法并导出

// 测试get方法
export function testGet1(params) {
    
    
  return retryServerGet(`/home/getTotalSalesAndIndextest`, 3, params)
}

// 测试post方法
export function testPost() {
    
    
  return retryServerPost(`/api/custom/conversions`, 3, null)
}

调用

testGet1({
    
    year: 2022}).then(res => {
    
    
  console.log(res, '222222222')
})

我这里的get请求地址并不存在，但是我让他循环3次重复调用，来看运行结果是什么

在控制台连续输出了三次404，如果把地址改成正常的，则效果如下

通过查看请求发现接口只调用了一次，并吧结果返回