导航到元素，无论是解决还是拒绝

Question

这里仅当登录返回解析时才应导航，但无论其解析还是拒绝都正在导航

const submitHandler=async()=>{
                try{
                    await login("user","12345");
                    navigate("/xyz")
                }catch(error){
                setErrorMessage(error)
                }
      }

这是登录方法

const login = (userName, password) => {
              //validating
return new Promise((resolve,reject) => {
if(res.status===200){
                     resolve("success")
}
else{
     reject("failed")
}
})

我想知道为什么它会导航到组件，无论解决还是拒绝

Answer 1

您遇到的问题可能是由于登录函数始终返回 Promise，无论登录是否成功。在您的登录函数中，您当前使用的 Promise 根据条件 if (res.status === 200) 来解析或拒绝。但是，您尚未提供有关如何定义 res 或它来自何处的信息。

要解决该问题，您需要根据登录操作的实际结果确保 Promise 被正确解决或拒绝。假设您正在对服务器进行异步调用（例如，使用 fetch），您应该将解析或拒绝 Promise 的逻辑放置在异步操作中。

以下是如何修改登录功能的示例：

const login = async (userName, password) => {
    try {
        // Assuming you are making an asynchronous request using fetch
        const response = await fetch(/* your API endpoint */, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                username: userName,
                password: password,
            }),
        });

        if (response.status === 200) {
            // Resolve with a success message or relevant data
            return Promise.resolve("success");
        } else {
            // Reject with an error message or relevant data
            return Promise.reject("failed");
        }
    } catch (error) {
        // Handle any unexpected errors during the login process
        return Promise.reject("An unexpected error occurred");
    }
};