React Native调用Google Routes API后返回值存入变量显示undefined的解决方法问询

嘿，我来帮你排查这个问题！你遇到的undefined问题主要是因为异步函数的处理方式不对，咱们一步步来修复：

问题根源 #

1. 你的computeDuration虽然标记了async，但内部的fetch调用链没有被返回，而且最后也没把API返回的数据传递出去——这导致这个函数实际上返回的是一个resolve为undefined的Promise。
2. 在getAPIData里调用它的时候，你直接同步赋值，没有等待异步操作完成，所以拿到的要么是未完成的Promise对象，要么就是undefined。

修复方案 #

第一步：让computeDuration返回API数据

修改这个函数，让它返回整个fetch的Promise链，并且在最后一个.then()里把处理好的data返回出去：

async function computeDuration(currentLocation, targetLocation, travelMode, routingPreference){
  const apiKey = config.GOOG_ROUTES_API_KEY;
  const requestBody = {
    origin: {
      location: {
        latLng: {
          latitude: currentLocation.coords.latitude,
          longitude: currentLocation.coords.longitude,
        },
      },
    },
    destination: {
      location: {
        latLng: {
          latitude: targetLocation.latitude,
          longitude: targetLocation.longitude,
        },
      },
    },
    travelMode: travelMode,
    routingPreference: routingPreference,
    computeAlternativeRoutes: false,
    routeModifiers: {
      avoidTolls: false,
      avoidHighways: false,
      avoidFerries: false,
    },
    languageCode: "en-US",
    units: "METRIC",
  };

  // 关键：return整个fetch调用，让函数返回Promise
  return fetch("https://routes.googleapis.com/directions/v2:computeRoutes", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Goog-Api-Key": apiKey,
      "X-Goog-FieldMask": "routes.duration,routes.distanceMeters",
    },
    body: JSON.stringify(requestBody),
  })
  .then((response) => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then((data) => {
    console.log(data);
    // 把data返回，让Promise最终resolve为这个值
    return data;
  })
  .catch((error) => {
    console.error("Error:", error);
    // 抛出错误，让调用方可以捕获处理
    throw error;
  });
}

第二步：在getAPIData里正确等待异步结果

因为computeDuration现在返回的是一个Promise，所以你需要用await来获取结果，同时把getAPIData标记为async函数：

const getAPIData = async () => {
  try {
    // 用await等待Promise完成，拿到真实的API数据
    const data = await computeDuration(location, { latitude, longitude }, "DRIVE", "TRAFFIC_AWARE");
    console.log("This is api data:", data);
    // 现在你就可以正常使用data做后续处理啦
  } catch (error) {
    // 统一处理API调用中的错误
    console.error("Failed to fetch route data:", error);
  }
};

补充说明 #

• 异步操作（比如API请求）不能同步获取结果，必须通过await或者.then()来等待Promise兑现。
• 把错误处理集中在getAPIData的try/catch里，能让代码的错误逻辑更清晰，也方便你后续添加用户提示之类的操作。

备注：内容来源于stack exchange，提问作者Kai