React中如何将fetch请求拆分到独立文件？调用返回undefined如何解决

开发者阿泽

2026-10-5

问题根因

你的getData函数没有返回fetch调用产生的Promise对象，函数无显式return时默认返回undefined
fetch是异步API，就算正确返回了Promise，直接同步打印函数返回值也只能拿到Promise实例，无法直接获取异步请求的结果

修复步骤

1. 修正service.js代码

给fetch调用加上return，将Promise对外暴露：

export const getData = () => {
    return fetch('url', {
        method: 'GET',
    })
    .then(data => {
        return data.json()
    })
}
// 也可以简写为箭头函数隐式return的写法：
// export const getData = () => fetch('url', {method: 'GET'}).then(data => data.json())

2. 修正组件内的调用方式

异步请求的结果需要通过.then回调或者async/await语法获取，类组件推荐在componentDidMount生命周期中发起请求：

方式1：使用.then回调

import { getData } from '../Service'

class ExampleComponent extends React.Component {
    componentDidMount() {
        getData()
        .then(res => {
            // 此处可拿到请求返回的正确结果
            console.log(res)
            // 可将结果存入state用于页面渲染
            this.setState({ listData: res })
        })
        .catch(err => {
            // 捕获请求异常做兜底处理
            console.error('请求出错：', err)
        })
    }
}

方式2：使用async/await语法（更简洁）

import { getData } from '../Service'

class ExampleComponent extends React.Component {
    async componentDidMount() {
        try {
            const res = await getData()
            console.log(res)
            this.setState({ listData: res })
        } catch (err) {
            console.error('请求出错：', err)
        }
    }
}

注意事项