J'essaie d'exécuter une requête CORS, puis d'utiliser async/await pour en tirer de la valeur (j'utilise jquery btw).

Les fonctions createCORSRequest et executeCORSRequest fonctionnent toutes les deux correctement, je pense, donc l'implémentation n'a pas vraiment d'importance. La fonction getDailyGames utilise wait pour recevoir une promesse créée à partir de executeCORSRequest, puis renvoie cette promesse.

Mon problème est d'utiliser la promesse dans la fonction $(document).ready (il s'agit essentiellement de la fonction principale de jquery).

Dans la ligne commentée, la méthode '.then' est utilisée sur le résultat de getDailyGames pour imprimer le résultat de la fonction (cela fonctionne bien).

Cependant, je veux stocker la valeur de cette promesse dans la variable "résultat" et y faire des choses, mais je ne peux pas la retirer de la promesse.

Comment pourrais-je renvoyer correctement cette promesse afin que je puisse stocker la valeur résolue dans une variable et faire des choses avec ?

Ou une autre façon de demander ceci : pourquoi la variable « résultat » dans getDailyGames obtient-elle une promesse ? L'utilisation de wait avec une promesse ne devrait-elle pas vous donner directement la valeur résolue ?

$(document).ready(function() {    
  //getDailyGames(20190313).then(result => console.log(result));
  let result = getDailyGames(20190313);
  //DO STUFF WITH RESULT    
});

async function getDailyGames(date){    
  const url = 'https://api.jjjacobson.com/dailygames?season=2018-2019- 
  regular&date=' + date;
  let result = await executeCORSRequest(url);
  return result;    
}

function executeCORSRequest(url){
  return new Promise(function(resolve, reject) {
    const xhr = createCORSRequest('GET', url);
      if (!xhr) {
        throw new Error('CORS not supported');
      }
      xhr.onload = function() {
        resolve(xhr.responseText);
      };  

      xhr.onerror = function() {
        console.log('There was an error!');
        reject('ERROR');
      };    
      xhr.send();
    });
}

function createCORSRequest(method, url) {
  let xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {    
    // Check if the XMLHttpRequest object has a "withCredentials" property.
    // "withCredentials" only exists on XMLHTTPRequest2 objects.
    xhr.open(method, url, true);    
  } 
  else if (typeof XDomainRequest != "undefined") {    
    // Otherwise, check if XDomainRequest.
    // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
    xhr = new XDomainRequest();
    xhr.open(method, url);    
  } 
  else {    
    // Otherwise, CORS is not supported by the browser.
    xhr = null;    
  }
  return xhr;
}
1
16jacobj 14 mars 2019 à 08:07

2 réponses

Meilleure réponse

Vous devez modifier votre fonction document.ready en :

$(document).ready(function() {

  let result;
  getDailyGames(20190313).then(res => {
    result = res;
    //DO STUFF WITH RESULT

  });
});

Await ne fonctionne que lorsque la fonction elle-même est asynchrone. Tu peux aussi faire ça

$(document).ready(async function() {

  let result = await getDailyGames(20190313);
  //DO STUFF WITH RESULT

});
4
varun agarwal 14 mars 2019 à 06:21

Async/wait n'est que du sucre syntaxique visant à éliminer l'enfer du rappel. Il ne faut pas oublier que quelque part en aval de la chaîne asynchrone, vous devrez faire face à une promesse. C'est la raison pour laquelle vous ne pouvez utiliser await que dans la fonction async et, malheureusement, la racine du script n'est pas une fonction async.

Dans votre cas, si vous souhaitez sérialiser l'appel à getDailyGames, faites de document.ready une fonction asynchrone comme indiqué par @varun.

0
Charlie 14 mars 2019 à 06:41