如何在JavaScript中逐个执行函数

我尝试了很多解决方案，包括，但没有一个对我有效

在我的应用程序中，我希望将各种API中的数据提取到HTML输入中。首先，我获取区域、类别和扇区。因为这3个字段是select输入，所以我用返回的数据设置了它们的select选项。然后获取组织详细信息以填充其他文本输入字段。 问题是，为输入设置值的代码并不等待所有数据提取完成，所以它有时返回未定义的值

我的代码是

async function loadData() {

  var organisation_id = document.getElementById("organisation_id").innerText;

  console.log("Fetching sectors")
  // Fetch sectors
  let fetchSectors = await fetch("/get-organisation-sectors");
  let sectorsData = await fetchSectors.json();

  var sectors = sectorsData;
  var $sectorselect = $("#sector");
  $sectorselect.html('<option value=""> Choose... </option>');
  $.each(sectors, function (key, val) {
    $sectorselect.append(
      '<option value="' + val.sector_name + '">' + val.sector_name + "</option>"
    );
  });
  // Done fetching sectors

  console.log("Fetching categories")
  // Fetch categories
  let fetchCategories = await fetch("/get-organisation-categories");
  let categoriesData = await fetchCategories.json();

  var categories = categoriesData;
  var $categoryselect = $("#category");
  $categoryselect.html('<option value=""> Choose... </option>');
  $.each(categories, function (key, val) {
    $categoryselect.append(
      '<option value="' + val.category_name +'">' + val.category_name + "</option>"
    );
  });
  // Done fetching categories


  console.log("Fetching regions")
  // Fetch regions
  let fetchRegions = await fetch("http://apis.bigdataghana.com/get_regions");
  let regionsData = await fetchRegions.json();

  var regions = regionsData;
  var $regionselect = $("#region");
  $regionselect.html('<option value=""> Choose... </option>');
  $.each(regions, function (key, val) {
    $regionselect.append(
      '<option value="' + val.region + '">' + val.region + "</option>"
    );
  });
  // Done fetching regions

  console.log("Fetching organisation details")
  // Fetch organisation details
  let fetchOrganisationData = await fetch("/get-organisation-details/" + organisation_id);
  let organisationDetailsData = await fetchOrganisationData.json();

  organisationData = organisationDetailsData[0];

  return await organisationData;
}
loadData().then((data) => {
  setValues(data);
}).catch(e => console.log(e));

异步函数loadData（）{ var organization_id=document.getElementById（“organization_id”）.innerText； console.log（“获取扇区”） //获取扇区 让fetchSectors=wait fetch（“/get组织扇区”）； 让sectorsData=wait fetchSectors.json（）； var部门=部门数据； var$sectorselect=$（“扇区”）； $sectorselect.html（'Choose…'）； $。每个（扇区、功能（键、val）{ $sectorselect.append( ''+val.sector_name+“” ); }); //已完成获取扇区 log（“获取类别”） //获取类别 让fetchCategories=等待获取（“/get Organization categories”）； 让categoriesData=wait fetchCategories.json（）； var类别=分类数据； var$categoryselect=$（“类别”）； $categoryselect.html（'Choose…'）； $。每个（类别、功能（键、val）{ $categoryselect.append( ''+val.category_name+“” ); }); //已完成获取类别 log（“获取区域”） //获取区域 让fetchRegions=等待获取（“http://apis.bigdataghana.com/get_regions"); 让regionsData=wait fetchRegions.json（）； var区域=区域数据； var$regionselect=$（“#地区”）； $regionselect.html（'Choose…'）； $。每个（区域、功能（键、val）{ $regionselect.append( ''+val.region+“” ); }); //已完成获取区域 console.log（“获取组织详细信息”） //获取组织详细信息 让FetchOrganizationData=Wait fetch（“/get Organization details/”+组织id）； 让OrganizationDetailsData=Wait FetchOrganizationData.json（）； OrganizationData=OrganizationDetailsData[0]； 返回等待组织数据； } loadData（）。然后（（数据）=>{ 设定值（数据）； }).catch（e=>console.log（e））； 设置值的函数是

function setValues(organisationData) {
  $("#organisation_name").val(organisationData.name);
  $("#email").val(organisationData.email);
  $("#phone").val(organisationData.phone);
  $("#website").val(organisationData.website);
  $("#locality").val(organisationData.locality);
  $("#address").val(organisationData.address);
  $("#latitude").val(organisationData.latitude);
  $("#longitude").val(organisationData.longitude);
  $(function () {
    $("#category").val(organisationData.category);
  });
  $(function () {
    $("#sector").val(organisationData.sector);
  });
  $(function () {
    $("#region").val(organisationData.region);
  });
  var $districtselect = $("#district");
  $districtselect.html('<option value=""> Choose... </option>');
  $districtselect.append(
    '<option value="' +
    organisationData.district +
    '">' +
    organisationData.district +
    "</option>"
  );

  $(function () {
    $("#district").val(organisationData.district);
  });

}

功能设置值（组织数据）{
$（“#Organization_name”）.val（OrganizationData.name）；
$（“#email”）.val（OrganizationData.email）；
$（“#phone”）.val（OrganizationData.phone）；
$（“#网站”）.val（OrganizationData.website）；
$（“#locality”）.val（OrganizationData.locality）；
$（“#地址”）.val（OrganizationData.address）；
$（“#纬度”）.val（OrganizationData.latitude）；
$（“#经度”）.val（OrganizationData.longitude）；
$（函数（）{
$（“#类别”）.val（OrganizationData.category）；
});
$（函数（）{
$（“#部门”）.val（OrganizationData.sector）；
});
$（函数（）{
$（“#地区”）.val（OrganizationData.region）；
});
var$districtselect=$（“#地区”）；
$districtselect.html（'Choose…'）；
$districtselect.append(
'' +
组织数据。地区+
""
);
$（函数（）{
$（“#地区”）.val（OrganizationData.district）；
});
}

您可以使用Promise.all等待提取所有数据。但是，您必须重写代码才能使用PromisesYou正在正确使用Wait，至少在fetch调用进行时是这样，所以我看不出任何事情会以您描述的方式不可预测。要么响应本身并不总是您所期望的（您是否检查了网络面板？每次获取后是否使用了console.log？），要么是其他原因。最后的“return await”（返回等待）并没有做任何有用的事情，顺便说一句，OrganizationData是一个未声明的变量，但这可能不是您的主要问题。“设置输入值的代码”-您指的是哪种代码？@Bergi我使用一个函数来设置值。它将组织细节视为一个整体parameter@TomBoutell每次提取后，数据都会按预期记录到控制台。整个过程在我的本地主机上运行良好，但当我将其上传到服务器时返回未定义。当我刷新页面两次时，就会设置值，这很奇怪。您可以使用Promise.all来等待所有数据的提取。但是，您必须重写代码才能使用PromisesYou正在正确使用Wait，至少在fetch调用进行时是这样，所以我看不出任何事情会以您描述的方式不可预测。要么响应本身并不总是您所期望的（您是否检查了网络面板？每次获取后是否使用了console.log？），要么是其他原因。最后的“return await”（返回等待）并没有做任何有用的事情，顺便说一句，OrganizationData是一个未声明的变量，但这可能不是您的主要问题。“设置输入值的代码”-您指的是哪种代码？@Bergi我使用一个函数来设置值。它将组织细节视为一个整体parameter@TomBoutell每次提取后，数据都会按预期记录到控制台。整个过程在我的本地主机上运行良好，但当我将其上传到服务器时返回未定义。当我刷新页面两次时，就会设置值，这很奇怪