React Native异步函数的正确使用、导出及数据请求优化咨询

首先给你吃个定心丸：你当前的Api._getData()实现是完全正确的，已经是异步执行的了，不会阻塞UI线程导致页面切换变慢。

为什么你的实现是有效的？ #

• async关键字会让函数自动返回一个Promise，而await axios.get(...)只是Promise链式调用的语法糖，本质上和直接返回axios.get(...)效果一致（因为axios的get方法本身就返回Promise）。所以这个函数确实是异步的，请求会在后台执行，不会卡住页面渲染。

关于loadData()的写法：可选优化，但非必须 #

你现在用.then()/.catch()的写法完全没问题，但如果想让代码逻辑更直观，也可以把loadData()改成async函数风格，两种写法效果完全一致：

// 改写后的loadData
async loadData() {
  try {
    const response = await Api._getData();
    this.setState({ myData: response.data });
  } catch (error) {
    console.log(error.response);
  }
}

为什么页面切换还是慢？可能的优化点 #

你提到服务器响应慢时页面切换变慢，其实异步请求本身不会阻塞UI，大概率是请求未妥善管理导致的问题，比如：

• 快速切换页面时，之前页面的请求还在进行，完成后会尝试给已卸载的组件setState，引发内存泄漏或不必要的资源占用
• 没有添加加载状态，用户感知不到数据正在获取，误以为页面卡顿

给你两个实用优化建议：

1. 添加请求取消机制：用axios的CancelToken在组件卸载时取消未完成的请求，避免无效操作：

// 在SomeScreen组件中初始化CancelToken
componentDidMount() {
  this.source = axios.CancelToken.source();
  this.loadData(this.source.token);
}

componentWillUnmount() {
  // 组件卸载时取消请求
  this.source.cancel('组件已卸载，取消请求');
}

// 修改Api._getData，支持传入cancelToken
const _getData = async (cancelToken) => { 
  return await axios.get("http://blabla.com/someservice", { 
    params: someParamDataHere,
    cancelToken: cancelToken
  }); 
};

// 修改loadData
async loadData(cancelToken) {
  try {
    const response = await Api._getData(cancelToken);
    this.setState({ myData: response.data });
  } catch (error) {
    if (axios.isCancel(error)) {
      console.log('请求已取消：', error.message);
    } else {
      console.log(error.response);
    }
  }
}

2. 添加加载状态：在state里加一个isLoading字段，请求发起时设为true，完成或失败时设为false，给用户明确的加载反馈，避免误以为页面卡顿：

// 初始化state
state = {
  myData: [],
  isLoading: false
};

async loadData(cancelToken) {
  this.setState({ isLoading: true });
  try {
    const response = await Api._getData(cancelToken);
    this.setState({ myData: response.data, isLoading: false });
  } catch (error) {
    // ...错误处理
    this.setState({ isLoading: false });
  }
}

总结一下：你当前的异步请求写法是正确的，不需要修改核心逻辑；页面切换慢的问题更多是请求管理和用户体验优化的问题，上面的两个方案可以帮你解决。

内容的提问来源于stack exchange，提问作者she hates me