一个接一个地执行自定义函数 - Vue.js 中的回调逻辑

Question

有一个表单将一些数据提交到我的组件中的 API。假设它的方法ProcessLogin() .在这个函数中，我使用 axios 编写了我的 API 调用。在then()的帮助下，我处理了我的服务器响应并展示了我的吐司。都很好。

现在，作为代码清理的一部分，我决定将所有 axios 函数移动到另一个 api.js 文件中，并从那里导出函数。这是我api.js文件中的示例函数：

function ApiLogin(data) {
const url   = `${BASE_URL}/authenticate`;
axios.post(url,data).then(response => {
  return response;
}).catch(error => {
  return error.response;
});
}

在我的组件的另一侧，我的方法定义如下：

methods: {
    ProcessLogin() {
    var status = ApiLogin(this.data);
    console.log(status);
 }
}

执行此操作时，我在控制台上未定义。我知道为什么会这样。因为控制台.log（状态）在 ApiLogin 可以处理并发送其响应之前执行。如何处理这种情况。？我知道回调是这里的救援，但我不确定如何集成它。

Answer 1

如果你从 ApiLogin 函数返回 axios 调用：

function ApiLogin(data) {
  const url = `${BASE_URL}/authenticate`
  return axios.post(url, data)
}

然后，您可以使用 then 和控制台日志来处理组件中的响应：

methods: {
  ProcessLogin() {
    ApiLogin(this.data)
      .then(res => console.log(res))
      .catch(err => console.log(err))
  }
}

。或使用异步/等待：

methods: {
  ProcessLogin: async function() {
    try {
      var status = await ApiLogin(this.data)
      console.log(status)
    }
    catch(err) {
      console.log(err)
    }
  }
}