如何获取返回promise的async函数的返回值

Question

我有一个像这样的代码

const getAllProduct = async () => {
let allProduct = "";
let config = {
method: "get",
url: db_base_url + "/products/",
headers: {
Authorization: "Bearer " + token.access.token,
"Content-Type": "application/json",
},
};
try {
let response = await axios(config);
allProduct = response.data.results;
} catch (error) {
console.log(error);
}
console.log(allProduct);
return allProduct;
};

console.log(allProduct)确实打印了一个数组。

该函数将在react的render方法上被

调用

return (<div> {getAllProduct()} </div>)

I've try to do

return (<div> {console.log(getAllProduct())} </div>

但是console.log在渲染时返回的是Promise Object而不是results数组。

我怎样才能绕过这个?

Answer 1

async函数返回一个Promise，这意味着它们的结果不是立即可用的。

您需要做的是await调用getAllProduct()函数的结果或链a then()方法调用。

看看你的代码，我假设你想在你的组件被渲染后调用getAllProduct()函数。如果是这种情况，useEffect()钩子是你应该调用你的函数的地方。

你可以在useEffect()钩子中定义和调用你的函数，一旦数据可用，就把它保存在组件的本地状态中。

首先定义组件的本地状态

const [products, setProducts] = useState([]);

在useEffect()钩子中定义并调用getAllProduct()函数

useEffect(() => {
const getAllProduct = async () => {
...
try {
let response = await axios(config);
allProduct = response.data.results;

// save the data in the state
setProducts(allProduct);
} catch (error) {
console.log(error);
}
};
// call your async function
getAllProduct();
}, []);

最后，在JSX中，在products数组上映射()并以您想要在DOM中呈现的任何方式呈现产品。

return (
<div>
{ products.map(prod => {
// return some JSX with the appropriate data
}) }
</div>
);

Answer 2

use

getAllProduct().then(res => console.log(res))

Answer 3

async函数总是返回一个你在调用之前使用await的承诺getAllProduct()

const  res = await getAllProduct();
console.log(res) 

Answer 4

在我的情况下，菊花链.then不起作用。可能是因为我有一个helper JS文件，其中包含所有DB相关的函数，并且它们的数据被用于各种React组件。

真正起作用的是在async中链接await。我修改了代码，它的工作原理相同的组件(如在您的情况下)。但是我们可以采用相同的逻辑，将async函数放在不同的JS文件中，并在其他组件中使用它的响应。

免责声明:我没有测试下面的代码，因为我的情况不同。

useEffect( () => {
var handleError = function (err) {
console.warn(err);
return new Response(JSON.stringify({
code: 400,
message: 'Error in axios query execution'
}));
};

const getAllProduct = async () => {
let allProduct = "";
...

const response = await ( axios(config).catch(handleError));
allProduct = await response;
return allProduct;
}
},[]);     
// Then inside JSX return
getAllProduct().then( data => { 
// Make use of data 
});