如何从async函数正确返回值 解决fetch调用后await返回undefined问题

问题原因 #

• 核心问题是你定义的async function login()没有显式返回任何值，所有异步函数如果没有手动return结果，默认返回的就是undefined，所以你在外部await login()拿到的自然是空值。
• 其次你最后调用filter筛选余额的操作结果没有被保存，也没有向外传递，处理后的数据直接被丢弃了。
• 补充：如果你只需要匹配type === "Current"的单个余额项，使用Array.find()比Array.filter()更合理，前者直接返回第一个符合条件的对象，后者返回所有符合条件对象组成的数组。

修正后的代码 #

import React from "react";
import {
  WASTEMANAGEMENT_USERNAME,
  WASTEMANAGEMENT_PASSWORD,
  WASTEMANAGEMENT_APIKEY_AUTH,
  WASTEMANAGEMENT_APIKEY_CUSTID,
  WASTEMANAGEMENT_APIKEY_DATA,
} from "@env";

async function login() {
  let response = await fetch("https://rest-api.wm.com/user/authenticate", {
    method: "POST",
    headers: {
      "content-type": "application/json",
      apikey: WASTEMANAGEMENT_APIKEY_AUTH,
    },
    body: JSON.stringify({
      username: WASTEMANAGEMENT_USERNAME,
      password: WASTEMANAGEMENT_PASSWORD,
      locale: "en_US",
    }),
  });
  let res = await response.json();

  const id = res.data.id;
  const access_token = res.data.access_token;

  response = await fetch(
    `https://rest-api.wm.com/authorize/user/${id}/accounts?lang=en_US`,
    {
      method: "GET",
      headers: {
        oktatoken: access_token,
        apikey: WASTEMANAGEMENT_APIKEY_CUSTID,
      },
    }
  );
  res = await response.json();

  const custId = res.data.linkedAccounts[0].custAccountId;

  response = await fetch(
    `https://rest-api.wm.com/account/${custId}/invoice?userId=${id}`,
    {
      method: "GET",
      headers: {
        apikey: WASTEMANAGEMENT_APIKEY_DATA,
        token: access_token,
      },
    }
  );
  res = await response.json();

  // 筛选目标数据并return向外传递
  const currentBalance = res.body.balances.find(item => item.type === "Current");
  console.log(currentBalance);
  // 你也可以根据需要返回更多数据，比如return { currentBalance, access_token, custId }
  return currentBalance;
}

const WasteManagementLogin = async () => {
  const data = await login();
  console.log(data);
  // 这里就可以拿到数据做后续处理了
};

export default WasteManagementLogin;

额外注意事项 #

如果这个函数是在React组件内部调用，不要直接在组件顶层执行异步逻辑，建议配合useEffect和useState做状态管理，避免渲染异常：

// 组件内调用示例
function MyComponent() {
  const [balance, setBalance] = useState(null)

  useEffect(() => {
    const getBalance = async () => {
      const res = await WasteManagementLogin()
      setBalance(res)
    }
    getBalance()
  }, [])

  return <div>当前余额：{balance?.amount}</div>
}

内容的提问来源于stack exchange，提问作者anickflower