axios 正在阻止其他方法被执行

Question

我有一个模态表单，我想在提交后立即关闭。表单工作得很好，表单的数据输入会反映在数据库中，但同一方法中的其余操作由于某种原因没有被触发。

我希望在按下提交按钮时执行表单：

1) 通过`setLoading(true) 将loading 改为true

2) 发布输入数据

3) 关闭模态

目前，1) 和 3) 没有执行。如果我注释掉 axios，closeModal 可以正常工作。

下面是模态：

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>
    )
}

另外，我使用 Google Functions(Firebase) 作为后端。

更新：

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)
    }
}

Answer 1

我认为您的 finally 在异步 API 调用执行之前被执行。

也许，您可以将您的 axios 调用链接为 response 和 error

 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
        */
    });

这将删除对 try-catch 块的依赖

Answer 2

关闭模式并在 then() 中使用 resonse 加载 false。

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));
    }