如何在服务 class 时等待 axios 函数为 return 值

Question

我想用某种服务构建我的应用程序 class，但是每当我从页面中提取我的 axios 调用时，axios 函数似乎 return“未定义”。

我的页面是这样的。登录函数在用户点击按钮时被调用。当我像这样在页面中调用 axios 时，一切正常。使用状态已更新并显示。

export default function AccountPage() {
  const [signinResponse, setSigninResponse] = useState();

  async function signin() {
    await axios
    .get(
      `...url...`
    )
    .then((res) => {
      setSigninResponse(res)
    });
  }
...

但是，当我使用 axios 函数并将其移动到这样的服务时 class

import axios from "axios";

export async function tableauSignin() {
  await axios
    .get(
      `...url...`
    )
    .then((res) => {
      console.log(res);
      return res;
    });
}

然后像这样导入并调用

import { tableauSignin } from "../services/tableau-online.service";
...
export default function AccountPage() {
  const [signinResponse, setSigninResponse] = useState();

  async function signin() {
    const r = await tableauSignin();
    setSigninResponse(r);
    console.log(r);
  }
...

来自服务 class 的日志很好，但帐户页面上的日志未定义。

Answer 1

正如@RobinZigmond 在评论中提到的那样。以下解决方案将起作用，但这是不必要的。

it's a needless verbose way of just doing export function tableauSignin() { return axios.get(url).then(response => response.data) }.

export async function tableauSignin() {
  return await axios.get(url).then(response => response.data)  
}

这个解决方案可能更有用

const getData = async () => {
    let res = await axios.get("url");
    let { data } = res.data; //or res
    return data;
};

你也可以这样导入

var response = await getData();

如何在服务 class 时等待 axios 函数为 return 值

How to wait for axios function to return value when in service class

javascript

reactjs

axios