如何使用redux-observable和axios取消api请求

Question

我在我的react项目中使用了redux-observable和axios。当同样的动作被调用时，我想取消api请求。但是我下面的代码似乎并没有取消这个请求。

    const testEpic = action$ => action$.pipe(
  ofType('PUT_ACTION'),
  mergeMap(action => {
    return fromPromise(
      axios({
        url: 'apiUrl',
        data: {},
        method: 'put',
        headers : getHeaders().toObject(),
      })
    )
    .pipe(
      flatMap(response => ({
        data,
        type: 'PUT_ACTION_SUCCESS',
      })),
      takeUntil(action$.pipe(
        filter(action => action.type === 'PUT_ACTION')
      )),
      catchError(error => ({
        error: error.response,
        type: 'PUT_ACTION_ERROR'
      }))
    )
  })
)

Answer 1

axios不会自动取消请求。所以，一定要写一个CancelToken。https://github.com/axios/axios#cancellation

const testEpic = action$ => action$.pipe(
  ofType('PUT_ACTION'),
  mergeMap(action => {
    const CancelToken = axios.CancelToken;   //cancelToken
    const source = CancelToken.source();     //cancelToken
    return fromPromise(
      axios({
        url: 'apiUrl',
        data: {},
        method: 'put',
        headers : getHeaders().toObject(),
        cancelToken: source.token            //this added
      })
    )
    .pipe(
      flatMap(response => ({
        data,
        type: 'PUT_ACTION_SUCCESS',
      })),
      takeUntil(action$.pipe(
        filter(action => action.type === 'PUT_ACTION’),
        tap(ev => source.cancel('canceled'))      //do cancel with message
      )),
      catchError(error => ({
        error: error.response,
        type: 'PUT_ACTION_ERROR'
      }))
    )
  })
)