如何将 .then .catch 转换为 async/await

Question

使用 React/Redux 前端和我自己的 nodejs/express api 开发登录表单/注销按钮。登录表单出现问题。大多数时候它工作得很好，但我经常遇到错误。第一个错误是forbidden，它告诉我用户在发送请求之前尚未完全通过身份验证userDetails。

还有另一个错误，Redux 不会更改用户的角色，我需要动态渲染导航。我认为将 handleLogin 转换为 async/await 将是解决方案，但我相信我做得不对。

import React from 'react';
import { login, userDetails } from '../axios/homeApi';
import { useForm } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import { setLogin, setRole } from '../redux/actions';
const LoginForm = () => {
const { handleSubmit, register, errors } = useForm();
const dispatch = useDispatch();

const handleLogin = values => {
    login(values.email, values.password)
    .then(res => {
        const token = res.data.token;
        window.localStorage.setItem('auth', token);
        dispatch(setLogin({ loggedIn: true }));
        userDetails()
        .then(res => {
            const role = res.data.data.role;
            dispatch (setRole({ role }));
        })
    })
}

return (
    <div>
        <form action="" onSubmit={handleSubmit(handleLogin)} className="footer-form">
            <input
                type="email"
                placeholder="Enter Email Here"
                name="email"
                ref={register({ required: "Required Field" })}
            />
            <input
                type="password"
                placeholder="Enter Password Here"
                name="password"
                ref={register({
                    required: "Required Field",
                    minLength: { value: 6, message: "Minimum Length: 6 Characters" }
                })}
            />
            {errors.password && errors.password.message}
            {errors.email && errors.email.message}
            <input type="submit" value="Login" />
        </form>
    </div>
)
}

export default LoginForm;

这是我将 handleLogin 转换为 async/await 的最佳尝试。我试图了解如何从这些调用中提取数据。

const handleLogin = async values => {
    try {
        const {data: {token}} = await login(values.email, values.password)
        window.localStorage.setItem('auth', token);
        console.log(token);
        const user = await userDetails();
        await dispatch(setLogin({ loggedIn: true}))
        await dispatch(setRole(user.data.data.role))
    } catch(err) {
        console.log(err)
    }
}

对此的任何帮助/指导将不胜感激。

Answer 1

你必须考虑当你使用时，变量值与返回到without 的await变量值相同。resawait

所以如果你有：

login(values.email, values.password)
    .then(res => { 
     })

这就像：

var login = await login(values.email, values.password);

所以使用这个逻辑，这个：

login(values.email, values.password)
    .then(res => {
        const token = res.data.token;
        // whatever
        userDetails()
        .then(res => {
            const role = res.data.data.role;
            // whatever
        })
    })

变成：

var login = await login(values.email, values.password)
const token = login.data.token;
// do whatever
var userDetails = await userDetails()
const role = userDetails.data.data.role;
// whatever

检查这个例子是如何工作的。代码是“相同的”。一个使用.then，另一个使用await。

var login = await login(values.email, values.password)
const token = login.data.token;
// do whatever
var userDetails = await userDetails()
const role = userDetails.data.data.role;
// whatever