Axios is preventing other methods from being executed

Question

I have a form in a modal that I want to close right after submitting. The form works perfectly fine and the data input from the form gets reflected on the database, but the rest of the actions within the same method doesn't get triggered for some reason.

I want the form to execute when the submit button is pressed :

1) change the loading to true through `setLoading(true)

2) post the input data

3) close the modal

Currenly, 1) and 3) aren't being carried out. closeModal works fine if I comment out the axios.

Following is the modal:

const Form = ({ closeModal }) => {
    const [email, setEmail] = useState('')
    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [loading, setLoading] = useState(false)

    const handleSubmit = async e => {
        setLoading(true)                
        e.preventDefault()    
        try {
            await axios.post(`${ROOT_URL}/createEmailList`, {
                email,
                firstName,
                lastName
            })
        } catch (err) {
            console.log(err)
        } finally {
            setLoading(false)
            closeModal()                        
        }
    }

    return (
        <form 
            className="form"
            onSubmit={handleSubmit}
        >
            <div className="label">Name *</div>
            <div className="desc">What is your name?</div> 
            <div className="input-container">
                <label className="label">
                    <input 
                        className="input" 
                        type="text" 
                        value={firstName} 
                        onChange={e => setFirstName(e.target.value)} 
                    />
                    <div className="desc">First Name</div>
                </label>
                <label className="label">
                    <input 
                        className="input"
                        type="text" 
                        value={lastName} 
                        onChange={e => setLastName(e.target.value)} 
                    />
                    <div className="desc">Last Name</div>
                </label>
            </div>
            <div className="label">Email Address *</div>
            <div className="input-container">
                <label className="label">
                    <input 
                        className="input2" 
                        type="email" 
                        value={email} 
                        onChange={e => setEmail(e.target.value)} 
                        required
                    />
                </label>
            </div>
            <button className="button">
                {loading ? "Loading..." : "Submit"}
            </button>
        </form>
    )
}

Also, I'm using Google Functions(Firebase) as the backend.

Update:

const handleSubmit = async e => {
    setLoading(true)                
    e.preventDefault()    
    try {
        await axios.post(`${ROOT_URL}/createEmailList`, {
            email,
            firstName,
            lastName
        })
    setLoading(false)
    closeModal() 
    } catch (err) {
        console.log(err)
    }
}

i think you should close model and loading false after getting response of axios not in finally. because finally will execute every time whether it's successful or not. — akhtarvahid, Oct 31 '19 at 05:55
@Vahid Akhtar did you mean like the way I updated in the post? — Kevvv, Oct 31 '19 at 05:58
i am saying like this https://stackoverflow.com/a/58637660/6544460 — akhtarvahid, Oct 31 '19 at 06:06

score 0 · Answer 1 · answered Oct 31 '19 at 06:02

I think your finally gets executed before async API call performs.

Perhaps, you could chain your axios call for response and error as

 await axios
    .post(`${ROOT_URL}/createEmailList`, {
        email,
        firstName,
        lastName
    })
    .then(response => {
        /*
        You could close modal and set loading to false here
        */
    })
    .catch(err => {
        /*
        catch errors
        */
    });

This will remove dependency for try-catch block

Okay, but what's the issue you are facing ? Does it throw error? — Meet Zaveri, Oct 31 '19 at 06:31

akhtarvahid · Accepted Answer · 2019-10-31T06:28:53.540

0

close mode and make loading false in then() with resonse.

const handleSubmit = async e => {
      setLoading(true)                
      e.preventDefault()  
        await axios.post(`${ROOT_URL}/createEmailList`, {
            email,
            firstName,
            lastName
        })
       .then(res=> { 
         if(res.status===204 || res.status===200){
           setLoading(false)
           closeModal()
          } 
       })
       .catch(err=> console.log(err));
    }

edited Oct 31 '19 at 06:28

answered Oct 31 '19 at 06:04

akhtarvahid

6,733
2
14
21

@Kevvv what problem are you facing? and check network tab while posting. let me know the problem – akhtarvahid Oct 31 '19 at 06:20
@your status code is 204 means no response after request completed. – akhtarvahid Oct 31 '19 at 06:28
apparently, this isn't an issue according to https://stackoverflow.com/questions/49931587/firebase-cloud-functions-https-oncall-finished-with-status-code-204 – Kevvv Oct 31 '19 at 06:39
@Kevvv can you console response in then() and check that. i think i might be possible you aren't getting status code from backend. – akhtarvahid Oct 31 '19 at 06:41

Axios is preventing other methods from being executed

2 Answers2