异步函数和 promise 需要很长时间才能解决

Question

我有一个函数 (loadImageProfilePersonnel) 创建并加载附加到 DOM 的图像元素，该函数返回一个承诺。我还有另一个调用 promise 的函数异步函数 (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);
              }
           }
   });
}

Answer 1

您创建了 <img> 标记 imageProfile 并等待它的 onload 事件来解决您的承诺，但是您从不在文档的任何位置插入 imageProfile（您没有做任何someElement.appendChild())。

这意味着它确实需要 forever 才能解决承诺，因为 onload 事件将永远发生。