Question

我有一个用javascript编写的函数来检查登录详细信息是否正确。这是功能： -

 login:(phone,key)=>{
        const regId=md5(phone);
        localStorage.setItem('regId',regId);
        return fetch(
            `${serverAddress}/api/account/login?phone=${phone}&key=${key}&regId=${regId}&appType=M`,
            {
                method:'POST',
                accept:'application/json',
            }
        ).then((res)=>{
            if(res.ok){
                return res.json();
            }else{
                throw new Error('Fetch Error');
            }
        });
    },

此功能写在客户端文件中，我在路径中访问该文件： -

class Login extends Component{
    constructor(){
      super();
      this.state = {
        redirect:false,
        email: "",
        password: ""

      }
    }


    checker(){
            var phone=8724055040;
            var pass=9435363285;
            Client.login(phone,pass).then(res=>{
                this.setState({
                    redirect:true           
                });
            })   
    }          

    render(){
        if(this.state.redirect){
            return(
                <div>HEY</div>
            )
        }
        else{
            return(
                <form>
                      Phone: <input type="text" name="pno"></input><br></br>
                      Password: <input type="text" name="pass"></input><br></br>
                      <input type="submit" value="Submit" onClick={this.checker}></input>
                 </form>                
            );
        }
    }
}
export default Login

我尝试做的是尝试使用setState在输入的凭据正确的情况下重新渲染组件。但如果他们错了，我也想得到上面的登录功能中的错误。现在发生的事情是我在我的网址栏中得到这个链接，没有任何反应： -

http://localhost:3000/login?pno=8724055040&pass=9435363285

如何解决这个问题，让它成为我想要的东西？

Answer 1

尝试以下方法来捕获异常处理并使用以下链接 https://www.tjvantoll.com/2015/09/13/fetch-and-errors/

fetch("http://httpstat.us/500")
    .then(function() {
        console.log("ok");
    }).catch(function() {
        console.log("error");
    });

在React中处理异常和捕获错误的正确方法是什么？

1 个答案: