用RxJs让axios支持重试

axios是前端常用的http请求库，在业务中希望增加重试功能，本来通过自己简单的封装也能实现这个功能，详见我以前的帖子，本着杀鸡用牛刀的精神通过RxJs为axios增加这个功能

未改造前的函数

import axios from 'axios'

const get = (url, data) => {
  return axios.get(url, { params: data })
}

改造后

import axios from 'axios'
import { defer } from 'rxjs'
import { retry } from 'rxjs/operators';

const get = (url, data) => {
  return new Promise((resolve,reject)=>{
    defer(() => axios.get(url, { params: data }))
    .pipe(retry(3))
    .subscribe({next: resolve,error: reject})
  })
}

调用测试

get('./data.json',{a:1}).then(res=>{
  console.log('then',res)
}).catch(res=>{
  console.log('catch',res)
})

测试结果 异常测试(data2.json不存在)

get('./data2.json',{a:1}).then(res=>{
  console.log('then',res)
}).catch(res=>{
  console.log('catch',res)
})

测试结果

上面是出现错误后简单的重试，下面再改进一下支持延时重试

import axios from 'axios'
import { defer } from 'rxjs'
import { retryWhen,delay,take } from 'rxjs/operators'

const get = (url, data) => {
  return new Promise((resolve,reject)=>{
    defer(() => axios.get(url, { params: data }))
    .pipe(retryWhen(errors => errors.pipe(delay(3000),take(3))))
    .subscribe({next: resolve,error: reject})
  })
}

测试结果，通过时间瀑布可以看到延时效果