用think处理redux操作中的承诺

Question

我有一个像这样的假登录函数

const login = (email, password) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (email === "[e-mail]" && password === "demo1234") {
resolve(200);
} else {
reject(401);
}
}, 1000);
});
};

这是我的authAction.js文件

export const login = (email,password) => async(dispatch) => {
try {
await fakeLogin(email,password)
dispatch({
type:LOGIN,
payload:{}
})

} catch (error) {
console.log(error)
}
}

在我的LoginPage.js react组件中，我像这样调用动作

const submit = ({ email, password }) => {
props.login(email, password).then((e) => console.log("then",e)).catch(err=>console.log("ca"));
};

如果我传递了错误的凭据，它会在操作中记录错误代码401。但是在LoginPage组件中，它总是来到then块并打印undefined。

即使我传递了正确的凭据，它也会阻塞并打印'undefined'

但是如果我修改动作返回200或者错误

export const login = (email,password) => async(dispatch) => {
try {
await fakeLogin(email,password)
dispatch({
type:LOGIN,
payload:{}
})
return 200

} catch (error) {
return error;
}
}

现在它在"然后"中打印错误代码

简单地说，我想通知LoginPage组件请求发生了什么。所以我现在做的是可以的还是有其他性能最佳的方法来做这个?

任何帮助提前感谢!

Answer 1

您忘记了在then中返回值并在catch中抛出错误

export const login = (email,password) => async(dispatch) => {
try {
const res = await fakeLogin(email,password)
dispatch({
type:LOGIN,
payload:{}
})
return res

} catch (error) {
console.log(error)
throw error
}
}