1
votes

Javascript dans VueJs: comment retourner un objet de données à partir de la récupération asynchrone au lieu de Promise

J'ai cette action en magasin

async post(endpoint, params) {
    await fetch(this.url + endpoint, {
        'method': 'POST',
        headers: this.headers,
        body: JSON.stringify(params),
    })
        .then(response => {
            return response.json();
        })
        .then( (data) => {
            this.returnData =  data.data;
        })
        .catch(error => {
            console.log(error);
        });
    return this.returnData;
}

et cette fonction dans une autre classe importée pour stocker

actions: {
    testLogin(context, credentials) {
        const loginService = new FetchClient();
        let d = loginService.post('login', credentials);
        console.log(d);
    },

Et j'obtiens PromiseÂ {<pending>} que je peux extraire des données de l'intérieur de la classe de récupération, mais je ne peux pas accéder aux données si je suis dans le magasin parce que c'est une promesse pas un objet. Comment puis-je résoudre ça?

javascript vuejs2 fetch promise

2 commentaires

Comme les méthodes async renvoient des promesses, vous devez travailler avec cela.

En termes simples, un résultat asynchrone ne peut pas être rendu synchrone sans un voyage psychique ou dans le temps - javascript ne contient ni l'un ni l'autre

3 Réponses :

1
votes

Placez l'instruction return dans le second bloc then :

post(endpoint, params)
    .then(data => {// do something with data})
    .catch(error => {
        error.message; // 'An error has occurred: 404'
    });

Je vous recommande même d'utiliser le code suivant pour une meilleure lisibilité:

async post(endpoint, params) {
    const response = await fetch(this.url + endpoint, {
        'method': 'POST',
        headers: this.headers,
        body: JSON.stringify(params),
    })

    if (!response.ok) {
        const message = `An error has occured: ${response.status}`;
        throw new Error(message);
    }
    
    const resp_data = await response.json()

    return resp_data.data
}

Puis appelez votre méthode comme ceci:

async post(endpoint, params) {
    await fetch(this.url + endpoint, {
        'method': 'POST',
        headers: this.headers,
        body: JSON.stringify(params),
    })
        .then(response => {
            return response.json();
        })
        .then( (data) => {
            this.returnData =  data.data;
            return this.returnData;
        })
        .catch(error => {
            console.log(error);
        });
}

reportez-vous à ce guide async / await

1 commentaires

Je peux recommander de toujours ajouter un bloc try / catch afin de mieux gérer les erreurs.

0
votes

Peux-tu essayer:

async testLogin(context, credentials) {
    const loginService = new FetchClient();
    let d = await loginService.post('login', credentials);
    console.log(d);
}

1 commentaires

Il enregistre les données mais dans le fichier js, je l'utilise, je le trouve retourné comme promesse et non comme données

0
votes

As @Ayudh mentioned, try the following code:

    async post(endpoint, params) {
    try{
        let response = await fetch(this.url + endpoint, {
            'method': 'POST',
            headers: this.headers,
            body: JSON.stringify(params),
        });
        let data = await response.json();
        this.returnData =  data.data;
    }catch(e){
        console.log(e);
    }
    
    return this.returnData;
}

0 commentaires