检查http是成功还是失败Reactjs

Question

我想问一下，如果我的组件成功或失败的http请求，我该如何处理。我从我的动作（http）通过reducer调度数据。我想在这里实现的是在http请求之后，如果组件会成功或失败，它会通知我，如果http请求完成，我可以做一些其他的事情。

组件：

class BoardAdd extends React.Component { 


    addBoard(formProps) { 

     // This is where my HTTP request 
     this.props.addBoard(formProps); 

     // After I call the this.props.addBoard(formProps). I want to check if it succeeds or fail 
    } 

    render() { 

     const { error, handleSubmit } = this.props; 

     return (
      <Col lg={3}> 
       <a href="javascript:;" className={style.boardItemAdd} onClick={this.openAddBoardModal.bind(this)}> 
        <div className={[style.boardItemContainer,style.boardItemGray].join(' ')}> 
         Create New Board 
        </div> 
       </a> 

       <Modal show={this.state.boardAddModalShow} onHide={this.closeAddBoardModal.bind(this)} bsSize="small" aria-labelledby="contained-modal-title-sm"> 
        <Modal.Header closeButton> 
         <Modal.Title id="contained-modal-title-sm">Create Board</Modal.Title> 
        </Modal.Header> 
        <Modal.Body> 
         <form onSubmit={handleSubmit(this.addBoard.bind(this))}> 

          <Field name="name" component={renderField} type="text" placeholder="What are you organizing" /> 
          <button className="btn btn-primary btn-block">Submit</button> 
         </form> 

        </Modal.Body> 
       </Modal> 

      </Col> 
     ) 
    } 
} 

function mapStateToProps(state){ 
    return { 
     data: state.board.data, 
     success: state.board.success 
    }; 
} 

export default connect(mapStateToProps, { addBoard })(form(BoardAdd)); 

操作：

export function addBoard(data){ 
    return function(dispatch){ 
     axios.post(`${API_URL}/boards`, 
      { 
       name: data.name 
      } 
     ) 
     .then(response => { 
      if(response.status === 201){ 
       dispatch({ type: ADD_BOARD_SUCCESS, data: response.data.result }); 
      } 
     }) 
     .catch(function (error) { 
      console.log(error); 
     }); 
    } 
} 

减速机：

import { ADD_BOARD_SUCCESS,ADD_BOARD_FAIL} from 'constant/board.jsx'; 

const INITIAL_STATE = { 
    data: {}, 
    error_message: '', 
    success: false 
}; 

export default (state = INITIAL_STATE, action = {}) => { 
    switch(action.type) { 
     case ADD_BOARD_SUCCESS: 
      return { 
       data: action.data, 
       success: true, 
       error_message: '' 
      }; 
     case ADD_BOARD_FAIL: 
      return { 
       data: {}, 
       success: false, 
       error_message: action.error_message 
      }; 
     default: return state; 
    } 
} 

Answer 1

一种方式来通知您的组件是否是成功或失败是让你的行动回报一个承诺。所以，你的动作应该是这样的：

export function addBoard(data){ 
    return function(dispatch){ 
     return axios.post(`${API_URL}/boards`, 
      { 
       name: data.name 
      } 
     ) 
     .then(response => { 
      if(response.status === 201){ 
       const result = response.data.result; 
       dispatch({ type: ADD_BOARD_SUCCESS, data: result }); 
       return result; 
      } 
     }); 
    } 
} 

然后在你的组件，你可以这样做：

addBoard(formProps) { 

    this.props.addBoard(formProps).then((result) => { 
     console.log("Success!", result); 
    }) 
    .catch(error => { 
     console.error(error); 
    }); 
} 

你或许应该也处理catch在你的行动，如果你想派遣一个ADD_BOARD_FAIL一个错误，但是如果你仍想在组件中捕获它，那么你必须重新抛出那个错误。