Асинхронная функция и обещание занимают слишком много времени, чтобы решить - PullRequest
Новая
       5

Асинхронная функция и обещание занимают слишком много времени, чтобы решить

0 голосов
/ 23 мая 2019

У меня есть функция ( loadImageProfilePersonnel ), которая создает и загружает элемент изображения, прикрепленный к DOM, функция возвращает обещание.У меня также есть другая функция асинхронной функции ( RenderHtmlPersonnel_Async ), которая вызывает обещание.Однако весь процесс занимает слишком много времени (2 секунды) для отображения элемента изображения на экране.Буду признателен, если кто-нибудь подскажет, что нужно улучшить в приведенном ниже коде. 

function loadImageProfilePersonnel(profile)
{
  return new Promise(function (resolve, reject)
  {

    const campus = profile.ProfileId;
    //const imageProfile = new Image();
    const imageProfile = document.createElement('img');
    if (profile.Picture !== '')
    {
        //imageProfile.src = '/Fundamental/ImageProfil/' + campus;
        imageProfile.setAttribute('src', `/Fundamental/ImageProfil/${campus}`);

    }
    else
    {
        //imageProfile.src = '/Content/assets/img/DefaultImageUser.jpg';
        imageProfile.setAttribute('src', '/Content/assets/img/DefaultImageUser.jpg');
    }

    imageProfile.onload = () => resolve(imageProfile);

    imageProfile.onerror = () => reject(new Error('Unable to load image for profile: ' + profile));

    const htmlMarkup =
        `<div class="widget widget-chart">

<div class="widget-header bg-inverse-dark">
             <h4 class="text-white">Informations du client</h4>  
</div>

<div class="widget-body">
              <div class="text-center m-b-30">
                  <img src="${imageProfile.src}" class="img-circle img-fluid" width="50" height="50">
              </div>
    <form class="form-horizontal" data-parsley-validate="true" name="demo-form">
        <div class="form-group m-b-5">
            <label class="col-md-6" for="Nom">Nom : </label>
            <div class="col-md-6">
     <p id="Nom">${profile.PropertyValue1}</p>
            </div>
        </div>

        <div class="form-group m-b-5">
           <label class="col-md-6" for="Prenom">Prénom  : </label>
           <div class="col-md-6">
    <p id="Prenom">${profile.PropertyValue2}</p>
           </div>
       </div>

       <div class="form-group m-b-5">
           <label class="col-md-6" for="Type">Type  : </label>
           <div class="col-md-6">
    <p id="Type">${profile.Type}</p>
           </div>
       </div>

      <div class="form-group m-b-5">
         <label class="col-md-6" for="SubCategory">Sous-Catégorie  : </label>
         <div class="col-md-6">
    <p id="SubCategory">${profile.subCategory}</p>
         </div>
      </div>

      <div class="form-group m-b-5">
         <label class="col-md-6" for="Category">Catégorie  : </label>
         <div class="col-md-6">
    <p id="Category">${profile.Category}</p>
         </div>
      </div>
   </form>
</div>
      </div>`;
    $('.DetailsClientWifi').html(htmlMarkup);
    $('.DetailsClientWifi').css('display', 'block');
});

} 

async function RenderHtmlPersonnel_Async(profile)
{

  const promise = loadImageProfilePersonnel(profile);
  const result = await promise;

  //console.log(result);

}


function AfficherUI(profileId)
{
    $.ajax({
           url: '/Observer/GetActiveClientsByFloor',
           type: 'POST',
           data: {
                TypeId: '23-d'
           }
           success: function(response){
              profile = JSON.parse(response);
              if(profile.profileId === ProfileId){
                 RenderHtmlPersonnel_Async(profile);
              }
           }
   });
}

1 Ответ

0 голосов
/ 23 мая 2019

Вы создали тег <img> imageProfile и ожидаете события onload, чтобы разрешить свое обещание, но вы никогда не вставили imageProfile в любое место документа (вы ничего не делали someElement.appendChild()).

Это означает, что буквально требуется навсегда для обещания разрешиться, потому что событие onload не будет никогда .

...