Redux-Observable中retry操作符未触发API重试问题求助

嘿，我一眼就看出问题出在哪了——你把retry(3)放错位置啦！

问题分析 #

你当前的代码里，retry(3)是放在mergeMap的外面，也就是整个epic的流上。但实际情况是：当单个ajax请求失败时，这个错误只会终止mergeMap内部的那个子流（也就是对应这次FETCH_USER动作的ajax请求流），而不会让整个epic的主流出错。所以外面的retry根本感知不到这个错误，自然不会触发重试逻辑。

修复方案 #

把retry(3)移到ajax请求的pipe链内部，这样每次ajax请求失败时，都会针对这个请求进行重试，最多3次。修改后的代码如下：

export const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action => ajax.getJSON(`https://api.github.com/users/${action.payload}`).pipe(
    map(response => fetchUserFulfilled(response)),
    retry(3) // 把retry移到这里！
  ))
);

进阶优化（可选） #

如果想在重试之间添加延迟，避免短时间内频繁请求给服务器造成压力，可以用retryWhen替代retry：

export const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action => ajax.getJSON(`https://api.github.com/users/${action.payload}`).pipe(
    map(response => fetchUserFulfilled(response)),
    retryWhen(errors => errors.pipe(
      delay(1000), // 每次重试间隔1秒
      take(3) // 最多重试3次
    ))
  ))
);

这样调整后，当输入不存在的用户名触发404错误时，就会自动重试3次请求啦～

内容的提问来源于stack exchange，提问作者Kwinten