如何在调用 API 的函数中返回 Promise

Question

我有一个调用 API 的函数，我希望它返回一个 Promise，以便我知道它何时完成执行

这是我调用函数的组件

import { login } from "../../redux/apiCalls";
...
const handleLogin = async (e) => {
   e.preventDefault();
   login(email, password, dispatch);
   history.push('/admin');
}

这是函数本身（我在这里使用redux）

export const login = async (email, password, dispatch) => {
    try {
        dispatch(loginStart());
        const res = await axios.post('myserver...', {
            email: email,
            password: password,
        });
        dispatch(loginSuccess(res.data));
    } catch (err) {
        dispatch(loginError());
    }
}

Answer 1

默认情况下使用 async make 这个行为，函数返回一个promise，等待或者不等待，所以你可以这样做

const handleLogin = async (e) => {
   e.preventDefault();
   await login(email, password, dispatch);
   history.push('/admin');
}

如果出现错误，您将不得不在异步函数中选择 try catch

const handleLogin = async (e) => {
   e.preventDefault();
   try {
     await login(email, password, dispatch);
     history.push('/admin');
   } catch(err) {console.log("Hey this is an error baby ;)", err)}
}

但我真的不喜欢等待承诺的想法，因为 javascript 是单线程，所以我建议使用 .then() .catch()

const handleLogin = (e) => {
   e.preventDefault();
   return login(email, password, dispatch).then(() => {
     history.push('/admin');
   }).catch(console.log);
}

这里的线程没有阻塞，但也许你希望它阻塞所以......取决于你