Exécuter les fonctions personnalisées les unes après les autres - Logique de rappel dans Vue.js

Question

Il existe un formulaire qui soumet des données à une API dans mon composant. Supposons que sa méthode est ProcessLogin(). Dans cette fonction, j'ai écrit mes appels d'API en utilisant axios. Avec l'aide de then() j'ai manipulé ma réponse de serveur et ai montré mon pain grillé. Tout bon.

Maintenant, dans le cadre de mon nettoyage de code, j'ai décidé de déplacer toutes mes fonctions axios vers un autre fichier api.js et d'exporter des fonctions à partir de là. Voici un exemple de fonction que j'ai dans mon dossier api.js:

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

De l'autre côté dans mon élément, j'ai ma méthode définie comme ci-dessous:

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

Lors de l'exécution, je reçois undefined mon console. Je sais pourquoi ça se passe. Parce que console.log (status) s'exécute avant que ApiLogin puisse traiter et envoie sa réponse. Comment gérer ce genre de situation.? Je sais que le rappel est le sauvetage ici, mais je ne suis pas vraiment sûr de la façon de l'intégrer.

Answer 1

Si vous retournez les Axios appel de votre ApiLogin fonction:

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

Vous pouvez ensuite gérer la réponse dans votre composant à l'aide puis et le journal de la console à partir de là:

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

... ou avec async/ attendent:

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