Vue+Nuxt中Async服务返回Axios响应时获取undefined问题排查

你遇到的问题很典型：明明服务内部能打印出有效的Axios响应，但组件调用后拿到的却是undefined，核心原因是你的fetchById方法没有把请求结果返回给调用方。

问题根源 #

你的fetchById标记了async，但整个方法没有任何return语句——虽然你在then回调里return了response.data，但这个返回值只属于then内部的函数，并不会传递到fetchById方法的外部。async方法如果没有显式return，默认会返回一个resolve为undefined的Promise，所以组件里await之后自然拿到undefined。

两种解决方案 #

方案1：保留then/catch，添加return

把整个Axios请求链return出去，让then里的返回值成为方法的最终返回结果：

import axios from 'axios';
export default {
  async fetchById (articleId) {
    // 关键：return整个axios请求
    return await axios.post('/api/article', { id: articleId })
      .then(function (response) {
        console.log('axios', response) // valid response
        return response.data
      })
      .catch(function (e) {
        console.error('error', e);
        // 可选：抛出错误，让组件层面可以捕获处理
        throw e;
      });
  }
}

方案2：用async/await替代then/catch（更简洁）

既然已经用了async，干脆统一用try/catch来处理异步逻辑，写法更直观：

import axios from 'axios';
export default {
  async fetchById (articleId) {
    try {
      const response = await axios.post('/api/article', { id: articleId });
      console.log('axios', response);
      return response.data; // 直接return数据给调用方
    } catch (e) {
      console.error('error', e);
      throw e; // 抛出错误，方便组件处理异常
    }
  }
}

组件调用部分 #

你组件里的代码是没问题的，只要服务方法正确返回数据，await articleService.fetchById('12345')就能拿到你想要的article数据了。

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