等待 async/await 结果返回，以便使用这些值呈现动态 html

Question

几天前我发布了一个关于此的问题，我得到的建议似乎部分有效，返回了我想要的结果，但在最终呈现数据时，我遇到了我的上一个问题。如果您想参考它，这是原始帖子： Grab the value of a span element

我使用 Fetch 重写了我的所有代码，而不是旧的 xmlHttp API，因为这是在上一篇文章中推荐的。为了便于阅读，我还想将这些函数分解为其他函数。

您会看到 fetch API 正在调用另一个数据库（出于隐私原因，我不得不隐藏标题）并调用 callFetch 函数。 callFetch 函数本质上采用 data 对象并通过 Google 的 distanceMatrix API 运行来自 data 的地址，以便将用户的输入地址（与 addresses 数组重复相同的次数）与data 对象。在getDistance 内部，我得到了所有比较结果并将结果推送到单独的数组中。

在getSortedValues 内部，我从getDistance 获取结果，按里程排序（这是我要在渲染数据中返回的更重要的部分之一），然后将它们作为单独的对象传递(facility, distance, time, address) 到一个名为combined的数组。

最后，renderTemplate 使用每个组合对象的值中的值组合并呈现 html，并动态呈现到页面。

我更新了我的一些代码，并试图澄清更多。按钮要求我添加模拟值，因为用户无法测试代码。我试过了，但它改变了我的代码的行为，并取消了从另一个不再存在等待问题的来源提取数据的动态部分。

我相信我的主要问题在于sortValues。当我点击提交按钮（我向每个函数添加控制台日志以更好地了解函数触发的顺序）时，您将看到所有内容第一次触发（在图像中），sortValues 返回一个空数组。第二次数组填充所有四个对象，每个对象有 15 个值。所以，我相信，无论我将async 添加到renderTemplate 和awaiting sortValues，sortValues 第一次仍然会返回一个空数组。我认为这一切的根源在于等待combined 填充到sortValues 内部。有谁知道我可以做些什么来等待或让combined 在第一次调用sortValues 时填充？

let inputVal = [];
let facilityArray = [];
let distanceArray = [];
let timeArray = [];
let filteredArray = [];
let sortedArray = [];
let combined = [];
let facAddress = [];
let resultsObject, intDistanceResult;
const resetButton = document.querySelector("#refresh");


// Set data object
const data = {
    from: "xxxxxxxxx",
    // Facility id and address of each location
    select: [6, 8],
    options: {
        skip: 0,
        top: 0,
    },
};

fetchAPI = () => {
    fetch("https://api.quickbase.com/v1/records/query", {
            method: "POST",
            headers: {
                "QB-Realm-Hostname": "xxxxx.quickbase.com",
                "Authorization": "QB-USER-TOKEN xxxxxxxxxxxxxxxxxx",
                "Content-Type": "application/json",
            },
            body: JSON.stringify(data),
        })
        .then(resp => resp.json())
        .then(data => callFetch(data))
        .catch(error => console.log("Error:", error));
    console.log("fetchAPI fired")
};

callFetch = dataObject => {
    console.log("callFetch fired");
    // Map through the data object and grab the facId and address of each location
    const facId = dataObject.data.map(e => e["6"].value);
    const addresses = dataObject.data.map(e => e["8"].value);
    // Create Google Maps distance service instance
    distanceService = new google.maps.DistanceMatrixService();

    for (let i = 0; i < addresses.length; i++) {
        // Add matrix settings object
        distanceService.getDistanceMatrix({
                origins: [inputVal.toString("")],
                destinations: [addresses[i]],
                travelMode: "DRIVING",
                unitSystem: google.maps.UnitSystem.IMPERIAL,
                durationInTraffic: true,
                avoidHighways: false,
                avoidTolls: false,
            },
            // Set response and error capture
            (response, status) => {
                if (status !== google.maps.DistanceMatrixStatus.OK) {
                    console.log("Error:", status);
                    const message = document.querySelector("#message");
                    message.innerHTML = `Error: ${status}. Please resubmit.`;
                } else {
                    const distanceResult = response.rows[0].elements[0].distance
                        .text;
                    const timeResult = response.rows[0].elements[0].duration.text;
                    // Convert distanceResult values to integers and push to distanceArray to later sort
                    intDistanceResult = parseInt(distanceResult.replace(/,/g, ""));
                    // Push results to respective arrays to pass to combined object inside of sortValues function
                    facilityArray.push(facId[i]);
                    distanceArray.push(intDistanceResult);
                    timeArray.push(timeResult);
                    facAddress.push(addresses);
                }
            }
        );
    }
    renderTemplate();
};

