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

所以我有一个这样的代码

  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;
  };

log（allProduct）会打印一个数组

该函数将在react的render方法上调用

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

return（{getAllProduct（）}）

我已经试过了

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

return（{console.log（getAllProduct（））}

但是呈现时的console.log返回为Promise对象，而不是results数组

我怎样才能解决这个问题？

使用

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

---

异步函数总是返回一个承诺，在调用它getAllProduct（）之前等待

---

async

函数返回一个

Promise

，这意味着它们的结果不会立即可用

您需要做的是等待调用

getAllProduct（）

函数的结果，或者链接方法调用

查看您的代码，我假设您希望在呈现组件之后调用函数

您可以在钩子中定义并调用函数，一旦数据可用，就将其保存在组件的本地状态中

首先定义组件的本地状态

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

在

useffect（）

钩子中定义并调用

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内部，通过

产品

数组，以您希望在DOM中呈现的任何方式呈现产品

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

返回(
{products.map（prod=>{
//返回一些包含适当数据的JSX
}) }
);

你无法回避这个问题，但你不需要这样做。它会返回一个承诺，因为你不知道函数什么时候会异步完成，一旦进入“异步模式”，你就无法将值恢复到“同步模式”。你需要等待返回的承诺或使用

。然后（）

在上面。您需要等待它，和/或全局设置值。在上面的某个位置定义一个变量并在返回时设置它，但这是异步的，等待它。：）请不要只发布代码作为答案，还要解释代码的作用以及它如何解决问题。有解释的答案通常更有帮助，质量更好，更容易吸引选票。我理解。我会努力解释的

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