创建两个异步获取请求答案

【问题标题】：Creating two asynchronous fetch requests创建两个异步获取请求
【发布时间】：2021-01-20 03:27:00
【问题描述】：

在使用提取请求将通过提取请求获得的字段填充到下拉框后，我们选择其中一个字段，代码应发出另一个提取请求以获取与所选字段关联的数据。

但是，在执行此操作时，第二个获取请求不会在第一个之后处理。我们认为情况确实如此，因为如果我们使用带有预设字段（而不是菜单上选择的字段）的第二个获取请求，它会按预期工作。

脚本如下：

    <script>

    let result;

    let dropdown = document.getElementById('list-occurences');
    dropdown.length = 0;

    let defaultOption = document.createElement('option');
    defaultOption.text = 'Choose occurence to edit';

    dropdown.add(defaultOption);
    dropdown.selectedIndex = 0;

async function loadOcc() {
    const response = await fetch('https://safeandsoundpw.herokuapp.com/audits/status/0');
    const occ = await response.json();
    let option;
        
    for (let i = 0; i < occ.length; i++) {
        option = document.createElement('option');
        option.text = occ[i].fk_Audits_occurrence_id;
        option.value = occ[i].fk_Audits_occurrence_id;
        dropdown.add(option);
    }
    
    let selection = document.querySelector('#list-occurences');
        selection.addEventListener('change', () => {
            result = parseInt($('#list-occurences option:selected').val());
        });
    
    let response2 = await fetch(`https://safeandsoundpw.herokuapp.com/occurrences/$(result)`);
    const occ2 = await response.json();
    
    $.each(occ2, function (index, value) {
        console.log(value);
        $('#teamManager').append(`${value.fk_Occ_manager_id}`);
        $('#place').append(`${value.place}`);
        $('#date').append((`${value.start_date}`).slice(0,10).split("-").reverse().join("/"));
    });

    return occ;
}

console.log(result);
document.addEventListener("DOMContentLoaded", async () => {
    let occ = [];

    try {
        occ = await loadOcc();
    } catch (err) {
        console.log("Error!");
        console.log(err);
    }
    console.log(occ);
});

</script>

感谢您的宝贵时间。

【问题讨论】：

第二个响应将在第一个响应之后运行，因为 await 就是这样工作的，但这是不正确的：$(result) 你想要大括号，而不是括号；并且在深入了解 changehandler 之前，您不会将其分配为默认值，这意味着您可能希望在同一个 changehandler 中解除第二个 fetch 及其相关代码。

标签： javascript jquery json async-await fetch

【解决方案1】：

第二次提取必须在下拉更改处理程序中。

let selection = document.querySelector('#list-occurences');
selection.addEventListener('change', () => {
  result = parseInt($('#list-occurences option:selected').val());
  
  let response2 = await fetch(`https://safeandsoundpw.herokuapp.com/occurrences/${result}`); // Fixed the brace issue here
  const occ2 = await response2.json();  // Await response2... The "2" was missing
  
  $.each(occ2, function (index, value) {
      console.log(value);
      $('#teamManager').append(`${value.fk_Occ_manager_id}`);
      $('#place').append(`${value.place}`);
      $('#date').append((`${value.start_date}`).slice(0,10).split("-").reverse().join("/"));
  });
    
});

【讨论】：