Как отобразить тело ошибки на внешнем интерфейсе с помощью axios
Моя конечная точка быстрого API находится здесь:
@app.post("/api/signup", status_code=status.HTTP_200_OK)
async def signup( credentials : signupcred ):
try:
print(credentials.email, credentials.password1, credentials.name )
response = account.create(email= credentials.email, password= credentials.password1, name = credentials.name , user_id= ID.unique() )
return {response}
except Exception as e:
raise HTTPException(status_code= status.HTTP_403_FORBIDDEN) # Return an appropriate error status code
во внешнем интерфейсе я хочу напечатать ответ после возникновения исключения, потому что ответ хорошо объясняет ошибку. Я не хочу отправлять пользователю код ошибки http.
мой интерфейс:
const handlesignup = async (e: any) => {
e.preventDefault();
setLoading((loading) => !loading);
try {
const signupresponse = await axios.post("/api/signup", {
email: signupemail,
password1: password1,
name: name,
}); // Send as query paramers );
// const loginresponse = await axios.post('/api/login', {email, password} )// Send as query paramers );
// setIsloggedin(()=> true)
router.replace("/dashboard");
setLoading((loading) => !loading);
} catch (error) {
alert(error);
}
};
console.info не работает, потому что я использую nextjs с быстрым API-интерфейсом. Я просто хочу напечатать ответ от функции создания во внешнем интерфейсе, чтобы пользователи знали, почему произошла ошибка функции. На данный момент предупреждение показывает: AxiosError: Ошибка запроса с кодом состояния 403.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если я правильно понимаю, вы хотите использовать другой useState<AxiosError>(), поэтому в .catch(error) вы можете setError(error), а затем в возвращаемом компоненте вы можете отобразить его...
return (
<div>
...
{error && error.response.data.message}
</div>
);
Я не знаю точного пути к сообщению в AxiosError, но если вы используете Typescript, вы можете нажать F12 и просмотреть типы.
error не будет AxiosResponse, это будет AxiosErrorВы можете получить доступ к телу ответа через error.response?.data.
Чтобы отобразить его в компоненте Next.js, вы обычно просто используете состояние React, например
const [error, setError] = useState<string>();
const handlesignup = async (e: any) => {
e.preventDefault();
setError("");
setLoading(true);
try {
const signupresponse = await axios.post("/api/signup", {
email: signupemail,
password1: password1,
name: name,
}); // Send as query paramers );
// const loginresponse = await axios.post('/api/login', {email, password} )// Send as query paramers );
// setIsloggedin(()=> true)
router.replace("/dashboard");
} catch (error) {
console.warn('Signup failed', error);
setError(error.response?.data ?? error.message);
} finally {
setLoading(false);
}
};
if (error) {
return <p className = "error">{error}</p>;
}
Это сделало это, большое спасибо. Первоначальный словарь ошибок не показывал эту информацию, возможно, она была обрезана диалоговым окном предупреждения. Спасибо!
Код состояния 500 означает, что ваш сервер каким-то образом вышел из строя. Посмотрите журналы Python и посмотрите, в чем ваша ошибка.