sortValues = () => {
    console.log("sortValues fired");
    // Re-sort array of objects from getDistance function with values in order by mileage, ascending
    combined = facilityArray
        .map((facility, i) => ({
            facility,
            distance: distanceArray[i],
            time: timeArray[i],
            address: facAddress[i]
        }))
        .sort((first, second) => first.distance - second.distance);
    console.log(combined);
};

renderTemplate = async() => {
    await sortValues();
    console.log("renderTemplate fired");
    // Grab container div entry point in html
    let container = document.querySelector(".container-sm");
    for (let i = 0; i < combined.length; i++) {
        // Create html dynamically and populate based on combined' objects values
        let div = document.createElement("div");
        div.classList.add("d-inline-flex", "p-2", "mb-1");
        div.innerHTML =
            `<div class="container">
                <div class="card" style="width: 20rem; height: fixed;">
                    <div class="card-body">
                        <input class="form-control" hidden value="${inputVal.join('')}" type="text" placeholder="Destination Address" id="destaddress${i}">
                        <input class="form-control" hidden readonly type="text" placeholder="Start Address" id="startaddress${i}">
                        <h6 class="card-title" style="font-weight: bold">Service Center - ${combined[i].facility}</h6>
                        <h6 class="card-title">Distance - <span id="distance${i}">${combined[i].distance} miles</span></h6>
                        <h6 class="card-title">Drive Time - <span id="time${i}">${combined[i].time}</span></h6>
                    </div>
                </div>
            </div>`;
        // Append new values to the div
        container.appendChild(div);
    }
}

form.addEventListener("submit", (e) => {
    e.preventDefault();
    const patientAddressInput = document.querySelector("#patientaddress");
    // Get user entry and assign to inputVal in dynamically created HTML
    inputVal.push(patientAddressInput.value);
    fetchAPI();
    console.log("Listener fired");
});

resetButton.addEventListener("click", () => location.reload());

<!DOCTYPE html>
<html>

<head>
  <title>Ethos Service Center - Google Maps Distance Search</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
  <div class="container-sm mt-3">
    <form class="form mb-3" id="form">
      <div class="search">
        <div class="card-body">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">Patient Destination</span>
            </div>
            <input class="form-control" type="text" placeholder="Enter Zip Code" class="patientaddress" id="patientaddress" required>
            <div class="input-group-prepend">
              <span class="input-group-text" id="message"></span>
            </div>
          </div>
          <hr>
          <button class="btn btn-primary mt-2" type="submit" id="submit">Submit</button>
          <button class="btn btn-outline-success mt-2 ml-3" type="reset" value="Reset" id="refresh">Clear Destination</button>
        </div>
      </div>
    </form>
  </div>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=[Google Maps API Key]"></script>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>

Answer 1

我找到了一种方法来做到这一点，尽管这是一种老套、俗气的方法，而且可能不是最有效的方法。我在for loop 的末尾添加了一个三元运算符，用于检查i 的值是否等于数组中最后一个元素的索引值。如果是，请等待 1 秒（通过运行 setTimeout 函数）等待 DistanceMatrix 调用运行，以便我有一些值，然后调用 sortValues 函数。它至少有效。所有的代码都是一样的，但是这里是添加了三元运算符的callFetch 函数和setTimeout 函数。

callFetch = async dataObject => {
    console.log("callFetch fired");
    // Map through the data object and grab the facId and address of each location
    const facId = dataObject.data.map(e => e["6"].value);
    const addresses = dataObject.data.map(e => e["8"].value);
    // Create Google Maps distance service instance
    distanceService = new google.maps.DistanceMatrixService();

    for (let i = 0; i < addresses.length; i++) {
        // Add matrix settings object
        distanceService.getDistanceMatrix({
                origins: [inputVal.toString("")],
                destinations: [addresses[i]],
                travelMode: "DRIVING",
                unitSystem: google.maps.UnitSystem.IMPERIAL,
                durationInTraffic: true,
                avoidHighways: false,
                avoidTolls: false,
            },
            // Set response and error capture
            (response, status) => {
                if (status !== google.maps.DistanceMatrixStatus.OK) {
                    console.log("Error:", status);
                    const message = document.querySelector("#message");
                    message.innerHTML = `Error: ${status}. Please resubmit.`;
                } else {
                    distanceResult = response.rows[0].elements[0].distance.text;
                    timeResult = response.rows[0].elements[0].duration.text;
                    // Convert distanceResult values to integers and push to distanceArray to later sort
                    intDistanceResult = parseInt(distanceResult.replace(/,/g, ""));
                    // Push results to respective arrays to pass to combined object inside of sortValues function
                    facilityArray.push(facId[i]);
                    distanceArray.push(intDistanceResult);
                    timeArray.push(timeResult);
                    facAddress.push(addresses);
                }
            });
        (i == addresses.length - 1 ? setTimeout(() => { sortValues() }, 1000) : null)
    }
};