【实战】六、用户体验优化 - 加载中和错误状态处理(中) —— React17(2)

前端小仙子

于 2024-04-29 01:43:40 发布

阅读量282

点赞数 3

分类专栏：程序员文章标签： ux 前端 javascript

本文链接：https://blog.csdn.net/m0_60388216/article/details/138296975

版权

  ...
  <ShadowCard>
    <Title>{isRegister ? "请注册" : "请登录"}</Title>
    { error ? <Typography.Text type="danger">{error.message}</Typography.Text> : null }
    {isRegister ? <Register onError={setError}/> : <Login onError={setError}/>}
    <Divider />
    ...
  </ShadowCard>
</Container>

);
};
…


修改 `src\unauthenticated-app\login.tsx`（传入 `onError` 并在异步操作后 `catch` 中使用）：

…
export const Login = ({onError}: { onError: (error: Error) => void }) => {
…
const handleSubmit = (values: { username: string; password: string }) => {
login(values).catch(e => onError(e))
};
…
};
…


同理修改 `src\unauthenticated-app\register.tsx`：

…
export const Register = ({onError}: { onError: (error: Error) => void }) => {
…
const handleSubmit = (values: { username: string; password: string }) => {
register(values).catch(e => onError(e))
};
…
};
…


使用非预设用户名密码检验：没反应。。。但是控制台打印出了刚输入的用户名和密码。。。


通过登录的调用链可以找到 导致这个问题的原因：`src\auth-provider.ts`


* `!res.ok` 时，返回了 `Promise.reject(data)` ，而 `data` 是请求入参，这显然不是预想的效果（注册同理），修改这部分为 `Promise.reject(await res.json())`


修改后再次检验，成了！


`Promise.catch` 固然好用，但接下来换个思路，使用 `try..catch` 并引出 `Event Loop`。


先修改 `src\unauthenticated-app\login.tsx` 试试水：

…
export const Login = ({onError}: { onError: (error: Error) => void }) => {
…
const handleSubmit = (values: { username: string; password: string }) => {
try { <