Redux axios 请求取消

Posted 2023-02-19

【中文标题】Redux axios 请求取消

【英文标题】：Redux axios request cancellation

【发布时间】：2017-10-14 01:09:55

【问题描述】：

我有一个带有 Redux 操作和 reducer 的 React Native 应用程序。我正在使用 redux-thunk 调度来等待异步调用。我的应用中有一个动作：

export const getObjects = (id, page) => 
    return (dispatch) => 
        axios.get(`URL`)
            .then(response => 
                dispatch( type: OBJECTS, payload: response );
            ).catch(error => 
                throw new Error(`Error: objects -> $error`);
            );
    ;
;

这工作正常，但有时用户在操作完成请求之前单击后退按钮，我必须取消它。我怎样才能在一个单独的动作中做到这一点？我read this，但我没有在 axios 中找到任何用于中止的选项。我阅读了有关 axios cancellation 的信息，但它在函数范围内创建了一个取消方法并且我无法返回，因为 JS 不支持多次返回。

在其他 Redux 操作中取消 axios 请求的最佳方法是什么？

【问题讨论】：

另一种做你想做的事情的方法是让 axios 完成请求，但在状态调度另一个操作（例如 setCanceled）中设置一个标志 canceled: true。当请求完成并且承诺解决时，您首先检查取消标志。如果为真，您将不会发送成功操作。它解决了你的问题吗？

【参考方案1】：

我建议使用 RxJS + Redux Observables 之类的东西，它为您提供可取消的 observables。

这个解决方案需要一点学习，但我相信它是一种处理异步动作分派的更优雅的方式，而redux-thunk 只是解决问题的一部分。

我建议观看杰伊菲尔普斯的介绍video，这可能有助于您更好地理解我即将提出的解决方案。

redux-observable 史诗使您能够在使用 RxJS 可观察功能的同时将操作分派到您的商店。正如您在下面看到的那样，.takeUntil() 运算符让您可以搭载 ajax 可观察对象，如果在应用程序的其他地方调度了动作 MY_STOPPING_ACTION，则可以停止它，这可能是例如由 react-router-redux 调度的路由更改动作例如：

import  Observable  from 'rxjs';

const GET_OBJECTS = 'GET_OBJECTS';
const GET_OBJECTS_SUCCESS = 'GET_OBJECTS_SUCCESS';
const GET_OBJECTS_ERROR = 'GET_OBJECTS_ERROR';
const MY_STOPPING_ACTION = 'MY_STOPPING_ACTION';

function getObjects(id) 
  return 
    type: GET_OBJECTS,
    id,
  ;


function getObjectsSuccess(data) 
  return 
    type: GET_OBJECTS_SUCCESS,
    data,
  ;


function getObjectsError(error) 
  return 
    type: GET_OBJECTS_ERROR,
    data,
  ;


const getObjectsEpic = (action$, store) = action$
  .ofType(GET_OBJECTS)
  .switchMap(action => Observable.ajax(
      url: `http://example.com?id=$action.id`,
    )
    .map(response => getObjectsSuccess(response))
    .catch(error => getObjectsError(error))         
    .takeUntil(MY_STOPPING_ACTION)
  );