axios 先后调用两个API失败,将用户重定向到其他页面

w7t8yxp5  于 2022-11-29  发布在  iOS
关注(0)|答案(1)|浏览(141)

我的前端使用Reactjs,后端使用Springboot和Firebase。基本上,当用户注册一个帐户时,我会调用两个API将帐户发布到Firebase和我的Springboot服务器,原因是我需要使用我自己的Springboot服务器中收集的用户数据。
我面临的问题是,在用户注册一个帐户后,在调用Firebase API后,不会调用Springboot API。(我先调用Firebase API,然后再调用Springboot API)在我看来,在调用Firebase API后,一切都停止了,代码不再继续,因此不再调用API。
如何确保可以依次调用这两个API,然后将用户重定向到下一个页面而不受任何干扰?
在Reactjs中提交时注册:

const handleOnSubmit=(event: React.FormEvent<HTMLFormElement>)=> {

        if (password !== secondPassword) {
            setPasswordsMatched(false);
            console.log("passwords matched when password!==secondPassword:" + passwordsMatched);
        } else if(!username){
            setUsernameExists(false);
        }else if(!email){
            setEmailExists(false);
        }else if(!password||!secondPassword){
            setPasswordExists(false);
        }else{
            if(subscribedStatus){
                let subscribed:string="subscribed";
                firebaseAuthServiceSignUpWithEmailAndPassword(username,email,password,subscribed,handleSignupSuccess);
            }else{
                let subscribed:string="unsubscribed";
                firebaseAuthServiceSignUpWithEmailAndPassword(username,email,password,subscribed,handleSignupSuccess);
            }
        }
}

//This is the callback function put inside the Firebase API to see if Firebase accepts the registration. If yes, the user is redirected to "/verification-email"
const handleSignupSuccess=(signupStatus:boolean)=>{
        setSignupSuccess(signupStatus);
        if(signupStatus){
            firebaseAuthServiceEmailVerification(setEmailVerificationSent);
            navigate("/verification-email");
        }
}

Firebase API:

export const firebaseAuthServiceSignUpWithEmailAndPassword= (username:string,email: string, password: string, subscribed:string,callback: (isSuccess:boolean)=>void) =>{
    const auth = getAuth();
    createUserWithEmailAndPassword(auth, email, password)
        .then(async ( userCredential) => {
            // Signed in
            const user = userCredential.user;
            await postAccount(username, email, password, user.uid, subscribed);
            callback(true);
        })
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;
            callback(false);
            // ..
        });
}

Spring启动API:

export const postAccount=(username:string,email:string,password:string,firebaseUid:string,subscribedStatus:string)=>{
    axios.post(`http://localhost:8080/user/${username}/${email}/${password}/${firebaseUid}/${subscribedStatus}`
    )
        .then((res)=>{

        }).catch((error)=>{
            console.log(error);
        })
}
ttcibm8c

ttcibm8c1#

在postAccount函数中,您通常需要一个return语句
快速修复

export const postAccount=(username:string,email:string,password:string,firebaseUid:string,subscribedStatus:string)=>{
    // return here
    return axios.post(`http://localhost:8080/user/${username}/${email}/${password}/${firebaseUid}/${subscribedStatus}`
    )
        .then((res)=>{
            return res; // may be return here too
        }).catch((error)=>{
            console.log(error);
        })
}

// async function
const handleOnSubmit= async (event: React.FormEvent<HTMLFormElement>)=> {

    if (password !== secondPassword) {
        setPasswordsMatched(false);
        console.log("passwords matched when password!==secondPassword:" + passwordsMatched);
    } else if(!username){
        setUsernameExists(false);
    }else if(!email){
        setEmailExists(false);
    }else if(!password||!secondPassword){
        setPasswordExists(false);
    }else{
        if(subscribedStatus){
            let subscribed:string="subscribed";
            // wait till completion
            await firebaseAuthServiceSignUpWithEmailAndPassword(username,email,password,subscribed,handleSignupSuccess);
        }else{
            let subscribed:string="unsubscribed";
            // wait till completion
            await firebaseAuthServiceSignUpWithEmailAndPassword(username,email,password,subscribed,handleSignupSuccess);
        }
    }

}
稍微好一点的修正:
对于多个API调用,最好使用异步调用

export const firebaseAuthServiceSignUpWithEmailAndPassword = async (username:string, ...) => {
        try {
                const auth = getAuth();
                const userCredentials = await createUserWithEmailAndPassword(auth, email, password)
                const user = userCredential.user;
                const res = await postAccount(username, email, password, user.uid, subscribed);
                // may be some extra checks
                //if (res.success) {
                //    callback(true);
                //}
                callback(true);
         } catch(error: any) {
            // handle error
            callback(false);
         }
       
    }

export const postAccount = async (username: string, ...) => {

     return await axios.post(`http://localhost:8080/user/${username}/${email}/${password}/${firebaseUid}/${subscribedStatus}`)

}

希望能有所帮助

相关问题