Блог

Я пытаюсь выполнить CORS запрос, затем использую async / await для извлечения из него значения (кстати, я использую jquery).

Я полагаю, что функции createCORSRequest и executeCORSRequest работают нормально, поэтому реализация на самом деле не имеет значения. Функция getDailyGames использует await для получения обещания, созданного из executeCORSRequest , а затем возвращает это обещание.

Моя проблема заключается в фактическом использовании promise в $(document) .ready функции (это, по сути, основная функция в jquery).

В закомментированной строке метод ‘.then’ используется для результата getDailyGames , чтобы распечатать результат функции (это работает нормально).

Однако я хочу сохранить значение этого обещания в переменной ‘result’ и что-то с ним сделать, но я не могу извлечь это из обещания.

Как мне правильно вернуть это обещание, чтобы я мог сохранить разрешенное значение в переменной и что-то с ним делать?

Или другой способ задать этот вопрос: почему переменная ‘result’ в getDailyGames получает обещание? Не следует ли использовать await с обещанием, чтобы получить разрешенное значение напрямую?

 $(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- 
  regularamp;date='   date;
  let result = await executeCORSRequest(url);
  return resu<    
}

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;
}
  

Вам следует изменить свою функцию document.ready на:

 $(document).ready(function() {

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

  });
});
  

Await работает только тогда, когда сама функция является асинхронной. Вы также могли бы сделать это

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

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

});
  

Async / await — это всего лишь синтаксический сахар, направленный на устранение ада обратного вызова. Следует хорошо помнить, что где-то в конце асинхронной цепочки вам придется иметь дело с обещанием. Именно по этой причине вы можете использовать await только внутреннюю async функцию, и, к сожалению, корень скрипта не является async функцией.

В вашем случае, если вы хотите сериализовать вызов getDailyGames , создайте в document.ready асинхронную функцию, как указано @varun.