一个接一个地执行自定义函数 - 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); 
} 
} 

当执行这一点，我得到未定义我安慰。我知道它为什么会发生。因为consoleLog（状态）在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)) 
    } 
} 

...或用异步/等待：

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