javascript - 我想一键调用两个函数，并确保它们将一个接一个地工作

Question

我想获得即时解决问题的帮助，所以问题是我必须调用两个API网址。第二个依赖于第一个(在第一个获取中我获取一些基本信息，包括id，在第二个获取中，我想基于来自第一次获取的id获取数据)。
我总是得到这个错误:Uncaught TypeError: Cannot read property 'length' of undefined可能我的方法不正确。我尝试了一些操作，例如将第二个功能放到第一个功能内，我尝试不使用异步功能，只有当我有两个不同的按钮时，它才能正常工作。
我猜异步导致了这个问题。(它试图获得响应之前的长度)
请帮我这个。我很想对方法或以任何方式解决它有所了解。
提前致谢。
这是有问题的代码

//recipies by ingredients array
var displayData = [];
//full recipies array
var displayRecipes = [];

document.getElementById("search").addEventListener("click", function () {
  var l = document.getElementsByClassName("ingInput").length
  var ing = document.getElementById('id').value
  var ing1 = ''
  //getting all the values from the inputs so i can search it in the api url
  for(var i = 1; i<l ;i++){
    ing1 += ',' + document.getElementsByClassName("ingInput")[i].value 
  }
  //async get request for the api url 
 async function postData(url = '') {
    const response = await fetch(url, {
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },

    });
    return response.json(); // parses JSON response into native JavaScript objects
  }
  //the api url with the inputs values for searching by ingredeints
  postData('https://api.spoonacular.com/recipes/findByIngredients?ingredients='+ ing + ing1 + '&number=10&apiKey=API_KEY')
    .then((data) => {
      displayData.push(data); // JSON data parsed by `response.json()` call
      console.log('done')
    });

})

//second func
document.getElementById("search").addEventListener("click", function () {
//trying to get data from this array, here i have error.
  var l = displayData[0].length
  var ids = []
  for(var i = 0; i<l ;i++){
    ids.push(displayData[0][i].id) 
  }

  async function postData(url = '') {
    // Default options are marked with *
    const response = await fetch(url, {
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },

    });
    return await response.json(); // parses JSON response into native JavaScript objects
  }

  postData('https://api.spoonacular.com/recipes/informationBulk?ids='+ids.toString()+'&apiKey=API_KEY')
    .then((data) => {
      displayRecipes.push(data); // JSON data parsed by `response.json()` call
      console.log(displayRecipes)
    });

})```

Answer 1

仅当您有第一笔数据时，才能进行第二笔提取吗？这样，当没有数据存在时，按钮将获取初始数据。如果数据已经存在，它将获取其他信息。因此，您只有一个侦听器:

 document.getElementById( "search" ).addEventListener( "click", function () {
    if ( displayData.length === 0 ) {
        // Call first function 
    } else {
        // Call second function
    }
 })