假如有这样一个场景，有上万条数据，需要分100条一批的分批次并行调用接口，假如接口返回失败，提示该批次失败并于2秒后重试， 假如重试又失败，提示4秒后重试，如果还是失败则8秒后重试，当重试3次后依然失败那么停止重试。 使用RxJS 简洁实现方式如下:

    1. import { _http } from '@/http.service';
    2. import {
    3.   debounceTime,
    4.   mergeMap,
    5.   map,
    6.   catchError,
    7.   retryWhen,
    8.   delayWhen,
    9. } from 'rxjs/operators';
    11. const limit = 100
    12. const len = Math.ceil(this.lineIds.length / limit)
    13. const list = []
    14. let count = 0
    15. for (let i = 0; i < len; i++) {
    16.   list.push(idList.slice(i * limit, (i + 1) * limit))
    17. }
    19. from(list) // 分批
    20.   .pipe(
    21.     mergeMap((data: any) => {  // 拿到当前批次数据合并到当前流
    22.       let countLimit = 0
    23.       return _http   // 发送请求，详见 随后贴出http.service
    24.         .post('/api/issued-task', {
    25.           data
    26.         })
    27.         .pipe(
    28.           map(({ response }: any) => {
    29.             const { code, msg } = response
    30.             if (code === 1 && countLimit < 3) {
    31.               countLimit++
    32.               this.alert(  // 封装的提示信息方法，
    33.                 `发送失败，${2 ** countLimit} 秒后自动重发，请稍等...`
    34.               )
    35.               throw new Error(msg)
    36.             }
    37.             return response
    38.           }),
    39.           retryWhen((errors: any) => // 重试
    40.             errors.pipe(delayWhen(() => timer(2 ** countLimit * 1000))) 
    41.                     //重试时间设置
    42.           ),
    43.           catchError(({ message: msg }: any) => of({ code: 1, msg })) 
    44.           // 捕获 整个请求过程中的错误信息
    45.         )
    46.     }),
    47.     catchError(({ message: msg }: any) => of({ code: 1, msg })) 
    48.     // 捕获整个分批过程中的错误信息
    49.   )
    50.   .subscribe(({ code, msg }: any) => { // 每一批次的请求回调处理
    51.     count++
    52.     if (code !== 0) {
    53.       this.alert(msg)
    54.       return
    55.     }
    56.     if (count === len) { // 所有批次下发完成，成功和失败，具体逻辑自己控制
    57.       this.alert('任务下发成功！')
    58.     }
    59.   })

    http.service 内容如下：

    1. /*
    2.  * Created by yyccmmkk on 2019/9/11 15:12
    3.  * 36995800@163.com
    4.  */
    5. import { ajax } from 'rxjs/ajax'
    6. import { of, race } from 'rxjs'
    7. import { delay } from 'rxjs/operators'
    9. const baseURL: string = process.env.VUE_APP_BASE_URL // 上传接口 baseUrl
    10. const regExp = /\/index\/(.+)\/?/
    11. const urlRegExp = /\/(tms|ofc)(?=\/)/
    12. const basePath = process.env.VUE_APP_BASE_PATH // 路由
    13. const mapBasePath = process.env.VUE_APP_MAP_BASE_PATH
    14. const limitBasePath = process.env.VUE_APP_LIMIT_BASE_PATH
    16. const match = window.location.href.match(regExp)
    18. const axios = require('axios')
    20. const token = sessionStorage.getItem('token') || (match && match[1]) || null
    22. const instance = axios.create({
    23.   baseURL,
    24.   timeout: 50000,
    25.   headers: {
    26.     'Content-Type': 'application/json;charset=UTF-8',
    27.     token
    28.   }
    29. })
    31. // eslint-disable-next-line
    32. class _http {
    33.   static cache: any = { source: { url: '', data: null, baseURL } }
    35.   static interceptors: any = {
    36.     // eslint-disable-next-line
    37.     beforeRequest(source: { url: string; data: any; baseURL: string }) {}
    38.   }
    40.   static post(url: string, data: any) {
    41.     const cache = _http.cache
    42.     cache.source = { url, data, baseURL }
    43.     _http.interceptors.beforeRequest(_http.cache.source)
    44.     return race(
    45.       of({ code: 408, msg: '请求超时！' }).pipe(delay(50000)),
    46.       ajax({
    47.         url: `${baseURL}${url}`,
    48.         method: 'POST',
    49.         async: true,
    50.         body: data,
    51.         headers: {
    52.           'Content-Type': 'application/json;charset=UTF-8',
    53.           token
    54.         }
    55.       })
    56.     )
    57.   }
    58. }
    60. // 本地联调时，不需要tms ofc
    61. if (process.env.VAUE_APP_API_ENV === 'local') {
    62.   instance.interceptors.request.use(
    63.     (config: any) => {
    64.       const { url, baseURL } = config
    65.       // Do something before request is sent
    66.       config.url = url.replace(urlRegExp, '')
    67.       const match = url.match(urlRegExp)
    68.       if (match) {
    69.         config.baseURL =
    70.           match[1] === 'ofc' ? `${baseURL}:30210` : `${baseURL}:30250`
    71.       }
    72.       return config
    73.     },
    74.     (error: any) => {
    75.       // Do something with request error
    76.       return Promise.reject(error)
    77.     }
    78.   )
    79.   _http.interceptors.beforeRequest = (source: {
    80.     url: string
    81.     data: any
    82.     baseURL: string
    83.   }) => {
    84.     const { url } = source
    85.     const match = url.match(urlRegExp)
    86.     if (match) {
    87.       const temp = match[1] === 'tms' ? ':3030' : ':8080'
    88.       source.url = url.replace(urlRegExp, temp)
    89.     }
    90.   }
    91. }
    93. export default instance
    94. export { baseURL, basePath, mapBasePath, limitBasePath }
    95. export { instance as http, _http }