使用async await和axios get访问promise结果

Question

我正在调用reducer中的一个函数，该函数返回一个promise，我想将其promise结果分配给reducer的现有initialState字段。不过我不知道该怎么做。我尝试了一些我在网上看到的解决方案，但似乎不起作用。

编辑：我可以打印出我的承诺结果，但我得到了一个错误：Uncaught TypeError: Cannot read properties of undefined (reading 'idType')。我的代码中有一行导致了错误，但我不确定如何修复：

const idType = useSelector((state) => state.questionnaireData.tmpParams.idType)

我的功能：

const getId = async (idType) => {
try {
const res = await axios.get(`https://www.exampleurl.com/${idType}`)
return res.data[0]["idtype"];
} catch (err) {
console.error("idType", err.toJSON());
}

我的初始状态和减速器：

const initialState = {
tmpParams: {
idType: ""
}
}
setTmpParams: async (state, action) => {
const { idtype } = action.payload;
const tmpParams = {};
tmpParams.idType = await getId(idtype);
console.log(tmpParams.idType) // prints a promise object
return {
...state,
tmpParams: {
...state.tmpParams,
...tmpParams,
},
};
}

我的承诺对象：

Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "Visual"

Answer 1

getId是一个异步函数，因此它将返回一个promise。因此，reducer不会等待getId解析后再继续执行。一个潜在的解决方案是将reducer设置为异步函数并等待getId。

Answer 2

您的部分问题似乎是从一个reducer调用async方法，这是一个反模式，因为reducer本身不应该有副作用。由于您正在打印getById函数的结果，因此该结果实际上是一个承诺。你需要await才能得到你想要的结果。

我建议您重构应用程序，使其能够更有效地处理副作用。您可以使用Redux-Thunk或处理组件中的副作用(事件或useEffect(，并将结果传递到您的reducer中。

Answer 3

setTmpParams: async (state, action) => {
tmpParams.idType = await getId(idtype);
console.log(tmpParams.idType) // prints a promise object
return {
...state,
tmpParams: {
...state.tmpParams,
...tmpParams,
},
};
}