如何获取返回 promise 的异步 function 的返回值

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) 会打印一个数组。

function 将在反应的渲染方法上被调用

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

我试过做

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

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

我该如何解决这个问题？

Answer 1

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

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

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

您可以在useEffect()钩子中定义和调用 function ，一旦数据可用，将其保存在本地 state 组件中。

首先定义组件的本地state

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

在useEffect()挂钩中定义并调用getAllProduct() function。

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

Answer 2

利用

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

Answer 3

async function 总是返回一个 promise 你在调用它之前使用 await 调用它 getAllProduct()

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

Answer 4

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

起作用的是async中的菊花链await 。 我修改了适用于相同组件的代码（如您的情况）。 但是我们可以采用相同的逻辑，将异步 function 放在不同的 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 
    });