Question

有一个表单可以将某些数据提交给我的组件中的API。假设它的方法是$SHELL。在这个函数中，我使用axios编写了我的API调用。在ProcessLogin()的帮助下，我已经处理了我的服务器响应并显示了我的祝酒词。一切都好。

现在作为我的代码清理的一部分，我决定将我的所有axios函数移动到另一个then()文件并从那里导出函数。这是我在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;
});
}

执行此操作时，我的控制台上未定义。我知道为什么会这样。因为console.log（status）在ApiLogin处理并发送它的响应之前执行。如何处理这种情况。我知道回调是拯救，但我不确定如何整合它。

Answer 1

如果您从 ApiLogin 功能中返回 axios 来电：

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

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

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

...或 async / await ：

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

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

1 个答案: