React 的 GET 上的 Axios 回调

Question

我试图在 axios get 请求正在进行时显示一个加载微调器，为此我相信我需要从请求中回调。componentDidMount()我这样调用 get 请求：

componentDidMount() {
  this.props.fetchCloudProperties( () => {
    this.setState( { dim : false } );
  } );
}

希望当检索数据时，调光器（旋转器）将根据该调用而消失seState。我已经用帖子进行了回调，但从未用 get 进行过回调。我对数据的获取操作是：

export function fetchCloudProperties( callback ) {
  const VARIABLE_URL = '/cloud/properties';
  const request      = axios.get( `${ROOT_URL}${VARIABLE_URL}` )
    .then( request => {
      return ({
        type    : FETCH_CPS,
        payload : request
      });
    } ).catch( ( error ) => {
      console.log( error );
    } )
}

现在控制台抱怨“动作必须是普通对象”，我不确定这意味着什么，但我也看到它抱怨“未处理的拒绝”，所以不太确定。

编辑：我有一个createCloudProperty使用回调的方法，它工作正常：

export function createCloudProperty( values, callback ) {
  const VARIABLE_URL = '/cloud/property';
  const request      = axios.post( `${ROOT_URL}${VARIABLE_URL}`, values )
    .then( () => callback() );

  return ({
    type    : CREATE_CP,
    payload : request
  });
}

这是从以下地方调用的：

onSubmit( values ) {
  this.props.createCloudProperty( values, () => {
    this.props.history.push( '/cloudproperties' );
  } );
}

Answer 1

您无法传递请求/响应，因为它不是普通对象。您应该使用响应数据。

export function fetchCloudProperties( callback ) {
  const VARIABLE_URL = '/cloud/properties';
  const request      = axios.get( `${ROOT_URL}${VARIABLE_URL}` )
    .then( response => {
      return ({
        type    : FETCH_CPS,
        payload : response.data
      });
    } ).catch( ( error ) => {
      console.log( error );
    } )
}