Но знаете ли вы, что document.createElement ('img') будет синхронизирован? - PullRequest
Новая
       7

Но знаете ли вы, что document.createElement ('img') будет синхронизирован?

0 голосов
/ 27 сентября 2018

Я пытаюсь понять async / await и застрял с проблемой в примере.

Я знаю, что если у меня есть 2 функции, такие как: 

f1(//console.log(1) after 5 sec)
f2(//console.log(2) after 1 sec)

результат будет: 

2
1

Хорошо, теперь у нас есть официальный пример асинхронной функции 

async function showAvatar() {
      // read our JSON
      let response = await fetch('/article/promise-chaining/user.json');
      let user = await response.json();

      // show the avatar
      let img = document.createElement('img'); //but why they sure it will completed sync and not async and document.body.append will not append not yet existing img?
      document.body.append(img);
    }

    showAvatar();

Но document.createElement ('img') тоже функция, как f1, она может отставать, но по какой-то причине мыне используете ждать на нем?Почему это?

1 Ответ

0 голосов
/ 27 сентября 2018

Но document.createElement ('img') - это тоже функция, что и f1, она может отставать, но по какой-то причине мы не используем await на нем?Почему это так?

Это потому, что await является зарезервированным ключевым словом, которое используется только в async function.Не снаружи.Стимулом оператора await является ожидание обещания.Поэтому, когда вы выполняете 

await foo();

, тогда он работает, только если foo() возвращает объект Promise.

Следующее утверждение 

document.createElement('img');

невернуть объект Promise, но HTMLImageElement.Это не объект Promise, поэтому вы не можете ждать его, используя await.Существует событие onload, которое можно использовать для выполнения действия, которое действует после загрузки изображения в: 

const img = document.createElement('img');
img.onload = _ => console.log('after load');
img.src = 'url';

при обработке последнего оператора браузер извлекает информацию из указанного URL-адреса.,Когда это будет сделано с загрузкой информации, он вызовет .onload, чтобы указать, что это сделано с загрузкой в ​​данные изображения.

РЕДАКТИРОВАТЬ:

Можно запустить 

async function loadImage() {
  const img = await document.createElement('img');
  ...
}

без ошибок, поскольку await преобразует результат в разрешенное Обещание, если оно не является Promise объектом.Следующая цитата взята из MDN:

Если значение выражения, следующего за оператором await, не является Обещанием, оно преобразуется в разрешенное Обещание. source

Итак, возвращенный HTMLImageElement преобразуется в Promise объект с помощью вызова Promise.resolve(...).Затем await затем обрабатывает объект обещания, как указано.

...