jQuery : comment renvoyer la réponse d'un appel asynchrone?

Version imprimable

Bonjour,

Je débute avec jQuery, je veux récupérer et afficher le résultat d'une fonction ajax personnalisée qui retourne un tableau. Mais ma console me renvoie undefined.

J'ai besoin de récupérer le résultat en dehors de ma fonction query_suggest() pour le traiter dans une boucle imbriquée.

Comment y parvenir ?

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function query_suggest(query, lang){
    var result;
 
    $.ajax({
        url: 'http://suggestqueries.google.com/complete/search',
        data: {
            "hl": lang,
            "ds": "",
            "q": query,
            "client": "firefox"
        },
        jsonpCallback: 'msgsJsonCallback', 
        type: 'GET',
        headers: {
            "Accept-Language": lang,
            "Accept": "application/json",
            "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0"
        },
        dataType: 'jsonp',
        success: function(data) {       
            result = data;
            return result;
 
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        },
        cache: true
    }); 
}
 
var res_parent = query_suggest("chuck norris", "en");
 
if (res_parent.length > 0) {
 
var links = [];
 
	for (i = 0, l = res_parent.length; i < l; i++) {
 
		links.push({ 
			source : "chuck norris", 
			target : res_parent 
		});
 
		var child = query_suggest(res_parent[i], "en");
 
		for (i = 0, l = res_child.length; i < l; i++) {
 
			links.push({ 
				source : res_parent, 
				target : res_child
			});		
		}
	}
}

30/07/2018, 00h55
psychadelic

=> http://suggestqueries.google.com/complete/search
renvoie une erreur 400
https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP

donc ton appel Ajax ne revient pas sur le label success, mais sur le label error

sauf que bien sur si tu fais un appel jors de ton serveur et qui nécessite un appel core, et dont je suis pas certain que Google soit copain pour ce coup la
30/07/2018, 12h03
la_chouette

Étonnant, aucune erreur si j'affiche le résultat dans ma console à l'intérieur de ma function.

J'ai lu la doc, je crois avoir compris qu'il faut utiliser une promise...

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
43
44
45
46
47
48
function query_suggest(query, lang){
 
  return new Promise(function(resolve, reject){
 
    $.ajax({
      url: 'http://suggestqueries.google.com/complete/search',
      type: 'GET',
      dataType: 'jsonp',            
      data: {
          "hl": lang,
          "ds": "",
          "q": query,
          "client": "firefox"
      },
      cache: true,
      jsonpCallback: 'msgsJsonCallback', 
      headers: {
          "Accept-Language": lang,
          "Accept": "application/json",
          "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0"
      },
 
      success: function(data) {       
          resolve(data);
 
      },
      error: function(jqXHR, textStatus, errorThrown) {
          console.log(jqXHR);
          console.log(textStatus);
          console.log(errorThrown);
          reject('erreur');
      }
    });  ///ajax
  }); ///Promise
}
 
var res_parent = '';
 
function appel_Prommesse_Ajax() {
  query_suggest("chuck norris", "en")
      .then(function (reponse) {
        res_parent = reponse;
      })
      .catch(function (error) {
        res_parent = '';
          console.log(error);
      });
};

Bonjour,

Citation:

Envoyé par la_chouette

Mais ma console me renvoie undefined.

il ne faut pas oublier qu'Ajax est asynchrone, par défaut, donc le résultat n'est pas disponible immédiatement.

Citation:

Envoyé par la_chouette

je crois avoir compris qu'il faut utiliser une promise...

Comme tu utilises un dataType: 'jsonp' il te faut traiter le résultat dans la fonction callback que tu as déclaré sur cette ligne jsonpCallback: fctCallBack,.

Ton code pourrait se résumer à
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 // c'est ici qu'il faut faire le boulot par exemple function msgsJsonCallback(data) { var oList = $("#liste"); $.each(data[1], function (key, value) { oList.append("<li>" + value); }); } function query_suggest(query, lang) { var result; $.ajax({ url: 'http://suggestqueries.google.com/complete/search', data: { "hl": lang, "ds": "", "q": query, "client": "firefox" }, jsonpCallback: "msgsJsonCallback", type: 'GET', dataType: 'jsonp', error: function (jqXHR, textStatus, errorThrown) { console.log("error : ", textStatus, jqXHR); }, cache: true }); } // appel fonction query_suggest("chuck norris", "en", "callBackMain");
Ce qui me trouble le plus est que visiblement tu souhaites « boucler » sur les sous rubriques en relançant les requêtes pour chaque item reçu, dans quel but !