Vue项目跨文件异步函数失效：controller-view架构返回undefined

你的问题出在authenticate函数没有正确返回Promise，导致组件调用时无法等待API请求完成，且拿到undefined结果。

具体问题点 #

• 虽然authenticate标记为async函数，但内部没有返回axios.post生成的Promise。async函数如果没有显式返回值，会默认返回一个状态为resolved、值为undefined的Promise，所以组件里的.then()会立即执行，拿到undefined，这就是为什么组件的日志先输出且值为undefined。
• 你在axios.post的.then()和.catch()里返回的对象，并没有传递到外层的authenticate函数的返回值中。

修复方案 #

可以用两种方式修复：

方案一：直接返回axios的Promise链

修改userController中的authenticate函数，返回axios.post的调用结果：

function authenticate(email, password, remember) {
  return axios.post(APIURL + '/v1/login', { email, password }, {
    headers: { 'X-Access-Key': APIAccessKey, 'X-Key-Secret': APIKeySecret }
  }).then((response) => {
    console.log(response)
    return {} // 这里返回你要传递给组件的数据
  }).catch((error) => {
    console.log(error)
    return {} // 这里返回错误时要传递给组件的数据
  })
}

export { authenticate }

注：这里可以去掉async关键字，因为直接返回Promise已经足够；如果保留async也可以，但没必要。

方案二：用await替代then/catch（更符合async函数的写法）

async function authenticate(email, password, remember) {
  try {
    const response = await axios.post(APIURL + '/v1/login', { email, password }, {
      headers: { 'X-Access-Key': APIAccessKey, 'X-Key-Secret': APIKeySecret }
    })
    console.log(response)
    return {} // 返回给组件的数据
  } catch (error) {
    console.log(error)
    return {} // 错误时返回给组件的数据
  }
}

export { authenticate }

两种方案都能让authenticate返回一个正确的Promise，组件调用时会等待API请求完成，然后拿到你在then/catch或try/catch里返回的对象，日志顺序也会变成先输出controller里的日志，再输出组件里的日志。

内容的提问来源于stack exchange，提问作者Jacky.S