Javascript 导入的异步函数的异步等待未正确等待

我很困惑

我创建了一个异步实用程序函数，从一个文件导出并导入到React类组件中。该函数对返回对象的身份验证服务进行API调用

我的目标是能够在我的组件中调用该函数，并将返回的对象设置为一个名为“tokens”的变量，然后我可以进一步操作该变量

我的问题是，无论我如何格式化它，我都无法让组件中的函数在继续之前等待异步函数的返回

以下是实用程序函数的简化版本：

// configure and send API request using Axios library
export const retrieveTokens = async () => {
  
  // configure request
  var config = {
    // configs
  };

  // send request
  axios(config)
    // handle response
    .then(function (response) {
      let cognitoTokens = response.data;
      console.log("A:")
      console.log(cognitoTokens);
      return cognitoTokens;
    })
    // handle error
    .catch(function (error) {
      console.log(error);
    });
};

然后将此实用程序函数导入React类组件，如下所示：

import React, { Component } from "react";
import { retrieveTokens } from "./utils.js";

class HeaderLogic extends Component {
  componentDidMount() {
    async function authenticationFlow() {
      let tokens = await retrieveTokens();
      console.log("B:");
      console.log(tokens);

    }
    authenticationFlow();
  }

  render() {
    return <></>;
  }
}

export default HeaderLogic;

但我只能得到

B:
Undefined

A:
{Tokens}

---

我尝试了各种不同的语法，但我无法让控制台日志在

authenticationFlow（）

中等待

您忘了

返回
。另外，如果函数中没有任何
wait
，则不要将其声明为
async
（这不是因为它会导致任何问题，而是因为它没有用处）：

你需要给retrieveTokensflummoxed加上承诺这是个有趣的词谢谢你教我这就是它。非常感谢。很高兴它起了作用！
B:
Undefined

A:
{Tokens}


// configure and send API request using Axios library
export const retrieveTokens = () => {
  
  // configure request
  var config = {
    // configs
  };

  // send request
  return axios(config)
    // handle response
    .then(function (response) {
      let cognitoTokens = response.data;
      console.log("A:")
      console.log(cognitoTokens);
      return cognitoTokens;
    })
    // handle error
    .catch(function (error) {
      console.log(error);
    });
};