React Native async/await调用fetch返回Promise无法渲染问题

所有标记了async关键字的函数，返回值永远是Promise对象，不会直接返回内部return的实际结果。你当前的写法是在组件的同步渲染流程里直接调用异步方法，没有等待Promise决议就继续执行后续代码，才会出现日志顺序不符合预期、拿到的result是Promise对象的问题。
另外React函数组件的渲染是同步执行的，不可能在渲染阶段“暂停”等待异步请求返回，必须通过状态管理的方式，等异步请求完成后更新状态，触发组件重新渲染，才能把结果展示到页面上。

不需要修改你写的GeocodingUtils工具类代码，只需要调整组件里的调用逻辑，配合React内置的状态Hook和副作用Hook实现即可，完整修正代码如下：

import { useState, useEffect } from 'react';
import { Text, ActivityIndicator, View } from 'react-native';

function HomeScreen({ navigation, route }) {
  // 分别定义地址结果、加载状态、错误信息三个状态
  const [address, setAddress] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [requestError, setRequestError] = useState(null);

  useEffect(() => {
    // useEffect的回调不能直接标记为async，需要在内部单独定义异步函数
    const loadAddressData = async () => {
      try {
        setIsLoading(true);
        console.log("Try to decode");
        // 必须加await等待异步方法执行完成，才能拿到实际返回的地址字符串
        const result = await GeocodingUtils.getAdressFromCoordinates(myLocation);
        console.log("Get Address OK");
        setAddress(result);
      } catch (err) {
        setRequestError(err);
        console.log('地址获取失败:', err);
      } finally {
        setIsLoading(false);
      }
    };

    // 经纬度信息有效时才触发请求
    if (myLocation) {
      loadAddressData();
    }
  }, [myLocation]); // 把myLocation加入依赖数组，经纬度变化时自动重新获取地址

  // 加载过程中展示加载提示
  if (isLoading) {
    return (
      <View>
        <ActivityIndicator size="large" />
        <Text>正在获取地址信息...</Text>
      </View>
    );
  }

  // 请求出错时展示错误提示
  if (requestError) {
    return <Text>地址获取失败，请检查网络后重试</Text>;
  }

  // 正常渲染返回的地址结果
  return <Text>{address}</Text>;
}

• 不要尝试在组件渲染的顶层代码里直接写await调用异步方法，React组件渲染是同步流程，顶层不支持await语法，异步逻辑必须放到useEffect、事件回调这类非渲染同步流程的位置执行。
• 异步请求不可能阻塞组件的首次渲染，首次渲染时请求还在执行中，必须给用户展示加载态，等请求完成后通过setState更新数据，组件自动重渲染展示结果，这是React里处理异步数据的标准写法。
• 你之前预期的“暂停后续代码流”效果，只能在async函数内部通过await实现，无法在组件的同步渲染流程里实现阻塞。

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