React Native中Axios跨文件调用返回undefined问题求助

我尝试使用Axios从本地服务器获取数据，但数据获取函数放在单独文件中，调用后返回undefined。

原代码情况 #

all_products.js 代码 #

export default async function getAllProducts() {
    await axios.get('http://10.0.2.2:3006/posts')
   .then(response => {
        const items = response.data;
        return items;
    })
 .catch({});
}

主页代码 #

constructor(props) {
    super(props)
    this.state = {
        data: []
    }
}
componentDidMount() {
    getAllProducts().then((d) => this.setState({ data: d }))
}

render函数日志代码 #

render() {
    console.log("render : " + this.state.data)
    // ...其他渲染逻辑
}

日志输出 #

LOG  render :
LOG  render : undefined

问题原因及修复方案 #

问题1：数据获取函数未返回Promise结果 #

getAllProducts作为async函数，内部没有返回axios请求的最终结果。虽然用了await和.then，但整个函数没有把处理后的items返回出去，导致调用时得到undefined。同时混用await和.then写法会让逻辑冗余混乱。

问题2：catch块写法错误 #

.catch({})是无效写法，catch需要传入错误处理函数，否则无法捕获和处理请求失败的异常。

修复后的all_products.js #

import axios from 'axios'; // 确保已导入axios

export default async function getAllProducts() {
  try {
    // 用await替代.then，逻辑更清晰
    const response = await axios.get('http://10.0.2.2:3006/posts');
    return response.data; // 直接返回接口数据
  } catch (error) {
    // 捕获并打印请求错误
    console.error('获取商品数据失败:', error);
    // 返回空数组避免页面报错，可根据需求调整
    return [];
  }
}

主页代码优化（可选） #

用async/await替代.then写法，代码更易读：

constructor(props) {
  super(props);
  this.state = {
    data: []
  };
}

async componentDidMount() {
  const data = await getAllProducts();
  this.setState({ data });
}

或者保留.then并添加错误处理：

componentDidMount() {
  getAllProducts()
    .then(d => this.setState({ data: d }))
    .catch(err => console.error('加载数据出错:', err));
}

修复后日志说明 #

修复后，render函数会先打印初始的空数组（LOG render : ），当数据获取成功后，组件重新渲染，会打印获取到的数组内容。

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