依次执行自定义函数——Vue.js中的回调逻辑

Posted 2023-02-23

【中文标题】依次执行自定义函数——Vue.js中的回调逻辑

【英文标题】：Execute custom functions one after another - Callback logic in Vue.js

【发布时间】：2018-03-31 03:31:39

【问题描述】：

有一个表单可以将一些数据提交到我的组件中的 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);
 

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

【参考方案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)
    
  

【讨论】：

完美。谢谢。

没问题。很高兴这对您有所帮助。