Axios 在 GET 上回调 React

Question

我正在尝试在 axios 获取请求正在进行时显示加载微调器，为此我相信我需要从请求中回调。我在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 );
    } )
}