ReactJS

Question

我在理解问题时无法使我的代码正常工作。基本上我想验证来自服务器的数据，在验证时不会抛出错误但会在我需要处理响应的地方给出正确的响应并抛出提交错误以显示 redux-form 的验证错误。

以下是我的代码..

onFormSubmit = (values) =>{
    this.setState({loading:true});
    this.props.validateEmailFromServer(this.props.session,values,(response)=>{
      if(response.success === 2){
        throw new SubmissionError({email:'Email already Taken', _error:'Failed'});
      }
    });
}

动作定义如下

export function validateEmailFromServer(session,values,callback){

  var url='API_URL';
  var response = axios.get(url, null, 
                           getHeaders(session));
  return (dispatch) => {
    response.then(({data}) => {
      if(data.resource.length>0){
        callback({success: 2,message:'Email id is not available!'});
      }else{
        callback({success: 1,message:'Email is available!'});
      }
    }).catch((error) => {
      callback({success: 0, message: error});
    });
  }
}

我面临的问题是当我在 onFormSubmit 函数上调用回调时抛出 提交错误 时它正在调用错误自动阻止 axios，我无法摆脱它..

我需要帮助来解决这个问题。

谢谢。

Answer 1

将您的 callback 调用包装在常规 try...catch 中，否则未处理 SubmissionError 自然会导致拒绝整个 response Promise。

export function validateEmailFromServer(session,values,callback){

  var url='API_URL';
  var response = axios.get(url, null, 
                           getHeaders(session));
  return (dispatch) => {
    response.then(({data}) => {
      try {
        if(data.resource.length>0){
          callback({success: 2,message:'Email id is not available!'});
        }else{
          callback({success: 1,message:'Email is available!'});
        }
      } catch(ex) {
        // do something
      }
    }).catch((error) => {
      callback({success: 0, message: error});
    });
  }
}

Answer 2

当使用 promises 时，你有一个 .catch 块，它不会触发链中的额外 .catch 个块，除非你重新抛出错误。

我怀疑这里可能是这种情况。

Answer 3

不要在电子邮件已被接收时抛出错误，而是使用类似 notifyEmailTaken() 的方式处理它。你正在抛出错误，所以它被你的 catch 语句捕获（这是我的猜测）。

祝你好运！

Answer 4

谢谢大家的指点，我已经解决了，我改变了动作，直接在onFormSubmit函数中调用axios如下，有效..

onFormSubmit = (values) =>{
    var getUrl = 'APIURL';
    return axios.get(getUrl,getHeaders(this.props.session))
            .then(function({data}) {
              if(data.resource.length>0)
                throw new Error("ValidationError");
              else{
                console.log("Proceed");
              }
            }).catch((err) =>{
                if(err.message === 'ValidationError')
                 throw new SubmissionError({email:'Email already Taken', _error:'Failed'});
            });
}

希望这对试图找到类似解决方案的人有所帮助。

感谢帮助..干杯。

ReactJS - 使用 axios 响应抛出提交错误

ReactJS -Throw Submission Error with axios response

javascript

axios

redux-form