Récupérer un JSON issu d'un appel AJAX

Version imprimable

Bonjour,

Voila mon questionnement. Je fonctionne par un système de modules et notamment le module Utilisateur, qui identifie un utilisateur de mon application.

Ma classe User :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 class User { constructor({ user='' }){ this._user = user } getProfile(){ const API_AUTH = '*******' const user = parseInt(this._user); return $.ajax({ url: API_AUTH + 'user/'+ user, dataType:'json', type:'GET' }) } setProfile(){ var req = this.getProfile().done(this.returnData); console.log(req); return req; } returnData(data){ var resultat = data; return resultat; } }
Quand je demande une instance de classe dans un autre fichier, comme ci-dessous, je me retrouve non pas avec une response JSON mais avec toute une série de prototypes dont done, then et responseJSON.

Code:

{readyState: 1, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ,*…}

Quand je fais un console.log de data.responseJSON, cela me renvoie undefined alors que le prototype est bien présent. En gros je ne peux pas descendre dans l'arborescence.

Le but ultime est qu'un développeur qui souhaite développer une application en utilisant ce module, il n'ai qu'à écrire le code ci-dessous
Code:

1 2 3 4 5 6 7 var user = new User({ user:user_id }) var data = user.setProfile(); // et pas user.setProfile().done etc...
Il est évident qu'il y a un truc que je ne fais pas bien mais je ne sais pas trop quoi....

Merci pour votre aide

Sylvain

Le problème que vous rencontrez vient du fait que vous essayez de traiter une réponse asynchrone de manière synchrone. L'appel AJAX est asynchrone par nature, et vous devez gérer la réponse de manière appropriée en utilisant des promesses ou des async/await.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
class User {
    constructor({ user = '' }) {
        this._user = user;
        this.API_AUTH = '*******'; // Assurez-vous de remplacer '*******' par l'URL réelle de votre API
    }
 
    async getProfile() {
        const user = parseInt(this._user);
        const response = await $.ajax({
            url: `${this.API_AUTH}user/${user}`,
            dataType: 'json',
            type: 'GET'
        });
        return response;
    }
 
    async setProfile() {
        try {
            const data = await this.getProfile();
            console.log(data);
            return data;
        } catch (error) {
            console.error('Error fetching profile:', error);
            throw error;
        }
    }
}
 
// Utilisation de la classe User
async function main() {
    var user = new User({ user: user_id });
 
    try {
        var data = await user.setProfile();
        console.log(data); // Traitez vos données ici
    } catch (error) {
        console.error('Failed to set profile:', error);
    }
}
 
main();

16/06/2024, 19h32
sylvain257

En fait j'étais pas loin, mais je faisais la demande en synchrone et pas en asynchrone.

Merci en tout cas.

Sylvain