Как написать асинхронную функцию?

Question

[xxvxx]

Я читал документацию, но не как не могу вникнуть в эту тему,
помогите пожалуйста на этом примере мне это очень поможет,
тут мы получаем страницу с локального сайта

async function getElem(url, selector) {
  let xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://test/page/' + url, true);
  xhr.send();
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        let html = document.createElement('div');
        html.innerHTML = xhr.responseText;
        console.log(html.querySelector(selector) + ' go1');
        return html.querySelector(selector);
      }
    }
  }
}
async function log(d) {
  return console.log(d + ' go2')
}
async function go(num) {
  let i = await getElem(num + '.html', '.section')
  log(i)
}

go(1)

только там где * undefined go2 * там тоже должен быть объект и он должен быть вторым

Answer 1

[zkrvndm]

Все отличие асинхронной функции от обычной в том, что асинхронная всегда возвращает промис.

Используй промисы!

function getElem(url, selector) {

  return new Promise(function(success, error) {

    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://waypoints/page/' + url, true);
    xhr.responseType = 'document';
    
    xhr.onreadystatechange = function () {

      if (xhr.readyState === 4) {

        if (xhr.status === 200) {

          console.log('Скачан документ:', xhr.response);

          success(xhr.response.querySelector(selector));

        }

        else {

          error('Ошибка при выполнении запроса');

        }

      }

    }

    xhr.send();

  });

}

Comments

[xxvxx]

асинхронные функции по умолчанию возвращают промис

[zkrvndm]

xxvxx, да, но xhr не умеет в промисы, результат там можно получить только через колбек, поэтому функция объявления через приставку async тебе тут не поможет, поэтому я в примере вернул промис своими силами.

[xxvxx]

zkrvndm,
я обернул в промис, вторая часть кода не срабатывает

async function log(d) {
  return console.log(d + ' go2')
}
async function go(num) {
  let i = await getElem(num + '.html', '.section')
  log(i)
}

[zkrvndm]

Я проверял функцию перед тем, как тебе отдать, у меня все работает:

Ты просто делаешь что-то не так.

[xxvxx]

zkrvndm, а что не так? я не понимаю почему не работает второй вывод в консоль

async function getElem(url, selector) {
  return new Promise(function (success, error) {
    let xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://waypoints/page/' + url, true);
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          let html = document.createElement('div');
          html.innerHTML = xhr.responseText;
          console.log(html.querySelector(selector) + ' go1');
          return html.querySelector(selector);
        }
      }
    }
  })
}
async function log(d) {
  return console.log(d + ' go2')
}
async function go(num) {
  let i = await getElem(num + '.html', '.section')
  log(i)
}

go(1)

[xxvxx]

zkrvndm,

async function go(num) {
  let i = await getElem(num + '.html', '.section')
  log(i)
}

если тут убрать await то тогда все работает но не в правильном порядке сначала проявляется go 2 и только потом go 1

[xxvxx]

zkrvndm, мне нужно чтоб сначала отработалась getElem() а потом log()

[zkrvndm]

xxvxx, у тебя здесь ошибка, не надо пытаться вывести объект как строку, выводи объект как объект:

async function log(d) {
  return console.log(d, 'go2')
}

[xxvxx]

zkrvndm,
данная функция у меня не работает=(

async function go(num) {
  let i = await getElem(num + '.html', '.section')
  console.log(i)
}

[zkrvndm]

xxvxx, я не знаю что там у тебя происходит, если оплатишь небольшую консультацию, подключусь и посмотрю, там видно будет что именно ты не так делаешь.

[xxvxx]

zkrvndm, я бы с радостью но не имею такой возможности=(( но в вашем примере вы просто запускаете функцию, а смысл именно в том чтоб запустить эту функцию в теле другой функции получить из нее ответ и обработать в строгом порядке

[zkrvndm]

xxvxx, ну так вы 2 await забыли, либо уберите async из логирующей функции.

[VoidVolker]

xxvxx во-первых документацию по промисам читать надо сначала - там есть полностью работающие примеры. Во-вторых прежде, чем жаловаться, что не работает код в ответе следует именно его выполнить как есть, а не свой собственный с минимальными изменениями и кучей ошибок и говорить якобы не работает. Дык потому и не работает, что не читаете мануалы и копипастите кусками код не думая и от того куча ошибок в коде. Код товарища zkrvndm полностью рабочий.

[xxvxx]

xxvxx, спасибо, проблема была в том что у меня стояло return а надо было success