跨文件 Javascript 异步函数

Question

我想在我的 Vue 项目中使用控制器视图结构，并将前端显示和前端逻辑分离到两个文件中。在组件中，我会对控制器方法进行功能调用，在控制器方法中，它将与后端 API 交互，但似乎异步功能不起作用。

这是我的 Vue 组件中的代码：

import { authenticate } from '../controllers/userController'

function login() {
  if (email.value && password.value) {
    authenticate(email.value, password.value, remember.value).then((response) => {
      console.log(response)
    })
  } else {
    // Input Validation Failed
  }
}

这里是

authenticate()

的实现

async function authenticate(email, password, remember) {
  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
}

这是我在控制台中看到的：

如图所示，Vue组件中的response console log返回undefined，在controller中的response之前打印出来。它应该等到 API 调用中的响应完成。所以我想知道我做错了什么，感谢任何帮助。

请忽略401错误，这个错误是有意引入的，重点是

console.log(response)

不应该是undefined，应该等待API调用的响应，并打印出API结果

Answer 1

你需要回报你对

authenticate

的承诺：

// No need to mark `async` since `await` isn't used
function authenticate(email, password, remember) {
  // add `return`
  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 {}
  })
}

否则，

authenticate(...).then

与

相同

authenticate();
Promise.resolve(undefined).then();