async函数在调用getAllProduct（）之前总是返回一个使用await的promise

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

在我的例子中，菊花链.then不起作用。可能是因为我有一个helper JS文件，它包含了所有与数据库相关的函数，它们的数据被用于各种React组件。
真正起作用的是在async中菊花链await。我修改了代码，它适用于相同的组件（如在您的情况下）。但是我们可以采用相同的逻辑，将异步函数放在不同的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 
    });

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

使用

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