如何从Promise返回数据？为何getPageData函数返回void？

问题根源 #

你的getPageData函数是无返回值的void类型，核心原因是：它内部调用getApiData()并链式调用.then()，但没有把整个Promise链返回出去，函数执行完默认返回undefined。

修正方案 #

方案1：直接返回Promise链 #

把getApiData()的调用结果返回，让函数成为一个Promise类型的函数：

export default function getPageData() {
    return getApiData('shared-content', 'en-us')
        .then((response) => {
            // 注意：axios.get返回的是包含data字段的响应对象，需按需返回实际数据
            return response.data;
        })
        .catch((error: any) => {
            console.error('获取数据失败:', error);
            // 可选择抛出错误让调用方处理，或返回默认值
            throw error;
        })
}

方案2：改用async/await写法（更易读） #

利用async函数自动返回Promise的特性，简化异步逻辑：

export default async function getPageData() {
    try {
        const response = await getApiData('shared-content', 'en-us');
        return response.data;
    } catch (error: any) {
        console.error('获取数据失败:', error);
        throw error;
    }
}

额外优化点 #

• getApiData中的return await可以简化为return，因为axiosClient.get()本身就是Promise，async函数会自动包装返回值为Promise：

  async function getApiData(pathName: string, locale: string) {
      const {axiosRequestUrl} = getApiVars(pathName, locale);
  
      const axiosClient = axios.create({
          baseURL: process.env.CONTENT_DOMAIN,
          proxy: false
      })
  
      return axiosClient.get(axiosRequestUrl);
  }
  

• 组件中使用时，需通过async/await或.then()处理异步返回的数据：

  // 组件内使用示例
  async function loadPageData() {
      try {
          const data = await getPageData();
          // 处理数据逻辑
      } catch (error) {
          // 错误兜底处理
      }
  }
  

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