React Native：如何在Refresh Control中等待Promise执行完毕再结束刷新

我在使用Refresh Control结合Promise时遇到了问题，相关代码如下：

组件代码：

const Component = () => {
 const [refreshing, setRefreshing] = useState(false);

 const onRefresh = useCallback(() => {
    setRefreshing(true);
    getData();
    setRefreshing(false);
  }, []);
  
  return (
   <ScrollView
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }>...</ScrollView>
  );
}

其中getData()是返回Promise的函数：

const getData = () => {
 axios.get(`https://somedomain.com/fetch/user/1`).then(res => {
  // 处理返回数据
 }
}

当前问题：代码不会等待getData()执行完成就将refreshing设为false，导致刷新状态提前结束。请问如何实现等待getData()执行完毕后再结束刷新状态？

要解决这个问题，核心是利用Promise的异步特性，等待getData()执行完成后再更新刷新状态，以下是两种常用实现方式：

方式一：使用Promise链式调用 #

修改onRefresh方法，在getData()的Promise回调中关闭刷新状态，同时修复getData()的返回值问题：

// 修复getData：确保返回axios请求的Promise
const getData = () => {
  return axios.get(`https://somedomain.com/fetch/user/1`).then(res => {
    // 处理返回数据
  });
}

// 修改onRefresh：等待getData执行完成后结束刷新
const onRefresh = useCallback(() => {
  setRefreshing(true);
  getData()
    .finally(() => {
      // 无论请求成功/失败，都关闭刷新状态
      setRefreshing(false);
    });
}, []);

方式二：使用async/await语法 #

如果偏好更直观的同步写法，可以用async/await实现：

// 同样需要确保getData返回Promise
const getData = () => {
  return axios.get(`https://somedomain.com/fetch/user/1`).then(res => {
    // 处理返回数据
  });
}

// 用async/await改写onRefresh
const onRefresh = useCallback(async () => {
  setRefreshing(true);
  try {
    await getData();
  } catch (err) {
    // 可选：处理请求失败的异常
    console.error('数据获取失败:', err);
  } finally {
    setRefreshing(false);
  }
}, []);

关键注意点 #

• 必须让getData()返回Promise：原代码中axios.get()的Promise没有被返回，导致无法监听执行状态，所以要补充return语句
• 使用finally()可以保证无论请求成功还是失败，刷新状态都会被关闭，避免出现无限刷新的异常情况

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