NextJS中Axios请求设置状态后执行操作存在延迟问题

问题根源 #

你的login函数虽然标记为async，但内部调用axios.post时用了.then()/.catch()却没有等待这个异步操作完成——login函数在执行完csrf()和初始状态更新后就直接返回了，完全没等登录请求结束。

这就导致submitForm里的await login(...)提前执行完毕，finally块立刻把loading设为false，加载动画先停了，但此时登录请求其实还在后台跑，后续的登录成功回调（mutate()）或错误提示（setErrors）要等请求真正走完才触发，所以看起来延迟了2秒。

修复代码 #

有两种写法可以解决这个问题：

写法一：改用await+try/catch（推荐）

const login = async ({ setErrors, setStatus, ...props }) => {
    await csrf()

    setErrors([])
    setStatus(null)

    try {
        // 等待axios请求完成
        await axios.post('/login', props)
        mutate()
    } catch (error) {
        if (error.response.status !== 422) throw error
        setErrors(error.response.data.errors)
    }
}

写法二：返回axios的Promise

如果想保留.then()/.catch()的写法，只需把axios请求的Promise返回出去，让await login(...)能等待它完成：

const login = async ({ setErrors, setStatus, ...props }) => {
    await csrf()

    setErrors([])
    setStatus(null)

    // 返回Promise，让外层await能等待请求结束
    return axios
        .post('/login', props)
        .then(() => mutate())
        .catch(error => {
            if (error.response.status !== 422) throw error
            setErrors(error.response.data.errors)
        })
}

效果说明 #

修复后，submitForm里的await login(...)会真正等待登录请求完成，finally块里的setLoading(false)会在登录请求结束后才执行——加载动画会持续到登录成功/失败的状态更新完成，不会再出现动画停了但后续操作延迟的情况。

内容的提问来源于stack exchange，提问作者BigJobbies