Почему не «ждать» ждать?

Question

Я новичок в ожидании / асинхронных функций в Javascript. Я написал следующую функцию:

getGoogleResults = async () => {
    const googleResultUrl = 'http://www.google.com/search?q=bakery&num=60');

    // get only Divs within results that have class of 's'
    $.getJSON(googleResultUrl, (data) => {
      const results = $(data.contents).find('div[class="g"]');
      const divs = results.find('div[class="s"]');
      console.log(data.contents); // data logged here looks fine in console
      return data.contents; 
    });
  }

Эта функция работает нормально, я могу выйти из ответа на консоль и посмотреть данные, которые были проанализированы (60 лучших результатов Google).

Однако я не понимаю, когда я вызываю функцию, я ожидаю, что она подождет, пока обещание не будет возвращено, прежде чем продолжить. Но это не так. Когда я вызываю функцию, программа сразу же запускает следующую строку (журнал в консоли) без ожидания:

async startProcess() {
    const googleResults = await this.getGoogleResults();
    console.log(googleResults); // this gets run immediately, produces 'undefined' in console
  }

И то, что регистрируется в консоли, является «неопределенным». Итак, очевидно, что я делаю что-то не так, но я не могу найти пример, который показывает, что это может быть. Это похоже на то, что программа вызывает функцию, но сразу же начинает работать, не дожидаясь обещания.

РЕДАКТИРОВАТЬ: я знаю, что моя функция просто возвращает data.contents в этот момент, вместо проанализированных Div. Я только что протестировал и хотел увидеть результаты после вызова асинхронной функции.

Answer 1

Вы должны вернуть Promise, чтобы ваша асинхронная функция была действительно ожидаемой. Как это:

getGoogleResults = async () => {
    return new Promise((resolve, reject) => {
      const googleResultUrl = 'http://www.google.com/search?q=bakery&num=60');

      // get only Divs within results that have class of 's'
      $.getJSON(googleResultUrl, (data) => {
        const results = $(data.contents).find('div[class="g"]');
        const divs = results.find('div[class="s"]');
        console.log(data.contents); // data logged here looks fine in console
        resolve(data.contents); 
      }); //TODO call reject() on error
    }
}

Answer 2

Вам нужно вернуть объект Promise из функции getGoogleResults

getGoogleResults = () => { // You don't need the async keyword here
    return new Promise((resolve, reject) => {
        const googleResultUrl = 'http://www.google.com/search?q=bakery&num=60');
        // get only Divs within results that have class of 's'
        $.getJSON(googleResultUrl, (data) => {
          const results = $(data.contents).find('div[class="g"]');
          const divs = results.find('div[class="s"]');
          console.log(data.contents); // data logged here looks fine in console
          resolve(data.contents); // Use the function resolve.
        });

        // Use the function reject for any errors.
    }); 
}