如何获取返回承诺的异步函数的返回值答案

【问题标题】：How to get the return value of a async function that returns a promise如何获取返回承诺的异步函数的返回值
【发布时间】：2022-01-20 15:36:37
【问题描述】：

所以我有这样的代码

  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 by的render方法调用

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

我已经尝试过

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

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

我该如何解决这个问题？

【问题讨论】：

您无法解决这个问题 - 但您不需要这样做。它返回一个承诺，因为您不知道函数何时会完成，因为它是异步发生的，一旦处于“异步模式”，您就无法将您的值恢复到“同步模式”。您需要等待返回的 Promise 或在其上使用 .then()。
您需要等待它，和/或全局设置值。在上面某处定义一个变量并将其设置为返回，但这是异步的，等待它。 :)

标签： javascript reactjs

【解决方案1】：

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

您需要做的是await 调用getAllProduct() 函数的结果或链接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 中，.map() 覆盖 products 数组，并以您希望在 DOM 中呈现的任何方式呈现产品。

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

【讨论】：

【解决方案2】：

使用

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

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。
我明白了。我会努力解释的

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

起作用的是将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 
    });

【讨论】：