如何在React中同步调用axios？

Question

我正在 React 中使用 Axios 将用户注册到 MongoDb 数据库中。 但在注册用户之前，我会检查该用户是否已存在于数据库中，但由于 axios.post() 是异步的，因此执行此响应之前的其余代码，并再次注册具有相同 ID 的用户。

我该如何解决这个问题。 PFB 我的代码：

const validateRegister =（值）=> {

let errors={};

const patternName = new RegExp('^[a-zA-Z ]{3,20}$')
const patternPhone =  new RegExp('^[0-9]{9,10}$')
const patternEmail = new RegExp('^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$')
const patternPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')

if(!values.name || !patternName.test(values.name)){
    errors.name="Please enter a valid name"
}
if(!values.phone || !patternPhone.test(values.phone)){
    errors.phone="Please enter a valid Phone number of 9-10 digits"
}
if(!values.email || !patternEmail.test(values.email)){
    errors.email="Please enter a valid email address"
}
if(!values.password || !patternPassword.test(values.password)){
    errors.password="Please enter a strong password to continue. A strong password has: Atleast 8 characters in length, 2 letters in upper case, 1 special character (!@#$&*), 2 number (0-9), 3 letters in lower case"
}

if(!values.isTermsAndConditionsAccepted){
    errors.isTermsAndConditionsAccepted = "Please Accept the Terms and conditions"
}

//Check if the user already exist

if(values.phone){
      
    let formData = new FormData();
    formData.append('phone', values.phone);

    console.log('inside user check')

    axios.post('http://localhost:3001/doesUserExistByPhone', formData).then(response => {

        //Success - then create account
        
    }).catch(errorResponse=>{

        console.log(errorResponse)
        if(errorResponse.response.status===409){
            console.log('User already exist');  
            errors.phone="User Already exist. If you've already registered. Please try to Login.";
            return errors;
        }
        else if(errorResponse.response.status===500){
            errors.phone = "Unable to register user, contact SwapiFi Support";
            return errors;
        }
    
    })

}

console.log('Errors found before creating user: ', errors);

return errors;

}

导出默认的validateRegister

我从另一个js文件调用这个验证器：

const useFormRegister = (submitForm) => {

const [errors, setErrors] = useState({});
const [dataIsCorrect, setDataIsCorrect] = useState(false);

const  [values, setValues] = useState({
    name: "",
    phone: "",
    email: "",
    password: "",
    isTermsAndConditionsAccepted: false
})

const handleValueChangeEvent = (event) => {

    setValues({
        ...values,
        [event.target.name] : event.target.value,

    })
    
}

const handleRegisterEvent = (event) => {
    console.log('Register button clicked');
    event.preventDefault();
    setErrors(validation(values));
    
    console.log('Errors-Phone:', errors)

    setDataIsCorrect(true);

    
}

useEffect(() => {

    console.log('No. of errors:', Object.keys(errors).length)

    {Object.entries(errors).map(([key, value]) => (
        console.log("Error, ", key, ':', value)
    ))}

    if(Object.keys(errors).length === 0 && dataIsCorrect){
        
        submitForm(true);
        let formData = new FormData();
    
        {Object.entries(values).map(([key, value]) => (
        formData.append(key, value)
        ))}

        console.log(formData)

        axios.post('http://localhost:3001/registerUser', formData).then(response => {console.log(response)}).catch(error=>{console.log(error)})

    }
}, [errors])


return {handleValueChangeEvent, handleRegisterEvent, values, errors};

}

导出默认useFormRegister

Answer 1

您可能不想同步触发检查。查看 async/await 语法。您可以编写“看起来”同步但实际上异步执行的代码。这将允许您执行以下操作：

 const checkUserExists = async (user) => {
    const repsonse = await axios('/check/user/endpoint');
    const user = await response.json();

    return !!user;
 }

 const registerUser = async (user) => {
    const repsonse = await axios('/register/user/endpoint');
    const data = await response.json();

    // do stuff here
 }

现在您可以围绕这些函数实现您需要的任何逻辑

Answer 2

useEffect(()=>{
   async function deal(){
      let data = await axios.get("http://localhost:8000")
      setDeal(..)
   }
   deal()
},[])